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

news2025/3/8 15:57:48

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

1. 安装 `compression-webpack-plugin`

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

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

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, // 是否删除原文件
          })
        )
      }
    },
  }
}