OptimisingWEbpack BUNDLES
19.01.2017 CPHJS @penzington
🎉 Webpack 2 is out! 🎉
New docs! webpack.js.org
webpack
- JavaScript bundler
- Quite low level
- Very powerful
Let's give it a spin
Uses webpack@1
Built with webpack's production flag
Step 1
Basic config
Set process.env.NODE_ENV to "production"
Sets React to production mode
Step 2
USE DEFINE plugin
Step 3
upgrade to webpack2
Small changes in config syntax
Understands ES6 modules
Introduces "tree shaking"
Warnings for large bundles
Step 4
EXTRACT POLYFILLS
Don't import/require polyfills from code
Create a separate bundle for them in webpack config
Inject script tag for browsers that need it
Defer application init to after polyfills are loaded
Step 5
use contex Repl. plugin
Plugins allows to override default behaviour
Helps removing unwanted dynamic requires
Step 6
Lazy loading chunks
Identify non-crucial parts of the functionality
Use import('...') syntax to async require modules
webpack automatically creates chunks for lazy loading
Gotcha: you need to teach babel to ignore import function
Step 7
use preact
ES6-API-compatible leaner React replacement
Drops support for older syntax and older browser support
preact-compat makes it a drop-in replacement
wepack resolve aliases or "fake" React packages
Results
Thanks!
Maciek Pekala
@penzington
Links
- https://webpack.js.org/
- https://preactjs.com/
- https://www.webpagetest.org/
- https://www.sitespeed.io/
- https://github.com/th0r/webpack-bundle-analyzer
- Lazy Loading React Component idea