vue项目优化实践记录

最近做的一个vue项目，首屏加载实在是慢的厉害，就给它做了个优化，特此记录一下自己的成长。 由于这个项目是ant-design-vue-pro做的框架，直接使用，所以会有很多的不必要的引入，会导致打包完之后vendor.js特别大，从而导致首屏加载的速度变慢。所以总结一下vue项目的优化以及首屏加载速度的优化。 一、编码阶段： 1、尽量减少data中的数据，data中的数据会增加getter和setter，会收集对应的watcher 2、v-if和v-for不能连用，且为item添加唯一值key，方便精准找到该条列表数据； 3、在使用v-for给每项元素绑定事件时，使用事件代理； 4、SPA使用keep-alive缓存组件； 5、路由懒加载异步加载组件； 6、第三方模块按需导入； 7、长列表分页加载或滚动到可视区加载； 8、图片懒加载； 9、computed和watch区分使用场景： computed计算属性的值是有缓存的，只有他依赖的属性值发生变化时才会重新计算computed的值 watch类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作； 10、服务端渲染ssr或者预渲染。 二、webpack层面的优化 1、分析打包后的哪些文件比较大，找出原因，然后压缩。使用webpack-bundle-analyzer插件帮助分析文件，它会生成一个HTML页面来帮助查看分析文件。

首先安装插件，`yarn add webpack-bundle-analyzer -save-dev` 在vue.config.js中引入配置， const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

配置

configureWebpack: { // webpack plugins plugins: [ new BundleAnalyzerPlugin({ analyzerPort: 9999, openAnalyzer: false }), ]， //analyzerPort:9999 配置打开的HTML的端口号，端口号被占用时使用。默认为8888 //openAnalyzer：false 配置是否自动打开html页面，默认为true }

2、echarts按需加载： 引入插件babel-plugin-equire，配合实现echarts按需加载。 下载插件

yarn add babel-plugin-equire -D

在.babel.config.js中配置

plugins.push(["equire"]);

创建echarts.js 文件，用来按需引入echarts；

// eslint-disable-next-line const echarts = equire([ // 写上你需要的 "bar", "legend", "graphic", "title", "color", "tooltip", "line", "pie" ]); export default echarts;

3、配置打包压缩文件插件，将文件打包成gizp文件。 下载compression-webpack-plugin插件 yarn add compression-webpack-plugin --save-dev vue.config.js里配置

const CompressionWebpackPlugin = require("compression-webpack-plugin"); const productionGzipExtensions = ["js", "css"]; ... 其他配置 ... plugins: [ new CompressionWebpackPlugin({ algorithm: "gzip", test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), threshold: 10240, minRatio: 0.8 }) ],

在nginx中配置是否解析gzip文件：

http { //在 http中配置如下代码， gzip on; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 8; #压缩级别 gzip_buffers 16 8k; #gzip_http_version 1.1; gzip_min_length 100; #不压缩临界值 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; }

经过一番折腾，项目加载从刚开始5s左右，目前只需2s。 有用的知识又增加了！哈哈