Stop using `webpack.HashedModuleIdsPlugin` in production.
Background:
We use webpack.HashedModuleIdsPlugin()
in production to create small, deterministic module IDs:
[3V7F] ./protected_branches/protected_branches_bundle.js
Whereas in development, we use webpack.NamedModulesPlugin()
which just uses the file path as the module ID:
[./protected_branches/protected_branches_bundle.js] ./protected_branches/protected_branches_bundle.js
Counter-intuitively, this second option actually produces smaller files when gzipped in production. I've run some numbers:
Using HashedModuleIdsPlugin:
bundle | non-gzipped | gzipped |
---|---|---|
main.bundle.js | 934kb | 293kb |
common.bundle.js | 314kb | 97.2kb |
vue_merge_request_widget.bundle.js | 96.2kb | 22.1kb |
Using NamedModulesPlugin:
bundle | non-gzipped | gzipped |
---|---|---|
main.bundle.js | 951kb | 288kb |
common.bundle.js | 335kb | 96.7kb |
vue_merge_request_widget.bundle.js | 105kb | 22kb |
Since we always use gzip in production (and everyone else should be too), it seems we should go for the option that produces the smaller bundle sizes post-gzip.