vue-cli3压缩打包gzip

1.引入打包工具 

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

2.vue.config.js中编写

const path = require("path");
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css'];
module.exports = {
    productionSourceMap: false,
    devServer: {
        disableHostCheck: true,
    },
    configureWebpack: {
        plugins: [
            new CompressionWebpackPlugin({
                filename: '[path].gzip[query]',   // 提示compression-webpack-plugin@2.0.0的话filename改为asset
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240, //内容超过10KB进行压缩
                minRatio: 0.8
            })
        ],
        // 把webpack的配置写在这里 会自动合并
        // 以下库使用cdn，不会被打包
        externals: {
            // 'ant-design-vue':"https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.11/dist/antd.min.js",
            // 'Vue':'https://cdn.bootcss.com/vue/2.6.11/vue.min.js',
            // 'vue-router':'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js'
            // 'vue':'Vue',
            // 'vue-router':'VueRouter'
        }
    }
};

 打包结果