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