vue 项目配置 webpack compression-webpack-plugin 启用 gzip压缩

105 阅读1分钟

一、命令行安装 compression-webpack-plugin

npm i -D compression-webpack-plugin

二、在 vue.config.js 里面配置 compression-webpack-plugin,如果没有vue.config.js则在项目根目录创建vue.config.js

> "use strict";
> 
> const path = require("path");
>
> const CompressionWebpackPlugin = require("compression-webpack-plugin");
> 
> const productionGzipExtensions = ["js", "css"];
>  
> function resolve(dir) {
>   return path.join(__dirname, dir);
> }
>  
> const name = "品牌联盟";
>  
>  module.exports = 
>  {
>   
>  lintOnSave: process.env.NODE_ENV === "development",
>   
>  configureWebpack: {
>    
>    name: name,
>     
>     resolve: {
>       alias: {
>         "@": resolve("src"),
>         "@i": resolve("src/api"),
>         "@c": resolve("src/components"),
>         "@v": resolve("src/pages"),
>         "@s": resolve("src/static"),
>         "@u": resolve("src/utils")
>       }
>     },
>     plugins: [
>       new CompressionWebpackPlugin({
>         filename: "[path].gz[query]",
>         algorithm: "gzip",
>         test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), //匹配文件名
>         threshold: 10240, //对10K以上的数据进行压缩
>         minRatio: 0.8,
>         deleteOriginalAssets: false //是否删除源文件
>       })
>     ]
>   }
> };
>