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

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