当前位置: 首页 > news >正文

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



http://www.mrgr.cn/news/93435.html

相关文章:

  • java中小型公司面试预习资料(一):基础篇
  • “深入浅出”系列之Linux篇:(13)socket编程实战+TCP粘包解决方案
  • 数据可视化大屏产品设计方案(附Axure源文件预览)
  • DeepSeek私有化部署5:openEuler 24.03-LTS-SP1安装docker
  • 每日一题----------枚举的注意事项和细节
  • Windows编译环境搭建(MSYS2\MinGW\cmake)
  • “深入浅出”系列之Linux篇:(10)基于C++实现分布式网络通信RPC框架
  • nodejs使用WebSocket实现聊天效果
  • 阿里云MaxCompute面试题汇总及参考答案
  • Linux基本操作指令1
  • zsh+Oh My Zsh+Powerlevel10k:打造简洁高效的终端环境
  • 为AI聊天工具添加一个知识系统 之138 设计重审 之2 文章学 引言之2 附加符号学附属诠释学附随工程学(联系)
  • 【芯片设计】处理器芯片大厂前端设计工程师面试记录·20250307
  • Spring实战spring-ai运行
  • 7. 机器人记录数据集(具身智能机器人套件)
  • IDEA 2024.1.7 Java EE 无框架配置servlet
  • 【芯片设计】AI芯片前端设计工程师面试记录·20250303
  • 解锁最新专业版005,内置序列免安装!
  • SELECT ... FOR UPDATE 加锁后,其他线程能读取数据吗
  • 自然邻居搜索算法(NaN-Searching)