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 compression-webpack-plugin@4.0.1

2. 配置 compression-webpack-plugin

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

//nuxt.config.jsconst 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.部署上线实际效果