Attempt #3: upgrade to Webpack v5#22580
Conversation
7888cba to
51207dc
Compare
eb0bfbc to
f850186
Compare
eseliger
left a comment
There was a problem hiding this comment.
Tried it locally, the performance gains are just awesome. Thanks for finally getting this ready!
Two minor things:
- I think live reload is way slower, do we know why hot reload isn't working anymore? Do we know if we can get it fixed before the merge?
- The log output from webpack contains quite a few stats, that are usually not super important when iterating on something and cause lots of log spam, can we teach webpack to be a bit quieter, especially in watch mode?
|
Oh and the prod build in CI takes twice as long as before, is this expected? |
| !message.text().includes('Download the Apollo DevTools') && | ||
| !message.text().includes('debug') && |
There was a problem hiding this comment.
This logic will be redundant after the migration to production builds for integration tests.
See a separate issue about it: https://github.com/sourcegraph/sourcegraph/issues/22831
| // It's not possible to use `WebpackDevServer.Configuration` here yet, because | ||
| // type definitions for the `webpack-dev-server` are not updated to match v4. | ||
| const developmentServerConfig = { |
There was a problem hiding this comment.
Created an issue to come back to this later: https://github.com/sourcegraph/sourcegraph/issues/22832
| 'suggest', | ||
| ], | ||
| }), | ||
| new webpack.IgnorePlugin(/\.flow$/, /.*/), |
There was a problem hiding this comment.
This plugin doesn't make any difference to the output bundle but contributes ~5s to the build time. Tested with production build via bundle analyzer.
eseliger
left a comment
There was a problem hiding this comment.
Awesome work. Super happy with the massive performance improvements we get here! Also: big 👍 on the PR description, it answered all my questions!
Tried it out locally and works great, LGTM!
Could we get back timing information in sg start? I liked having some insight into the recompile timing and to see when recompilation starts. Currently it feels a bit black box-y.
vovakulikov
left a comment
There was a problem hiding this comment.
This works super nicely. With reach-hot-reload, we had a problem with @reach UI components. If you debug some popup element or any other element that works with reach UI React context then after hot reload update that just stops working. (I understood that because react context doesn't work really well with hot reload updates) And I had to update the page manually each time that happened.
With fast refresh that isn't a problem anymore. This works perfectly, thanks @valerybugakov
Context
I was looking into DLL Plugin integration into the web app and, because of some Webpack bug, tried out Webpack 5 first.
Here we are.
This work is based on existing PRs: https://github.com/sourcegraph/sourcegraph/pull/14597 and https://github.com/sourcegraph/sourcegraph/pull/21061. Thanks, @felixfbecker, and @eseliger for looking into this upgrade.
Hopefully, we can nail it this time.
To debug the out-of-memory issue, I've upgraded each package at a time individually per commit.
Good news: all checks are green!
Changes
4.0.0-beta.3React Fast Refresh
React hot loader, that we currently use, is deprecated, and it didn't work out of the box with Webpack 5 upgrade. Because hot-reload is essential for the frontend development experience, this PR includes migration to the react-refresh-webpack-plugin. It was impossible to split this work into separate PRs because Webpack 5 and react-refresh-plugin depend on each other's latest versions.
Here's a couple of great resources to read about fast-refresh. Also, the plugin contains an important doc about limitations which we should be aware of to write fast-refreshable React code.
Pinned Webpack 5
A small explainer on why it's needed:
@types/webpack, which results in type conflicts.We're not pinning a specific version of the Webpack, so it should be ok till the issues above are solved by maintainers. Leave a comment if you have a better solution in mind.
Stats
Approximate timings based on local testing of the hot start commands — development mode + cache is already in place.
Web app production bundle:
Known issues
1. Hot-reload doesn't work—instead,— migration to react-refresh-webpack-plugin solved this issue.webpack-dev-serverfallbacks to live-reload.