JavaScript bundles can get huge real quick. I'd like to introduce you to some strong visualization tools for Webpack, like webpack-bundle-analyzer, which will give you more insight into what your dependencies consist of in regards to size and sub dependencies.
Learning to use these tools and keep an eye on your final output early will keep you aware of what's going on as your application scales, and allow you to make pivots from libraries earlier and easier.
00:00 - What we'll cover
01:47 - What's in the project
02:38 - Webpack Visualizer website
07:25 - Visualizing a new dependency
13:17 - Adding webpack-bundle-analyzer
18:17 - Adding lodash for troubleshooting example
23:11 - Testing `import * as`
25:22 - Testing import by method's file path
26:10 - Testing lodash-es
28:35 - Options for lodash with babel and webpack
29:07 - Minimal bundle size solution for lodash
30:37 - Investigating source code on Github
33:28 - Conditionally run the analyzer plugin
35:35 - Wrap-up
Repository for reference:
github.com/Jimmydalecleveland...
Follow Jimmy Cleveland's doings:
twitter: / jimmydcleveland
blog: blog.jimmydc.com/
#javascript #webpack
Негізгі бет Know your Webpack bundle better with visualization
Пікірлер: 16