![Case study
Our star(ng point
Version: webpack 2.2.1
Time: 10805ms
Asset Size Chunks Chunk Names
index.js 322 kB 0 [emitted] [big] index
index.js.gz 98.5 kB [emitted]](https://image.slidesharecdn.com/webpack-170519123822/85/When-webpack-p-is-not-enough-3-320.jpg)
![Compression Plugin1
import CompressionPlugin from 'compression-webpack-plugin';
const webpackConfig = {
plugins: [
new CompressionPlugin({ ...options })
]
};
1
h$ps://github.com/webpack-contrib/compression-webpack-plugin](https://image.slidesharecdn.com/webpack-170519123822/85/When-webpack-p-is-not-enough-4-320.jpg)
![Upgrading webpack
from 2.2.1 to 2.3.3
Version: webpack 2.3.3
Time: 9942ms
Asset Size Chunks Chunk Names
index.js 322 kB 0 [emitted] [big] index
index.js.gz 98.4 kB [emitted]](https://image.slidesharecdn.com/webpack-170519123822/85/When-webpack-p-is-not-enough-5-320.jpg)
![Upgrading dependencies
from package.json
Version: webpack 2.3.3
Time: 11438ms
Asset Size Chunks Chunk Names
index.js 346 kB 0 [emitted] [big] index
index.js.gz 106 kB [emitted]](https://image.slidesharecdn.com/webpack-170519123822/85/When-webpack-p-is-not-enough-6-320.jpg)
![Enable tree shaking
with ES6 imports2
Version: webpack 2.3.3
Time: 12575ms
Asset Size Chunks Chunk Names
index.js 342 kB 0 [emitted] [big] index
index.js.gz 105 kB [emitted]
First win !
2
h$ps://webpack.js.org/guides/tree-shaking/](https://image.slidesharecdn.com/webpack-170519123822/85/When-webpack-p-is-not-enough-7-320.jpg)
![Par$al imports
// Standard import:
import { debounce } from 'lodash';
// Partial import:
import debounce from 'lodash/debounce';
Version: webpack 2.3.3
Time: 10241ms
Asset Size Chunks Chunk Names
index.js 278 kB 0 [emitted] [big] index
index.js.gz 82.9 kB [emitted]](https://image.slidesharecdn.com/webpack-170519123822/85/When-webpack-p-is-not-enough-8-320.jpg)
![Exclude some dependencies
react, react-dom, redux, ...
Version: webpack 2.3.3
Time: 5336ms
Asset Size Chunks Chunk Names
index.js 63.8 kB 0 [emitted] index
index.js.gz 19.9 kB [emitted]
Such wow!](https://image.slidesharecdn.com/webpack-170519123822/85/When-webpack-p-is-not-enough-9-320.jpg)
When webpack -p is not enough
- 1. When webpack -p is not enough by Maciej Komorowski
- 2. Webpack?
- 3. Case study Our star(ng point Version: webpack 2.2.1 Time: 10805ms Asset Size Chunks Chunk Names index.js 322 kB 0 [emitted] [big] index index.js.gz 98.5 kB [emitted]
- 4. Compression Plugin1 import CompressionPlugin from 'compression-webpack-plugin'; const webpackConfig = { plugins: [ new CompressionPlugin({ ...options }) ] }; 1 h$ps://github.com/webpack-contrib/compression-webpack-plugin
- 5. Upgrading webpack from 2.2.1 to 2.3.3 Version: webpack 2.3.3 Time: 9942ms Asset Size Chunks Chunk Names index.js 322 kB 0 [emitted] [big] index index.js.gz 98.4 kB [emitted]
- 6. Upgrading dependencies from package.json Version: webpack 2.3.3 Time: 11438ms Asset Size Chunks Chunk Names index.js 346 kB 0 [emitted] [big] index index.js.gz 106 kB [emitted]
- 7. Enable tree shaking with ES6 imports2 Version: webpack 2.3.3 Time: 12575ms Asset Size Chunks Chunk Names index.js 342 kB 0 [emitted] [big] index index.js.gz 105 kB [emitted] First win ! 2 h$ps://webpack.js.org/guides/tree-shaking/
- 8. Par$al imports // Standard import: import { debounce } from 'lodash'; // Partial import: import debounce from 'lodash/debounce'; Version: webpack 2.3.3 Time: 10241ms Asset Size Chunks Chunk Names index.js 278 kB 0 [emitted] [big] index index.js.gz 82.9 kB [emitted]
- 9. Exclude some dependencies react, react-dom, redux, ... Version: webpack 2.3.3 Time: 5336ms Asset Size Chunks Chunk Names index.js 63.8 kB 0 [emitted] index index.js.gz 19.9 kB [emitted] Such wow!
- 10. Split your bundle Gain cache performance
- 11. @komomc