✳flâneur — a map of the web's best reading

Reduce bundle size | Motion for React (prev Framer Motion)

motion.dev · 960 words · saved by 1 readers

When measuring the gzipped and minified size of Motion for React using a bundle analysis website like Bundlephobia, you might see big numbers like 50kb or more! This is misleading. Motion for React exports many functions, most of which you won't import. JavaScript bundlers like Rollup and Webpack are capable of "tree shaking", which means that only the code you import is shipped to consumers. You may only use a tiny, single hook from Motion for React, like useReducedMotion. So in that case the size would be closer to 1kb. However, Motion for React's primary animation APIs are useAnimate and motion. Most developers will choose to use at least one of these when using Motion, so let's see how to make them as small as possible. useAnimate is Motion for React's animation function, used for manually triggering and controlling animations. It comes in two sizes, mini (2.3kb) and hybrid (17kb). The mini version exclusively uses WAAPI for hardware accelerated animations, whereas the hybrid funct

A great web experience doesn't just look and move beautifully, it should load quickly, too. When measuring the gzipped and minified size of Motion for React using a bundle analysis website like Bundlephobia , you might see big numbers like 50kb or more! This is misleading. Motion for React exports many functions, most of which you won't import. JavaScript bundlers like Rollup and Webpack are capable of "tree shaking", which means that only the code you import is shipped to consumers. You may only use a tiny, single hook from Motion for React, like useReducedMotion . So in that case the size wo

Explore this link on the map →

related reading