vue项目打包开启Gzip

0.1. 为什么开启GZIP?

在你的项目使用了Vue的路由懒加载、Vue使用CDN引用项目组件，减少项目体积 后，还是觉得项目加载速度慢，效果不尽如人意的时候，还有一个“瘦身项目”可以完成，那就是利用nginx和webpack来使用gzip压缩功能。

0.2. 下载插件

下载安装插件 compression-webpack-plugin

Vue压缩功能的实现主要依赖于webpack的一个插件compression-webpack-plugin ，这个插件可以将npm run build之后的.js .css文件，打包成.js.gz .css.gz文件,可以自行配置打包哪些。

首先需要安装compression-webpack-plugin依赖

npm i compression-webpack-plugin

0.3. 配置vue.config.js

const { defineConfig } = require('@vue/cli-service')
// 开启Gzip
const CompressionWebpackPlugin = require('compression-webpack-plugin');

// console.log( process.env.NODE_ENV)
module.exports = defineConfig({
  transpileDependencies: true,
  productionSourceMap:false,
  publicPath:process.env.NODE_ENV == 'development' ? './' : '/',
  devServer:{
    client:{
      overlay:false
    }
  },
  configureWebpack:{
    optimization: {
      /**
       * runtimeChunk可选值有：true或'multiple'或'single'
       * true或'multiple'会有每个入口对应的chunk。不过一般情况下
       * 考虑到要模块初始化，设置为single就够多数情况下使用啦。
       * 详情见官网：https://webpack.docschina.org/configuration/optimization/#optimizationruntimechunk
       * */
      runtimeChunk: 'single',
      /**
       * 以前是CommonsChunkPlugin，现在换成optimization.splitChunks。普通项目下方的配置就足够用啦
       * 详情见官网：https://webpack.docschina.org/configuration/optimization/#optimizationsplitchunks
       * */
      splitChunks: {
        chunks: 'all', // 可选值：all，async 和 initial。all功能最强大，所以咱们就使用all
        maxInitialRequests: Infinity, // 最大并行请求数，为了以防万一，设置无穷大即可
        minSize: 1685000, // 引入的模块大于20kb才做代码分割，官方默认20000，这里不用修改了
        maxSize: 2046000, // 若引入的模块大于60kb，则告诉webpack尝试再进行拆分
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
            priority: -10, // 优先级值越大优先级越高，默认-10，不用修改
            name(module) { // 设定分包以后的文件模块名字，按照包名字替换拼接一下
              const packageNameMatch = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/);
              const packageName = packageNameMatch ? packageNameMatch[1] : '';
              return `npm.${packageName.replace('@', '')}`;
            },
          },
        },
      }
    },
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: /\.(js|css)$/,
        threshold: 10240,
        minRatio: 0.4
      })
    ]
  },
})

需要注意的是 plugins中filename: '[path][base].gz'字段是版本6(可能)以上使用配置，如果你下载的插件版本为5.****则应该使用的配置为 filename: '[path].gz[query]' 如果打包报错 Conflict: Multiple assets emit different content to the same filename assets/js/.gz则可以尝试更改配置或者降低(升级)插件版本。

0.4. 服务器端配置

上一步操作完成之后执行打包之后会在打包生成目录看到.gz打包的文件

css文件夹如上

此时前端配置打包工作完成,部署时候以Nginx举例 需要开启Nginx的GZIP

在Nginx的server块配置如下

 # 手动开启的GZIP
    gzip on;
    gzip_buffers 32 4K;
    gzip_comp_level 6;
    gzip_min_length 100;
    gzip_types application/javascript text/css text/xml text/javascript;
    gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
    gzip_vary on;

0.5. 查看是否配置成功

打开部署之后的网站，打开开发者工具,查看当前请求的网络资源 查看响应标头中的Content-Encoding字段是否为 gzip 如果是则打开成功!