Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Webpack Performance Presets

"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).

@OzzyCzech

This comment has been minimized.

Copy link

commented Apr 20, 2017

thanks for that! It's help me a lot to understand and set up our production mode correctly

@Kikobeats

This comment has been minimized.

Copy link

commented Jul 8, 2017

A good plugin for offline support is https://github.com/NekR/offline-plugin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.