Sample code for a blog post on optimizing webpack performance.
The following techniques yield the following size reductions. Some techniques, like deterministic hashes, don’t affect the bundle size, but contribute in other harder-to-measure ways such as caching.
| Technique | Entry size | gzipped | Savings from previous step |
|---|---|---|---|
| Base App | 2.5 MB |
525 kB |
— |
| Scope Hoisting | 2.5 MB |
525 kB |
— |
Uglification of base app via webpack -p |
1 MB |
266 kB |
+ 50–60% |
| Dynamic import | 229 kB |
70 kB |
+ 70–75% |
| Deterministic Hashes | — | — | — |
| Commons Chunk Plugin † | 230 kB |
71 kB |
– 1% |
| webpack Offline Plugin | — | — | — |
| webpack Bundle Analyzer‡ | — | — |
† The Commons Chunk Plugin technique split one entry file into 2, and the combined size of both is listed.
‡ The Bundle Analyzer technique saved 161 kB on a particular request. This
is significant savings even if it doesn’t apply to 100% of users.
For the full explanation, see the blog post.