"We need Webpack presets" and "Webpack and its plugins are too hard to configure correctly" have been the number one cause of developer pain shared with me from large sites adopting Progressive Web Apps and optimising their load performance.
If I was building a Webpack preset pack for performance, I might use the following:
- Ensure you're using a production build of your framework:
new webpack.DefinePlugin({ 'process.env': env }) - Minify your JS:
webpack.optimize.UglifyJsPlugin - Compress your resources (GZip): compression-webpack-plugin
- Split your vendor chunks: CommonsChunkPlugin
- Wire up revisioned bundles to HTML: html-webpack-plugin
- Long-term cache unchanged assets: HashedModuleIdsPlugin (prod), NamedModulesPlugin (dev)
- Extract CSS to its own files (cachability): extract-text-webpack-plugin
- Service Worker precache static assets + application shell: sw-precache-webpack-plugin
- Preload key JavaScript bundles (or assets like fonts): preload-webpack-plugin
- Set Webpack 2 performance budgets to trigger for production builds:
performance: { hints: process.env.NODE_ENV === 'production' ? "warning" : false }
Vue.js does a pretty stellar job of preconfiguring most of what you need out of the box (example). More advanced problems like tackling long-term caching, preloading and precaching are not yet a default there, but we might explore that in a Vue PWA template.
We're going to chat with Sean Larkin about how far we can get with baking in sane defaults and try deferring the rest of this to a Webpack CLI template (and Vue Webpack template).
thanks for that! It's help me a lot to understand and set up our production mode correctly