Repository files navigation

Optimize your code for modern browsers while still supporting the other 10%,increasing your build performance, reducing bundle size and improving output quality.

Put simply: it compiles code faster, better and smaller.

• Much faster than your current Webpack setup
• Transparently optimizes all of your code
• Automatically optimizes all of your dependencies
• Compiles bundles for modern browsers (90%) and legacy browsers (10%)
• Removes unnecessary polyfills, even when inlined into dependencies
• Builds a highly-optimized automated polyfills bundle

npm install --save-dev optimize-plugin

First, disable any existing configuration you have to Babel, minification, and module/nomodule.

Then, addOptimizePlugin to your Webpack plugins Array:

plugins:[newOptimizePlugin({// any options here})]

Instead of running Babel on each individual source code file in your project,optimize-plugintransforms your entire application's bundled code. This means it can apply optimizations andtransformations not only to your source, but to your dependencies - making polyfill extractionand reverse transpilation steps far more effective.

This setup also allowsoptimize-plugin to achieve better performance. All work is done ina background thread pool, and the same AST is re-used for modern and legacy transformations.Previous solutions for module/nomodule have generally relied running two complete compilationpasses, which incurs enormous overhead since the entire graph is built and traversed multipletimes. Withoptimize-plugin, bundling and transpilation are now a separate concerns: Webpackhandles graph creation and reduction, then passes its bundles to Babel for transpilation.

In order to migrate to optimize-plugin, you'll need to move your babel configuration into a.babelrc orbabel.config.js file and removebabel-loader from your Webpack configuration. Remember, optimize-plugin only uses your babel configuration when generatingmodern bundles. Legacy bundles are automatically compiled to ES5 without looking at your Babel configuration, though you can customize their compilation by defining abrowserslist field in your package.json.

In general, adopting optimize-plugin means removing all of your current polyfills, since the plugin automatically detects and polyfills JavaScript features for legacy bundles. The plugin doesnot polyfill DOM features though, so be sure to keep including any DOM polyfills your application relies (ParentNode.append(), Module Workers, etc).

Remember: the premise of this plugin is that you don't need to configure JS transpilation or polyfills - it's all done automatically based on usage.

Apache-2.0