使用GZip对npm run build打包的vendor.js文件进行压缩

vue-cli项目

  1. 安装npm i compression-webpack-plugin -D

    npm i compression-webpack-plugin -D

  2. 使用:在vue.config.js文件中

    const CompressionPlugin = require('compression-webpack-plugin')
    module.exports = {
    configureWebpack: {
    plugins: [
    new CompressionPlugin({
    test: /.js|\.html|.css/,
    threshold: 10240 // 只处理比这个值大的资源。按字节计算 设置的是 10kb
    })
    ]
    }
    }

可以看到1.2M的vendors文件压缩到了295k,网页运行速度得到了提升,3

s内可以打开。

如果样式不识别,那么就不压缩css文件了。这个功能需要后端开启gzip,可以识别这类文件。

相关推荐
叶落阁主11 分钟前
Vue3 后台管理系统全局菜单搜索实战:Cmd/Ctrl + K、权限菜单与拼音过滤
前端·javascript·vue.js
卷帘依旧11 分钟前
setState是同步的还是异步的
前端·面试
卷帘依旧13 分钟前
讲一下useEffect和useLayoutEffect
前端·面试
wuhen_n13 分钟前
AI Agent 入门:从零实现 LangChain 基础智能体
前端·langchain·ai编程
MacroZheng25 分钟前
阿里Qoder + GLM-5.1,夯爆了!
前端·vue.js·人工智能
我是小胡胡34 分钟前
彦火APP-Flutter包体分析
前端
木斯佳1 小时前
前端八股文面经大全:腾讯音乐-前端一面(2026-05-27)·面经深度解析
前端
糖果店的幽灵1 小时前
Claude Code 完全实战指南 - 第四章:Skill 怎么写
java·服务器·前端
light blue bird1 小时前
MES/ERP 工序 BOM 协同场景调度维护组件
前端·信息可视化·桌面端winform·多节点端·gdi图表绘制开发
鱼人1 小时前
Vue 3 组合式 API 最佳实践:如何写出可维护的代码
前端