目录

nuxt2-打包优化使用compression-webpack-plugin插件

JAY.LIN 收录于 Nuxt

2025-03-06 约 320 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=146073157

目录

nuxt2 打包优化使用“compression-webpack-plugin”插件

在使用 Nuxt.js 构建项目时，为了提高性能，通常会考虑对静态资源进行压缩。 compression-webpack-plugin 是一个常用的 Webpack 插件，用于在生产环境中对文件进行 Gzip 压缩。这对于减少网络传输时间和提高页面加载速度非常有帮助。下面是如何在 Nuxt.js 项目中配置 compression-webpack-plugin 的步骤：

1. 安装 `compression-webpack-plugin`

首先，你需要安装 compression-webpack-plugin 。在你的项目根目录下打开终端，运行以下命令：

npm install –save-dev

2. 配置 `compression-webpack-plugin`

接下来，你需要在 Nuxt.js 的配置文件 uxt.config.js 中配置 compression-webpack-plugin， 添加或修改 build 配置部分：

//nuxt.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
 build: {
    extend(config, { isDev, isClient }) {
      if (!isDev && isClient) {
        config.plugins.push(
          new CompressionWebpackPlugin({
            filename: '[path].gz', 
            algorithm: 'gzip',
            test: /(js|css|html|svg)$/,  // 匹配文件名
            threshold: 10240, // 对超过10kb的数据进行压缩
            minRatio: 0.8,
            deleteOriginalAssets: false, // 是否删除原文件
          })
        )
      }
    },
  }
}

3.部署上线实际效果

![](https://i-blog.csdnimg.cn/direct/2f1eb17f74904e6abe76c34a7aef1bf6.png)