vue-cli使用gz

先下载依赖

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

$ npm install @gfx/zopfli --save-dev

vue.config.js中进行配置

const CompressionPlugin = require("compression-webpack-plugin");
const zopfli = require('@gfx/zopfli');

module.exports = {
	configureWebpack:() => {
	    if (process.env.NODE_ENV === 'production') {
	      return {
	        plugins: [
	          new CompressionPlugin({
	            compressionOptions: {
	              numiterations: 15,
	            },
	            algorithm(input, compressionOptions, callback) {
	              return zopfli.gzip(input, compressionOptions, callback);
	            },
	          }),
	        ],
	      
	      }
	    }    
    }
}

全部配置

const ipConfig = require('./src/ipConfig.js')
const {ip} = ipConfig
const CompressionPlugin = require("compression-webpack-plugin");
const zopfli = require('@gfx/zopfli');
const cdn = {
    css: [
    //   "./cdn/css/vant.css",
    //   "./cdn/css/nprogress.css",
      "//unpkg.com/element-ui@2.13.1/lib/theme-chalk/index.css",
      "//unpkg.com/nprogress@0.2.0/nprogress.css"
    ],
    js: [
        "//unpkg.com/vue@2.6.11/dist/vue.min.js",
        "//unpkg.com/vue-router@3.2.0/dist/vue-router.min.js",
        "//unpkg.com/vuex@3.4.0/dist/vuex.min.js",
        "//unpkg.com/element-ui@2.13.1/lib/index.js",
        "//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js",
        "//unpkg.com/nprogress@0.2.0/nprogress.js",
        "//cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.0/clipboard.js",
        "./cdn/js/riddler-sdk-0.2.2.js"
    ]
  }
  

module.exports = {
    publicPath: './',
    productionSourceMap:false,
    lintOnSave: false,
 
    devServer: {
        hot: true,
        open: true,
        port:8483,
        proxy: ip  
       
    },

   
    configureWebpack:() => {

    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            compressionOptions: {
              numiterations: 15,
            },
            algorithm(input, compressionOptions, callback) {
              return zopfli.gzip(input, compressionOptions, callback);
            },
          }),
        ],
      
        externals: {
          vue: "Vue",
          "element-ui": "ELEMENT",
          "vue-router": "VueRouter",
          vuex: "Vuex",
          axios: "axios",
          clipboard:"clipboard"
        }
      }
    }

    return {
      externals: {
        vue: "Vue",
        "element-ui": "ELEMENT",
        "vue-router": "VueRouter",
        vuex: "Vuex",
        axios: "axios",
        clipboard:"clipboard"
      }
    }
        
    },
    pages: {
        index: {
          entry: 'src/main.js',
          template: 'public/index.html',
          filename: 'index.html',
          title: 'tixonEx',
          chunks: ['chunk-vendors', 'chunk-common', 'index'],
          cdn: cdn
        }
    }
    
}