Localization optimization process based on VUE-CLI project packing slow

After a week, the last front end of the left (Super Pit dad), leaving a tricky problem, is based on the VUE-CLI project package super slow, I took over the project, Packaging needs 45min (the last person did not know why), after 3 months, As the project continues to iterate, the packaging time has soared to 2.5 hours . In order to solve this problem, previously did not do this aspect of optimization, in conjunction with some of the online optimization blog, The following optimization of the road has been opened.

One, suspected VUE-CLI packaging configuration file has been modified ( no )

　　Based on this suspicion, use VUE-CLI to re-build the environment.

　　Step one: Vue init webpack project name.

Step two: The previous code step by step porting to the new development environment, during the discovery of the previous code a lot of code that does not conform to the Eslint rules, need a step-by-step modification, Super silent.

Step three: NPM run build--report, found that the packaging time is still not down, or 2.5 hours, tears rushed. Packaging analysis such as.

Step four: This suspicion can be skipped.

Second, after the first step, found that some packaging files are very large, such as the element UI does not load on demand, citydata.js, etc. are very large, it is doubtful whether the problem caused by long packaging time ( no )

Step one: Load the element UI component on demand, and refer to the article I wrote earlier. Transmission Door

　　Step Two: View the contents of the citydata.js, found that some provinces and cities of the data, the pre-data are through this file to obtain provincial and municipal data, and later changed to get through the background, the last person left to forget the code commented out

Step three:npm Run build--report, found that the packaging time is still not down, or 2.5 hours, tears rushed. Packaging analysis such as. The size of the package is small, a little bit of optimization ...

Step four: This suspicion can be removed.

Third, the combination of online optimization methods, the following optimization methods, the effect is not bad. ( no )

　　Mode 1: Do not generate a. map file, modify the Productionsourcemap property value in the Config/index.js file to False

Mode 2:resolve.alias Configure path aliases

Mode 3:babel-loader optimize, exclude node_modules module, get src directory accurately, and turn on cache

　　Mode 4: Use Webpack-parallel-uglify-plugin multithreaded compression JS

Method 5: Use Happypack multi-process for loader processing

The above 5 methods can be referred to the post for configuration, portal

Four, the use of Dllplugin and dllreferenceplugin treatment, the effect is obvious, from the original 2.5 hours into 3 minutes ( the method is feasible )

This is a reference to the blog, no longer repeat it. Portal

Five, after the completion of the fourth step, thought that the optimization has been completed, ready to work, suddenly thought of the project router in the development environment when the lazy loading, in the packaging of the production package when using lazy loading, will not be the problem caused?

So the lazy loading of the Router/index.js file has been rewritten, both in the development environment and in the production environment using lazy loading mode.

The original way to load the route:

　

　　_import_development.js files: When you are developing locally, you do not use lazy loading, but instead use common.js to introduce them directly, so that the hot load is done quickly.

_import_production.js file:

　　After modification, the _import_development.js and _import_production.js files are not used, but are directly used directly in the router/index.js () = Import (' @/components/ xxx ') to route lazy loading.

At the time of repackaging, we found that it was only about 1 minutes to complete the packaging task, but the local development, the time of the hot load from the original 5s into 22s. Pit Daddy, pound foolish ah.

Vi. Conclusion

Discard the original route loading mode, using the fifth step of the route lazy loading method can only be combined with the second, third, and fourth steps for packaging optimization, which will also speed up the packaging speed and reduce packaging volume.

Localization optimization process based on VUE-CLI project packing slow