vue 大型单页面项目开发时编译非常慢，有什么手段可以提高编译效率？已开启HMR

Question

VUE+webpack+element-ui单页面后台管理项目；

页面数量在200个左右；

接口数量800+；

引入多种第三方插件包括swiper、echart、lodash、quill-edit、qiniu-js、mock等；

项目在开发过程中对code的修改会触发页面刷新（热更新），异常缓慢，编译时间超过30s

后来使用HMR（热替换），无法解决该问题；具体情况是：在编辑器编辑保存code>页面等待HMR响应>页面无动作三十多秒>接受到HMR的update数据>热替换。

请教大佬有没有什么手段来优化该问题？

Answer 1

应该是用了路由懒加载吧。开发时候去掉就好了

Answer 2

1.页面有200多个，这些页面应该会有一些共同的地方，或者方法之类的东西，可以通过混合（mixins）或者组件等方法减小总体积。2.第三方模块除非必要，不要在main.js里引入，在需要使用的地方来引入。对于需要多次使用的组件，建议在vender.js里注明。3.不知道你有没有使用前端路由，如果有使用前端路由，那么建议你使用懒加载的方式注册模板而不是直接赋值。暂时就想到这么多，想到其他的以后再更。

Answer 3

HappyPack + DllPlugin