现在用vue的项目越来越多，随着项目逐渐变大，我们能够明显感觉到项目加载反应慢的问题，优化前：在项目优化之前，由于项目越来越大 反应速度很慢，有时候还出现假死现象，这已经到了不能容忍的地步了现在记录一下我在用vue项目的过程中做的性能优化
性能优化我主要是从两个方面入手
一个是配置方面的优化，我们知道vue-cli依托于webpack，所以这块你要对webpack有一定的了解
第二个是对代码的优化 这里重点讲一下通过配置方面的优化提升项目性能
1路由的懒加载 具体的做法网上有很多这里不做太多的赘述
2第三方包的cdn引入，这个做了之后效果很明显 方法同样 网上很多 也很简单 ，通过引入第三方包，你会发现你打的包会小很多 加载速度也有明显的提升 简单说了两个地方 一个build webpack.base,cofig.js里面
打包的时候不让第三方包打入
在mian.js里面这些就不用再import 导入了 在你项目index.html里面通过cdn 用script 标签引入就可以了
3使用vue 的keep-alive 利用页面缓存 方法也很简单 在app.vue里面通过路由配置的meta里面的属性判断那些页面需要缓存那些不需要缓存就可以了
像这样
4 利用webpack 的 DllPlugin 插件 抽离第三方库的包 然后通过script 引入 方法网上很多
5所用的库尽量不要全局引入，可以按需加载
6使用异步组件 将应用分割多个小模块 按需从服务器下载
7 就是服务端开启gzip压缩
8配置webpack 对自已js文件css img文件进行压缩 在config index.js里面修改配置
false改成true
如果打包时候报错Compression Plugin Invalid Options options should NOT have additional proper 可能是因为你的compression-webpack-plugin版本问题 我将版本由原来的2.0.0改成1.1.11 再跑就可以了
大概就是这些了 如果你做到了以上几点你的项目应该会比之前运行的快很多
网友评论