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

相关推荐
openKaka_13 小时前
从 scheduleUpdateOnFiber 到 Root 微任务调度:React 如何把更新交给调度系统
开发语言·前端·javascript
CoovallyAIHub13 小时前
铁路环境障碍物检测新框架:YOLOv11+MiDaS+LiDAR 深度融合,距离估计MAE低至0.63米
前端
C澒13 小时前
AI CR:前端团队代码审查规范及高频坑汇总
前端·ai·code review
盏灯13 小时前
以前有一个同事说:最讨厌下班提需求又没电脑在身边...
前端·后端·面试
LIO13 小时前
一文读懂 Vue 3:核心特性、组合式 API 与最佳实践
前端·vue.js
LIO13 小时前
前端响应式通用 CSS(Flex 为主,含主色调)
前端·css
前进的李工13 小时前
智能Agent实战指南:记忆组件嵌入技巧(记忆)
开发语言·前端·javascript·python·langchain·agent
西洼工作室13 小时前
B站登录流程全解析:RSA+极验验证
前端·python·极验
十有八七14 小时前
AI Agent的“骨架”之争:四种Harness设计哲学深度解构
前端·人工智能
卡次卡次114 小时前
14.2:详细补充:子进程会复制什么
前端·python·php