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-pluginFirst, disable any existing configuration you have to Babel, minification, and module/nomodule.
Then, add OptimizePlugin to your Webpack plugins Array:
plugins: [
new OptimizePlugin({
// any options here
})
]| Option | Type | Description |
|---|---|---|
concurrency |
number|false |
Maximum number of threads to use. Default: the number of available CPUs. Pass false for single-threaded, sometimes faster for small projects. |
sourceMap |
boolean|false |
Whether or not to produce source maps for the given input. |
minify |
boolean|false |
Minify using Terser, if turned off only comments will be stripped. |
downlevel |
boolean|true |
Produces a bundle for nomodule browsers. (IE11, ...) |
modernize |
boolean|true |
Attempt to upgrade ES5 syntax to equivalent modern syntax. |
verbose |
boolean|false |
Will log performance information and information about polyfills. |
polyfillsFilename |
string|polyfills.legacy.js |
The name for the chunk containing polyfills for the legacy bundle. |
exclude |
RegExp[]|[] |
Asset patterns that should be excluded |
Instead of running Babel on each individual source code file in your project, optimize-plugin
transforms your entire application's bundled code. This means it can apply optimizations and
transformations not only to your source, but to your dependencies - making polyfill extraction
and reverse transpilation steps far more effective.
This setup also allows optimize-plugin to achieve better performance. All work is done in
a 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 compilation
passes, which incurs enormous overhead since the entire graph is built and traversed multiple
times. With optimize-plugin, bundling and transpilation are now a separate concerns: Webpack
handles 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 or babel.config.js file and remove babel-loader from your Webpack configuration. Remember, optimize-plugin only uses your babel configuration when generating modern bundles. Legacy bundles are automatically compiled to ES5 without looking at your Babel configuration, though you can customize their compilation by defining a browserslist 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 does not 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