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));
}
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
