【效果显著】vue-cli3 vue 首屏加载速度优化 gzip压缩资源

加速效果在 5-100倍
诸君先过目下效果图

1. 安装webpack插件compression-webpack-plugin

   npm install --save-dev compression-webpack-plugin
   

2. 在vue.config.js中如下配置

   const CompressionWebpackPlugin = require('compression-webpack-plugin')
   const productionGzipExtensions = ['js', 'css']
   module.exports = {
   ...
   configureWebpack:{
   	plugins: [
   		new CompressionWebpackPlugin({
   	        filename: '[path].gz[query]',   // 目标资源名称。
   	        algorithm: 'gzip', // 可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
   	        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),  // 所有匹配该正则的资源都会被处理。默认值是全部资源。
   	        // threshold: 10240,  // 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0
   	        minRatio: 0.8 // 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
   	      })
   	]
   }
   ...
   }
   

3. nginx配置如下即可

   server {
       listen       8081;
       server_name  localhost;
   
       location / {
           gzip_static on;
           root /usr/share/nginx/html;
           index index.html index.htm;
           try_files $uri $uri/ /index.html;
       }
   }
   

   因为我们在前端打包时就产生了 gzip文件,所以nginx只需开启gzip_static.这个配置项的意思是:当nginx发现文件的同目录下存在gzip格式的同名文件时,优先读取gzip格式文件数据发送至客户端.

   若不使用前端打包产生gzip的话, nginx可以通过gzip:on的方式开启服务端在线压缩.也就是说当文件同目录下不存在gzip同名文件时,nginx会把文件在线压缩并发送至客户端