#vue #vue-cli #vue-cli 3 #productionGzip

最近没事升级项目到 vue-cli3.0， 发现没有了 productionGzip 配置，于是查了一下午资料， 解决方案如下：

1.安装如下插件

1
npm i -D compression-webpack-plugin

2.在文件 vue.config.js 里导入 compression-webpack-plugin，并添加压缩文件类型

1
const CompressionWebpackPlugin = require("compression-webpack-plugin");
2
const productionGzipExtensions = ["js", "css"];

3.在 configureWebpack 里配置如下代码
a.简单方式

1
configureWebpack: {
2
     plugins: [
3
         new CompressionWebpackPlugin({
4
             asset: '[path].gz[query]',
5
             algorithm: 'gzip',
6
             test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
7
             threshold: 10240,
8
             minRatio: 0.8
9
         })
10
     ]
11
 },

b.高级方式

1
configureWebpack: config => {
2
    if (process.env.NODE_ENV === 'production') {
3
        // 生产环境
4
        config.plugins.push(
5
            new CompressionWebpackPlugin({
6
                asset: '[path].gz[query]',
7
                algorithm: 'gzip',
8
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
9
                threshold: 10240,
10
                minRatio: 0.8
11
            })
12
        );
13
14
    } else {
15
        // 开发环境
16
17
    }
18
},

//配置参数详解

asset： 目标资源名称。 [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 “[path].gz[query]”。

algorithm： 可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 “gzip”。

test： 所有匹配该正则的资源都会被处理。默认值是全部资源。

threshold： 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。

minRatio： 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。

4.然后运行 npm run build 完成

5.附完整 vue.config.js 配置代码

1
const path = require("path");
2
function resolve(dir) {
3
  return path.join(__dirname, dir);
4
}
5
// 导入compression-webpack-plugin
6
const CompressionWebpackPlugin = require("compression-webpack-plugin");
7
// 定义压缩文件类型
8
const productionGzipExtensions = ["js", "css"];
9
10
module.exports = {
11
  baseUrl: "/",
12
  // 输出目录
13
  outputDir: "dist",
14
  lintOnSave: true,
15
  // 是否为生产环境构建生成 source map？
16
  productionSourceMap: false,
17
  // alias 配置
18
  chainWebpack: config => {
19
    config.resolve.alias.set("@", resolve("src"));
20
  },
21
  // 简单的方式
22
  // configureWebpack: {
23
  //     plugins: [
24
  //         new CompressionWebpackPlugin({
25
  //             asset: '[path].gz[query]',
26
  //             algorithm: 'gzip',
27
  //             test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
28
  //             threshold: 10240,
29
  //             minRatio: 0.8
30
  //         })
31
  //     ]
32
  // },
33
  // 高级的方式
34
  configureWebpack: config => {
35
    if (process.env.NODE_ENV === "production") {
36
      // 生产环境
37
      config.plugins.push(
38
        new CompressionWebpackPlugin({
39
          asset: "[path].gz[query]",
40
          algorithm: "gzip",
41
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
42
          threshold: 10240,
43
          minRatio: 0.8
44
        })
45
      );
46
    } else {
47
      // 开发环境
48
    }
49
  },
50
  // CSS 相关选项
51
  css: {
52
    extract: true,
53
    // 是否开启 CSS source map？
54
    sourceMap: false,
55
    // 为预处理器的 loader 传递自定义选项。比如传递给
56
    // sass-loader 时，使用 `{ sass: { ... } }`。
57
    loaderOptions: {}, // 为所有的 CSS 及其预处理文件开启 CSS Modules。
58
59
    modules: false
60
  },
61
  // 在多核机器下会默认开启。
62
  parallel: require("os").cpus().length > 1,
63
  // PWA 插件的选项。
64
  pwa: {},
65
  // 配置 webpack-dev-server 行为。
66
  devServer: {
67
    open: process.env.NODE_ENV === "development",
68
    host: "localhost",
69
    port: 8888,
70
    https: true,
71
    hotOnly: false,
72
    open: true,
73
    proxy: "", // string | Object
74
    before: app => {}
75
  },
76
  // 第三方插件的选项
77
  pluginOptions: {}
78
};
#vue #vue-cli #vue-cli 3 #productionGzip