|
1 | 1 | # Optimize Plugin for Webpack |
2 | 2 |
|
3 | | -Optimize your code for modern browsers while still supporting the other 10%, increasing your build performance, reducing bundle size and improving output quality. |
| 3 | +Optimize your code for modern browsers while still supporting the other 10%, |
| 4 | +increasing your build performance, reducing bundle size and improving output quality. |
4 | 5 |
|
5 | 6 | Put simply: it compiles code faster, better and smaller. |
6 | 7 |
|
7 | | -### Features |
| 8 | +## Features |
8 | 9 |
|
9 | 10 | - Much faster than your current Webpack setup |
10 | 11 | - Transparently optimizes all of your code |
11 | 12 | - Automatically optimizes all of your dependencies |
12 | 13 | - Compiles bundles for modern browsers (90%) and legacy browsers (10%) |
13 | 14 | - Removes unnecessary polyfills, even when inlined into dependencies |
14 | | -- Compiles a highly-optimized dedicated polyfills bundle |
| 15 | +- Builds a highly-optimized automated polyfills bundle |
| 16 | + |
| 17 | +## Usage |
| 18 | + |
| 19 | +First, disable any existing configuration you have to Babel, minification, and module/nomodule. |
| 20 | + |
| 21 | +Then, add `OptimizePlugin` to your Webpack plugins Array: |
15 | 22 |
|
16 | 23 | ```js |
17 | 24 | plugins: [ |
18 | 25 | new OptimizePlugin({ |
19 | | - // options |
| 26 | + // any options here |
20 | 27 | }) |
21 | 28 | ] |
22 | 29 | ``` |
| 30 | + |
| 31 | +### Options |
| 32 | + |
| 33 | +| Option | Type | Description |
| 34 | +|---|---|--- |
| 35 | +| `concurrency` | `number|false` | Maximum number of threads to use. Default: the number of available CPUs. <br>_Pass `false` for single-threaded, sometimes faster for small projects._ |
| 36 | + |
| 37 | + |
| 38 | +## How does this work? |
| 39 | + |
| 40 | +Instead of running Babel on each individual source code file in your project, `optimize-plugin` |
| 41 | +transforms your entire application's bundled code. This means it can apply optimizations and |
| 42 | +transformations not only to your source, but to your dependencies - making polyfill extraction |
| 43 | +and reverse transpilation steps far more effective. |
| 44 | + |
| 45 | +This setup also allows `optimize-plugin` to achieve better performance. All work is done in |
| 46 | +a background thread pool, and the same AST is re-used for modern and legacy transformations. |
| 47 | +Previous solutions for module/nomodule have generally relied running two complete compilation |
| 48 | +passes, which incurs enormous overhead since the entire graph is built and traversed multiple |
| 49 | +times. With `optimize-plugin`, bundling and transpilation are now a separate concerns: Webpack |
| 50 | +handles graph creation and reduction, then passes its bundles to Babel for transpilation. |
| 51 | + |
| 52 | +<img src="https://user-images.githubusercontent.com/105127/74685954-0cd21a80-519e-11ea-99f9-8fa5f3aef1b8.png"> |
| 53 | + |
| 54 | +### License |
| 55 | + |
| 56 | +Apache-2.0 |
0 commit comments