使用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,可以识别这类文件。

相关推荐
晚霞的不甘33 分钟前
Flutter for OpenHarmony 进阶实战:打造 60FPS 流畅的物理切水果游戏
javascript·flutter·游戏·云原生·正则表达式
雨季66635 分钟前
构建 OpenHarmony 文本高亮关键词标记器:用纯字符串操作实现智能标注
开发语言·javascript·flutter·ui·ecmascript·dart
你这个代码我看不懂41 分钟前
Vue子父组件.sync
javascript·vue.js·ecmascript
灰灰勇闯IT1 小时前
Flutter for OpenHarmony:布局组件实战指南
前端·javascript·flutter
⑩-1 小时前
Vue框架学习
前端·vue.js·学习
a程序小傲1 小时前
京东Java面试被问:基于Gossip协议的最终一致性实现和收敛时间
java·开发语言·前端·数据库·python·面试·状态模式
小二·1 小时前
Python Web 开发进阶实战:AI 原生应用商店 —— 在 Flask + Vue 中构建模型即服务(MaaS)与智能体分发平台
前端·人工智能·python
Devlive 开源社区1 小时前
技术日报|推理RAG文档索引PageIndex登顶日增1374星,React视频工具Remotion二连冠进前二
前端·react.js·前端框架
xkxnq1 小时前
第三阶段:Vue 路由与状态管理(第 45 天)(路由与状态管理实战:开发一个带登录权限的单页应用)
前端·javascript·vue.js
编程大师哥1 小时前
JavaScript 和 Python 哪个更适合初学者?
开发语言·javascript·python