The compilation of vue large single-page projects is very slow during development. Is there any way to improve the compilation efficiency? HMR enabled

VUE+webpack+element-ui single page background management project;

The number of

pages is about 200 ;

the number of interfaces is 800mm;

introduce a variety of third-party plug-ins, including swiper, echart, lodash, quill-edit, qiniu-js, mock, etc.

changes to code in the development process of the project will trigger page refresh (hot update), which is extremely slow, and the compilation time is more than 30s

.

clipboard.png

later, using HMR (hot replacement) can not solve the problem; the specific situation is: save code in the editor > wait for the HMR response on the page > no action on the page for more than 30 seconds > accept update data from HMR > hot replace.

ask the boss if there is any way to optimize this problem?

waiting

Mar.30,2021

HappyPack + DllPlugin


1. There are more than 200 pages that should have something in common, or methods, that can be reduced by mixing (mixins) or components.
2. Third-party modules should not be introduced in main.js unless necessary, but where they are needed. For components that need to be used multiple times, it is recommended to indicate them in vender.js.
3. Do not know if you use front-end routing, if so, it is recommended that you use lazy loading to register the template instead of directly assigning values.
that's all I can think of for the time being, and I'll think of something else later.


https://zhuanlan.zhihu.com/p/.


thirty seconds is a little scary. Hope to provide details such as: version number, configuration and so on!

I guess you may have set hot inline and other configurations in devServer . and use webpack.HotModuleReplacementPlugin ()

you can remove HotModuleReplacementPlugin , which should be much faster. For more information, please see ide/hot-reload.html-sharp%E7%8A%B6%E6%80%81%E4%BF%9D%E7%95%99%E8%A7%84%E5%88%99" rel=" nofollow noreferrer "> vue-loader Hot overload


1. Code split
2. Routing introduces
3 on demand. Sub-module packaging
4.js is introduced into the code to reduce timers
5. Use watch less deep:true to compare performance


you can consider other directions for optimization
1. Put the code on the solid state disk
2. Upgrade cpu memory

Menu