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

博客搬家 ✌

@TOC

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 来举例）

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

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

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

//文件路径 build --> webpack.base.conf.js

module.exports = {
     externals: { //externals 里的库不会被webpack打包
   	    echarts: 'echarts',
     },   
}

在需要使用依赖的地方 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

安装compression-webpack-plugin
```
 npm i compression-webpack-plugin@1.1.12 --save-dev
```
注意这里的版本 @1.1.12 如果不加版本号在 npm run build 时会报错因为compression最新版本跟webpack版本不匹配

配置 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多体验一下就上来了