Webpack multi-entry hot loading is very slow. - Codes Helper - Programming Question Answer

Webpack multi-entry hot loading is very slow.

The

project is multi-entry (multi-page). Every time you modify the code, the hot load is very slow. The content of the page will not be updated until the frame is 94% asset optimization for about 5 seconds. This should be the problem with webpack.
I found that by reducing the number of pages, hot loading will significantly reduce the time consuming . I suspect that each change will do some checking or processing of all the code, thus increasing the time it takes for the hot load to complete, but after looking for a lot of information, I still can"t find the real reason.
this is dependent version number:

"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
"uglifyjs-webpack-plugin": "^1.1.1",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"hard-source-webpack-plugin": "^0.6.4",
"html-webpack-plugin": "^2.30.1",
"extract-text-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^4.0.1",

corresponding part of the code:

for (var pathname in pages) {
  var conf = {
    filename: pathname + ".html",
    template: pages[pathname],
    inject: true
  };
  
  if (pathname in devWebpackConfig.entry) {
    conf.chunks = ["manifest", "vendors", pathname];
    conf.hash = true;
  }
  
  devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}

Webpack webpack-dev-server vue.js vue-cli hot-loaded

Jun.25,2021

first step:

npm i html-webpack-plugin-for-multihtml --save-dev

step 2:

you need to change the original
const HtmlWebpackPlugin = require ('html-webpack-plugin')
to
const HtmlWebpackPlugin = require ("html-webpack-plugin-for-multihtml")

.

then add the multihtmlCache parameter

plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      filename: 'assets/admin.html',
      // ...
      multihtmlCache: true // 
    })
  ]

in fact, most of the reasons are due to over-reliance on projects, especially third-party dependencies.

reducing the number of pages is equivalent to greatly reducing the number of entries, that is, the number of dependencies, so there will be a significant performance improvement.

in fact, I have done similar processing. It is recommended to add dll plugin, to package various third-party dependencies in advance during the hot loading process, which can significantly improve the construction speed.

At the same time, you can try the webpack watch mode to see which files are packaged for each incremental build, and optimize the project to avoid unnecessary packaging.

when you develop the home page, other unwanted pages do not have to be loaded, which will be much faster

var only = ['home', 'user'] // 
for (var pathname in pages) {
    var conf = {
        filename: pathname + '.html',
        template: pages[pathname],
        inject: true
    };

    if (pathname in devWebpackConfig.entry) {
        conf.chunks = ['manifest', 'vendors', pathname];
        conf.hash = true;
    }
    // 
    if (process.env.NODE_ENV !== 'production') {
        const canLoad = only.some(v => pathname.includes(v))
        if (canLoad) {
            devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
        }
    }
}

you can see my previous configuration https://codeshelper.com/a/11.

.

this is that the BUG, of the html-webpack-plugin plug-in will compile slowly if multiple pages are packaged with multiple html. Some people on gitbub have raised this problem. At present, there seems to be no configuration that can solve the problem of multi-page slow

.

wait for this PR to merge:

https://github.com/jantimon/h.

webpack is not suitable for multi-page projects. Gulp will be faster;

have you solved the problem

you can add some locally developed configuration files. If it is a local development, don't read all the files, just go to the configuration whitelist to generate html

I used webpack4 and then used the latest version of html-webpack-plugin, so the movie is still slow. How do you solve it

Previous: No problem in the local environment, the server reported an error

Next: Tp5.1 framework, opened today can not be accessed, before good, and then the web page does not show the public directory, is the directory permission problem?

Menu