vue gzip优化页面加载速度

在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装该插件：npm i-D compression-webpack-plugin

//vue.config.js
const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
  publicPath: './',
  assetsDir: 'static',
  productionSourceMap: false,
   configureWebpack: config => {
    return {
      plugins: [new CompressionPlugin({
        test: /\.js$|\.html$|\.css/,
        threshold: 10240,
        deleteOriginalAssets: false
      })]
    }
  }
}

　　执行npm run build就可以看到在dist/static/js文件夹下文件都多了.gz的后缀文件，但是请求时服务器应该返回哪一个文件呢，如果服务器返回了.gz格式的文件就达到效果，如果服务器依然返回请求的源文件，那就达不到我们的目的了。

接下来需要服务器配置，在nginx中启用gzip压缩，代码如下

gzip on;

gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-javascript;

打开页面，在network中可以看到请求的js的size是压缩后的size，并且response headers下有Content-Encoding:gzip即表明gzip压缩成功了