Upgrade from webpack v1 to v4
Upgrade from webpack v1 to v4
Added webpack
bundle visual reports (courtesy of webpack-bundle-analyzer
)
set WEBPACK_REPORT=1&&npm start
-
router-app
:- Webpack report: 5.77MB -> 452.15MB
-
gitter.im
production: 77KB -> 57.2KB
-
router-chat
:- Webpack report: 6.21MB -> 665.24MB
-
gitter.im
production: 108KB -> 89.2KB
-
vendor
:- Webpack report: 1.22MB -> 1.77MB
-
gitter.im
production: 142KB -> 174KB
Before | After |
---|---|
index.html stats.json |
index.html |
Previous
-
router-app
:- Webpack report: 5.77MB -> 427KB
-
gitter.im
production: 77KB -> 53.4KB
-
router-chat
:- Webpack report: 6.21MB -> 662KB
-
gitter.im
production: 108KB -> 88.6KB
-
vendor
:- Webpack report: 1.22MB -> 2.75MB
-
gitter.im
production: 142KB -> 290KB
Before | After |
---|---|
index.html stats.json |
index.html |
Also upgraded the styleguide to webpack v4: https://gitlab.com/gitlab-org/gitter/styleguide/-/merge_requests/25
Dev notes
npm run gulp -- clientapp:compile:webpack
- MR where GitLab upgraded to webpack v4, https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17218
- https://webpack.js.org/plugins/split-chunks-plugin/
- https://github.com/webpack/webpack/blob/master/examples/many-pages/README.md
Using a function
for webpack splitChunks.cacheGroups.{cacheGroup}.test
optimization: {
runtimeChunk: 'single',
splitChunks: {
maxInitialRequests: 4,
cacheGroups: {
default: false,
vendor: {
name: 'vendor',
chunks: 'all',
// Minimum number of chunks that must share a module before splitting
minChunks: 2,
// `d3` is only used by `@gitterhq/cal-heatmap` so let's put it in the specific archive chunk
test(module, chunks) {
if (module.nameForCondition) {
return /[\\/]node_modules[\\/](?!d3)/.test(module.nameForCondition())
}
}
}
}
}
},
Todo
-
Make sure vendor
chunks work -
Make sure ./utils/webpack
andcommons.js
is still being included- Now part of a
defaults.chunk.js
- Now part of a
-
Make sure it works with production
anddevelopment
modes -
Can we get rid of any polyfills because we are using @babel/preset-env
now? Seecommons.js
- No, Babel covers syntax type stuff vs Browser APIs
-
Use webpack-manifest.json
in the future to for thebootScript
inhbs-helpers.js
andsub-resources.js
- See how GitLab does it
- https://gitlab.com/gitlab-org/gitlab-ce/blob/dd26a9addc5dd654e3c8eecb58216f1f4449cfc1/lib/gitlab/webpack/manifest.rb
- https://gitlab.com/gitlab-org/gitlab-ce/blob/dd26a9addc5dd654e3c8eecb58216f1f4449cfc1/app/helpers/webpack_helper.rb
- https://gitlab.com/gitlab-org/gitlab-ce/blob/327eb9a881871755be3222334856ea883e884276/config/webpack.config.js
- How can we read
webpack-manifest.json
if it isn't persisted to disk in development?
- See how GitLab does it
-
Audit vendor
chunk- Can these modules be more localized to the certain page/chunk they are used in? If something is only used in one chunk, then only put it in that chunk, etc
-
d3
-
lodash
, https://gitlab.com/gitlab-org/gitter/webapp/merge_requests/1336 -
moment.js
- Verify, we are only including certain languages, https://gitlab.com/gitlab-org/gitter/webapp/blob/8025bda1dd268243358955110bdf018a55d79393/public/js/webpack.config.js#L128-131
-
Make sure other webpack configs are working -
public\js\webpack-mobile-native.config.js
- I removed this config because we can combine it with the main config and just copy over the necessary files that we need
-
modules\service-worker\webpack.config.js
-
-
It seems like the bootScript
parameter here should bejsRoot
instead ofroot
to match thehbs-helper
- Verify by building Android/iOS assets and looking at the
output/android/www/mobile/embedded-chat.html
-
root
andjsRoot
are different options.root
is used incdnUrlGenerator
- Verify by building Android/iOS assets and looking at the
Edited by Eric Eastwood