Talk is cheap, show me the code






The cause of


I set up a set of webpack multi-page application scaffolding in the company, and it was very cool to use it at the beginning, which solved the original intention of using Vue modular development and multi-page packaging online management. However, with the increase of business projects, I found that when NPM run Dev was hot loaded, the response of Webpack was slow.


It’s almost stuck 


94% assets optimization95% emittingCopy the code



This is a long step


Be prepared to pinpoint the cause of the problem. Since the project manually rewrote the HtmlWebpackPlugin plugin based on vue-CLI rewritten multi-page application scaffolding, the basic guess was that it was actually caused by this.


We can add the –profile command to start dev in package.json to see the startup details.





As you can see, the Asset optimization process takes about 2 seconds, sometimes longer, so this is basically where the HMR is stuck.


So the question is, how do we optimize this?




  • Optimization idea -1


    • The first idea is to add parameters or manually change config at dev time to load modules only for the current development project.


Changing the webpack configuration is a straightforward solution, such as configuring the current directory (buildingPage), and judging when new HtmlWEbpackPlugin is launched.





    • The second solution, of course, can also be handwritten webpack-dev-server.


Dev-server is built in the build directory in the old version, which is easy to rewrite, while the new version is loaded in node_modules.





If you want to rewrite it, you need to make a set of this thing by yourself and add parameters for judgment processing. I haven’t had time to try. If someone has time, you can try to improve HMR efficiency.


Practice has proved that the first scheme can indeed improve the HMR speed. However, since the project is jointly developed and maintained by many people, it is very easy for each developer to change his or her own config configuration, resulting in SVN \ Git submission conflict, or forgetting to modify config, so it is not recommended to do this except for personal maintenance projects.


  • Optimization idea -2


In fact, the specific reason for this problem is that after the change to multi-entry, HtmlWebpackPlugin will execute all the code logic in EMIT for each entry file once, which affects the speed.


After looking at some references, I found that there were already existing building wheels that could be used, Is [HTML – webpack – plugin – for – multihtml] (https://github.com/daifee/html-webpack-plugin-for-multihtml)


This plugin ensures that emit fires the entire process only once in the original HTML-webpack-plugin by setting variables in the webpack Done hook function. To speed things up. After the upgrade, the HMR speed was changed from second to millisecond.





You can see that Asset Optimization has been optimized to the millisecond level.





Refer to the article


Webpack multi-page build optimization is not entirely north