feat: Improve webpack-dev-server performance #15158
Conversation
|
Thanks for taking the time to open a PR!
|
|
Test summary
Run details
View run in Cypress Dashboard ➡️ This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard |
| import { merge } from 'webpack-merge' | ||
| import defaultWebpackConfig from './webpack.config' | ||
| import LazyCompilePlugin from 'lazy-compile-webpack-plugin' |
There was a problem hiding this comment.
This is the one: https://github.com/liximomo/lazy-compile-webpack-plugin ?
I'm surprised more people are not using this 🤔 seems not well known
| @@ -17,7 +19,7 @@ const webpackConfig = { | |||
| { | |||
| test: /\.(js|jsx|mjs|ts|tsx)$/, | |||
| loader: 'babel-loader', | |||
| options: babelConfig, | |||
| options: { ...babelConfig, cacheDirectory: path.resolve(__dirname, '..', '..', '.babel-cache') }, | |||
There was a problem hiding this comment.
What is this? Is this just to speed up CI?
There was a problem hiding this comment.
And show users how to optimize theirs.
| case 4: | ||
| return { plugins: [new LazyCompilePlugin()] } | ||
| case 5: | ||
| return { experiments: { lazyCompilation: true } } as webpack.Configuration |
There was a problem hiding this comment.
Right - so webpack 5 has lazy built in, but webpack 4 you need the plugin?
There was a problem hiding this comment.
I think this should be clear from the code <3
Happy that my code is readable :D
| @@ -17,7 +19,7 @@ const webpackConfig = { | |||
| { | |||
| test: /\.(js|jsx|mjs|ts|tsx)$/, | |||
| loader: 'babel-loader', | |||
| options: babelConfig, | |||
| options: { ...babelConfig, cacheDirectory: path.resolve(__dirname, '..', '..', '.babel-cache') }, | |||
There was a problem hiding this comment.
And show users how to optimize theirs.
|
There is also a small UI defect – because compilation happens on the flight (if it takes more than a second user seeing a blink to the white screen). Screen.Recording.2021-02-22.at.11.42.28.mov |
Before:
After:
So the timings, after all, are much better – this is for the initial request when we bundling the heaviest spec of @cypress/react (mui autocomplete).