vue中配置打包压缩

笔记背景

由于服务器带宽问题,线上项目加载缓慢,前端配合优化打包文件,需要配置成gzip

首先在项目中安装需要的依赖包

npm i CompressionPlugin@6.1.1  
npm i webpack@4.47.1
//注意自己的项目兼容版本
//可以通过 npm list 指令查看是否有依赖包不兼容,根据提示或百度修改
//下面是依赖包全部兼容的截图,如果出现错误会显示出来并标红

第二步在vue.config.js中配置文件

const CompressionPlugin = require("compression-webpack-plugin");
const webpack = require("webpack");
module.exports = {
    ...//其他配置
    configureWebpack: {
        plugins: [
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
            // 下面两项配置才是 compression-webpack-plugin 压缩配置
            // 压缩成 .gz 文件
            new CompressionPlugin({
                filename: "[path][base].gz",
                algorithm: "gzip",
                test: /\.js$|\.css$|\.html$/,
                threshold: 10240,
                minRatio: 0.8,
            }),
        ],
    },
    ...//其他配置
}