完美解决 vue webpack 单页面 加载慢 gzip 访问 vendor.js 打包文件过大问题

步骤一 vue-cli开启打包压缩 和后台配合 gzip访问

1.首先打开 config/index.js ，找到 build 对象中的 productionGzip ，改成 true

2. 打开 productionGzip: true 之前，先要安装依赖 compression-webpack-plugin ，官方推荐的命令是：

 npm install --save-dev compression-webpack-plugin 
 //(此处有坑) 如果打包报错，应该是版本问题 ，先卸载之前安装的此插件 ，然后安装低版本 
  npm install --save-dev [email protected]

3.等安装好了，重新打包 npm run build ，此时打包的文件会 新增 .gz 文件。是不是比原来的js文件小很多呢，之后项目访问的文件就是这个.gz文件 。

4.后台nginx开启gzip模式访问，浏览器访问项目，自动会找到 .gz 的文件。加载速度明显提高。

• 开启 nginx gzip ,在 nginx.conf 配置文件中 配置

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;
 }

• 保存退出 ，并 重启 nginx

 systemctl reload nginx.service  
 systemctl restart nginx.service

5 测试访问

curl -I -H "Accept-Encoding: gzip, deflate" "http://xxx.com"  //访问请求中 Content-Encoding: gzip 表示 压缩成功页面，

• 同理 访问js，css等 可测试 是否压缩成功.
  
  

6 正式访问项目，此时项目加载速度明显提升

步骤二 webpack来打包vue项目，vendor.js过大问题解决

1.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了vendor.js(我们习惯把第三方库放在vendor里面)造成的.如下图在main.js引用element-ui等第三方库。后果就是你的服务器端的js文件越大则用户加载页面的时间会越长(因为所需下载js的时间越久)

2.解决方案:采用cdn加速去从别的服务器上加载第三方库而非自己的服务器，这样就会快很多.并且能节省自己服务器的带宽。

• 选用unpkg来作为第三方提供 https://unpkg.com 或者 https://www.bootcdn.cn/
• 如我想要axios包则输入网址为 https://unpkg.com/axios/ (末尾加斜杠代表你要查询该库的所有版本列表)
• 在index.html中 将你所需的第三方库的链接加载进来,如下图:
  
• 在webpack.base.conf 中添加 externals 来告诉webpack我们这些第三方库不需要打包 如下图
  
• 在 主文件main.js 或者其他 js 修改引用这些配置的第三方插件 ，如图：
  
  
• 执行npm run build 来验证是否减小了。
• 测试项目 vendor.js 由原来的 600k，减少到 100k