vue cli 项目,打包配置压缩.gz

541 阅读34分钟

1.安装插件

npm

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

yarn

yarn add compression-webpack-plugin@6.1.1 --dev

2.vue.config.js

// vue.config.js
let CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
  // 基本路径,相对路径
  publicPath: './',
  outputDir: 'dist',
  productionSourceMap: false,

  // 设置以后可以在手机端进行查看
  devServer: {
    hot: true,
    host: '0.0.0.0',
    port: 8080,
  },

  // 压缩
  configureWebpack: (config) => {
    const plugins = [
      new CompressionWebpackPlugin({
        // 压缩方式
        algorithm: 'gzip',
        // 匹配压缩文件
        test: /\.js$|\.css$/,
        // 对于大于10k压缩
        threshold: 10240,
      }),
    ];
    config.plugins = [...config.plugins, ...plugins];
  },
};

完成以上配置,你的打包压缩也就完成了;如下图