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]\.";