[Feature] Slow for webpack-dev-server when recompile

[fengerzh]

• I'd be willing to implement this feature (contributing guide)
• This feature is important to have in this repository; a contrib plugin wouldn't do

Describe the user story

For pnp mode, everything works fine, but when running React project with yarn start, a webpack-dev-server running, if change even one line of code, it will begin to compile again, and it will take about 30 seconds to finish. If I switch to node_modules mode, it only take about 1 second.

Describe the solution you'd like

I read issues with yarn run performance of #1817 and #973, both seems not similiar to my issue. In my situation, yarn run start speed is acceptable, it will take about 30 seconds even with node-modules mode. The problem is for recompiling, even change one line of code, webpack-dev-server will begin to recompile, this will take about 1 second in node-modules mode, but will take 30 seconds in pnp mode, I hope to know why the difference is so big, what exactly causing the problem.

Describe the drawbacks of your solution

Seems I have no solution yet.

Describe alternatives you've considered

Seems no alternatives, the only solution is not only optimize the yarn run performance, but also consider recompiling performance when webpack-dev-server running.

[noahnu]

Webpack treats each "virtual" as its own module, so a project with a lot of PNP virtuals will be slower than a node_modules project with no virtuals. I have a webpack feature request here: webpack/webpack#13813

[larixer]

@noahnu node_modules has virtuals too, they take the form of duplicate copies of the same version of the package inside node_modules, not all copies are due to peer dependencies, but some of them - for sure. What is the difference in Webpack bundle size between pnp and nm, do you have repro to look at?

[fengerzh]

@larixer For my project, the bundle size are almost same, there is no big difference from pnp and nm.

[larixer]

@fengerzh It means the problem inside webpack is related to non-optimal pnp tree traversal and not related to virtuals at all.

[larixer]

@noahnu I think you should open different issue, because @fengerzh have no problems with bundle size, it means your issue is different.

[arcanis]

Might also be related to webpack/webpack#12483 (comment)?

[fengerzh]

I found there are lots of require at the head of webpackDevServer.config.js and webpack.config.js like this:

const fs = require('fs');
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
const ignoredFiles = require('react-dev-utils/ignoredFiles');
const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
const paths = require('./paths');
const getHttpsConfig = require('./getHttpsConfig');

Do I need to wrap these require as this?

const {createRequire} = require(`module`);

// We'll be able to inspect the dependencies of the module passed as first argument
const targetModule = process.argv[2];

const targetRequire = createRequire(targetModule);

const resolved = targetRequire.resolve(`eslint`);
const instance = targetRequire(resolved); // <-- still important