vue-cli3.0之配置productionGzip方式

npm i -D compression-webpack-plugin

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

   configureWebpack: {
        plugins: [
            new CompressionWebpackPlugin({
                asset: '[path].gz[query]',   // 提示compression-webpack-plugin@3.0.0的话asset改为filename
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            })
        ]
    },

    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 生产环境
            config.plugins.push(
                new CompressionWebpackPlugin({
                    asset: '[path].gz[query]', // 提示示compression-webpack-plugin@3.0.0的话asset改为filename
                    algorithm: 'gzip',
                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                    threshold: 10240,
                    minRatio: 0.8
                })
            );
        } else {
            // 开发环境
        }
    },

    // 配置参数详解   
    // 提示 compression-webpack-plugin@3.0.0的话asset改为filename
    asset： 目标资源名称。 [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
    algorithm： 可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
    test： 所有匹配该正则的资源都会被处理。默认值是全部资源。
    threshold： 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
    minRatio： 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。

const path = require('path');
function resolve(dir) {
    return path.join(__dirname, dir)
}
// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']
module.exports = {
    baseUrl: "/",
    // 输出目录
    outputDir: 'dist',  
    lintOnSave: true,
    // 是否为生产环境构建生成 source map？
    productionSourceMap: false,
    // alias 配置
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))
    },
    // 简单的方式
    // configureWebpack: {
    //     plugins: [
    //         new CompressionWebpackPlugin({
    //             asset: '[path].gz[query]', // 提示 compression-webpack-plugin@3.0.0的话asset改为filename
    //             algorithm: 'gzip',
    //             test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
    //             threshold: 10240,
    //             minRatio: 0.8
    //         })
    //     ]
    // },
    // 高级的方式
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 生产环境
            config.plugins.push(
                new CompressionWebpackPlugin({
                    asset: '[path].gz[query]',  // 提示 compression-webpack-plugin@3.0.0的话asset改为filename
                    algorithm: 'gzip',
                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                    threshold: 10240,
                    minRatio: 0.8
                })
            );
        } else {
            // 开发环境
        }
    },
    // CSS 相关选项
    css: {
        extract: true,
        // 是否开启 CSS source map？
        sourceMap: false,
        // 为预处理器的 loader 传递自定义选项。比如传递给
        // sass-loader 时，使用 `{ sass: { ... } }`。
        loaderOptions: {}, // 为所有的 CSS 及其预处理文件开启 CSS Modules。
        modules: false
    },
    // 在多核机器下会默认开启。
    parallel: require('os').cpus().length > 1,
    // PWA 插件的选项。   
    pwa: {},
    // 配置 webpack-dev-server 行为。
    devServer: {
        open: process.env.NODE_ENV === "development",
        host: 'localhost',
        port: 8888,
        https: true,
        hotOnly: false,
        open: true,
        proxy: '', // string | Object
        before: app => {}
    },
    // 第三方插件的选项
    pluginOptions: {}
}

    plugins: [
      new CompressionPlugin({
        test:productionGzipExtensions, //匹配文件名
        threshold: 10240,//对超过10k的数据压缩
        deleteOriginalAssets: true //不删除源文件
      })
    ],

nginx.conf
   gzip  on;
	gzip_static on; # 开启静态文件压缩
    gzip_min_length  1k; # 不压缩临界值，大于1K的才压缩
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # #进行压缩的文件类型
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6]\.";