Webpack 4 speed

As of July 2018, Webpack is becoming the most popular module bundler tool. It includes a bunch of features tailored for app performance. I have talked about some like Treeshaking, code splitting and support for plugins.

Transcript

1. Quick Intro to Webpack Need for Speed Webperf NYC meetup July 10th, 2018 Malek Hakim
2. How do you build your large number of files for your app?
3. Module bundlers
4. What is Webpack? webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. - Webpack official docs
5. Webpack could be intimidating at first
6. Zero config with Webpack 4
7. Zero config assumptions: • a ./src folder as an entry point • will generate ./dist/main.js as an output bundle
8. Slide from Jiří Pudil ./src • ./dist/
9. Custom manifesto entry output loaders plugins Defined in webpack.config.js
10. Enable production builds
11. Zero config production build comes with • Chunk minimization with UglifyJS • Order chunks by occurence: Order the modules and chunks by occurrence. This saves space. • Module concatenation: allows modules to be wrapped into one closure function, which is faster to execute. • Adds a process.env.NODE_ENV === 'production' that would be used by some library to include production code only for a performance boost.
12. Treeshaking Removes unnecessary, not used code. Caveat: It does that only on ES6 code since it relies on import and export syntax.
13. Code splitting 3 ways: • Entry Points: Manually split code using entry configuration. • Prevent Duplication: Use the SplitChunks to dedupe and split chunks. • Dynamic Imports: Split code via inline function calls within modules.
14. Multiple entry points codebase home.js home.js
15. Prevent duplications with SplitChunks Extract common dependencies into an existing entry chunk or an entirely new chunk codebase home.js home.js vendors. js vendors .js here will be created with shared code.
16. When does webpack create a new chunk? webpack will automatically split chunks based on these conditions: • New chunk can be shared OR modules are from the node_modules folder • New chunk would be bigger than 30kb (before min+gz) • Maximum number of parallel requests when loading chunks on demand would be lower or equal to 5 • Maximum number of parallel requests at initial page load would be lower or equal to 3 - SplitChunksPlugin
17. Dynamic imports codebase page.js modal.js
18. Prefetching • Usually happens in the future after parent chunk is loaded. • Best used on user interaction. • Downloaded on browser idle time
19. Preloading • Initiated by parent chunk and downloaded in parallel • It shift the request priority early in the loading • Used for important vendor scripts or font loading • Helps shaving some time for first paint and time to interactive
20. When to use preload vs prefetch? Preload resources you have high-confidence will be used in the current page. Prefetch resources likely to be used for future navigations across multiple navigation boundaries. - Addy Osmani
21. Assets caching
22. Automatically generate a unique file name Add .[chunkhash] to the filename
23. Best to extract vendor scripts into their own bundle Will help the client to cache the unchanged vendor scripts such as “react” or “moment”. Remember SplitChunks ?
24. Power of webpack is in its plugins
25. Better visibility over your code with the bundle analyzer plugin
27. npm install --save-dev webpack-bundle-analyzer
28. Make use of some other interesting tricks: • Use ES libraries like lodash-es to take advantage of Treeshaking • Use the IgnorePlugin to ignore unused moment locales. • Make use of the offlinePlugin or other plugins that enable offline experiences and add a service worker to your app. • Use url-loader to transform images into DataUrl base64 files • Extracts CSS into separate files using “mini-css-extract-plugin”. • Look for other optimizations in the wild.
29. References: • Webpack guides: https://webpack.js.org/guides/ • Resource hints: https://w3c.github.io/resource-hints/ • Preload, Prefetch And Priorities in Chrome: https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf • Web performance optimization with Webpack: https://developers.google.com/web/fundamentals/performance/webpack/ • Webpack-libs-optimizations: https://github.com/GoogleChromeLabs/webpack-libs-optimizations