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。
有用的知识又增加了！哈哈