compression-webpack-plugin http压缩之Gzip---vue 历史模式

compression-webpack-plugin配置:https://github.com/webpack-contrib/compression-webpack-plugin
参考webpack :https://www.webpackjs.com/plugins/compression-webpack-plugin/
查看compression-webpack-plugin版本匹配:https://www.npmjs.com/package/compression-webpack-plugin

compression-webpack-plugin非常好用的压缩插件，适用于vue-cli版本2以上
查看安装vue-cli版本

vue -V

productionGzip: 设置为true

  // 在设置为 `true`之前, 确保安装了compression-webpack-plugin开发依赖
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],

安装compression-webpack-plugin开发依赖插件

注意版本(2.xx 对应的是 1.1.11)

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

配置文件

const CompressionWebpackPlugin = require("compression-webpack-plugin");
plugins: [
new CompressionWebpackPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: ["js", "css"],
      threshold: 10240,
      minRatio: 0.8,
    }),
    ]

后台进行配置 方可使用

Request Headers里面的Accept-Encoding: gzip只是表示前端（用户浏览器）支持gzip的压缩方式。

还需要服务器开启gzip支持才可以的，具体可以看Response Headers中的Content-Encoding字段是否为gzip。

而服务器支持gzip的方式可以有两种：
1.打包的时候生成对应的.gz文件，浏览器请求xx.js时，服务器返回对应的xxx.js.gz文件
2.浏览器请求xx.js时，服务器对xx.js进行gzip压缩后传输给浏览器

参考链接:https://zhuanlan.zhihu.com/p/24764131
参考链接:https://zhuanlan.zhihu.com/p/42418273

vue 历史模式 Nginx 配置

location / {
  try_files $uri $uri/ /index.html;
}