Vue 首屏加载速度优化-这篇就够了

2019/06/22 周六 pm 天气晴 有点小困

记 vue-cli项目首页加载速度慢的有效优化

1.影响加载速度的原因

开始我想把这个锅甩给网速，但我发现一些大商城项目（淘宝，京东），在网速一般的情况下，加载速度依然还是挺快，哎，网速不背这个锅
还是找项目的原因吧，加载时间4.5s

监控首页加载的过程，找到拖后腿的 vendors***.js 这个锅他来背
1.9M 的 js文件下载3.42秒 ，先不说网速，这个js也太TM大了吧

2.分析文件大的原因

利用webpack-bundle-analyzer 分析器，分析项目依赖关系

插件使用：

// 文件路径 build --> webpack.prod.conf.js   
//增加以下配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
...
plugins: [
	...
    new BundleAnalyzerPlugin(),
    ...
]

添加上面代码之后， 运行打包命令 npm run build,打包成功后会自动弹出 127.0.0.1:8888 像下面一样，看到许多小块，每个小块对应每个模块，小块越大文件越大

看到vendor.js了吗？ 这样是不是佷清楚的看到它里面到底都装了什么东西，恍然大悟，对滴， 它装的就是我们项目里应用的依赖

vendor.js 是被 依赖 (第三方库) 充大的 ，所以先检查每个依赖，是否存在引入但没有使用的闲置依赖包

3.项目依赖优化

排除了 闲置依赖包 的存在后，就需要对钢需依赖进行优化

3.1 依赖优化之 CDN 加速

ThinkerK 理解的 CDN加速：将自己的源码跟第三方库代码分离，减小项目体积， 利用别人的服务器去请求第三方库，来减轻自己服务器的压力

针对体积比较大的一些钢需依赖，选择CDN加速的方式（以 echarts 来举例）

1. 在 index.html 文件中CDN引入第三方依赖

   //index.html
   <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
   

2. 配置webpack 来分离 echarts webpack/externals使用详解.

   //文件路径 build --> webpack.base.conf.js
   
   module.exports = {
        externals: { //externals 里的库不会被webpack打包
      	    echarts: 'echarts',
        },   
   }
   

3. 在需要使用依赖的地方 import 进来就可以 ，

再次 npm run build 的时候，echarts 就不会被打包进去， vendor.js的体积就会减小

3.2 依赖优化之 webpack dllplugin

webpack.dll 其实更多是对webpack打包速度的优化，对优化首页加载速度方面效果不是佷明显，所以在这里只提一嘴。 有兴趣的话可以看下 webpack dllplugin的使用

4. gzip暴力压缩

gzip压缩能力很强，压缩力度可达到70%

nginx开启 gzip 模式

server {
        listen       8103;
        server_name  ************;
		# 开启gzip
	    gzip on;
	    # 进行压缩的文件类型。
	   	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;
	    # 是否在http header中添加Vary: Accept-Encoding，建议开启
	    gzip_vary on;
}

vue开启 gzip

1. 安装compression-webpack-plugin

    npm i compression-webpack-plugin@1.1.12 --save-dev
   

   注意这里的版本 @1.1.12 如果不加版本号 在 npm run build 时会报错 因为compression最新版本跟webpack版本不匹配
2. 配置 gzip

   //文件路径  config --> index.js
    build: {
       // Gzip off by default as many popular static hosts such as
      	// Surge or Netlify already gzip all static assets for you.
      	// Before setting to `true`, make sure to:
      	// npm install --save-dev compression-webpack-plugin
      	productionGzip: true,      //之前时false  改为true
      	productionGzipExtensions: ['js', 'css'],
    }
   

配置完后的打包效果

浏览器上可以看到gzip

优化后的效果 比之前快4s多 体验一下就上来了