Vue老项目性能优化

Vue老项目性能优化

1. webpack版本的升级

webpack 升级到4.x，性能可以提升60%

2. Vue-cli的升级

Vue-cli升级到3.0 性能可以提升30%左右

3. dll的运用

dllPlugin将vue, vuex, vue-route 等打入 vue-bucket.dll.js 内， 然后用DllReferencePlugin在webpack.base.conf.js 中声明。 结果vue依然被webpack打包进到vendor.js中。

4. webpack关闭预加载， 可以提升性能

当项目的文件多起来之后预加载就会使项目变慢

5. 使用按需加载来引入相应的组件可以减少好多不必要的文件的引入

6. 不常用的文件打包成js文件通过路由懒加载去加载

7. 路由的懒加载的使用

通过以上这些修改项目的性能至少可以加快90%以上