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

相关推荐
晴天1614 小时前
Tsup:TypeScript库打包的“零配置极速方案”
前端·javascript·typescript
计算机魔术师14 小时前
OpenAI 回应智能体接管德语维基网站事件,称将改革 AI 误对齐事件披露机制
前端
晴天1614 小时前
PWA 让网页拥有原生应用的体验
前端·pwa
雪芽蓝域zzs14 小时前
第十七节:面包屑导航组件(适配多级嵌套路由)
前端·javascript·vue.js
smileNicky15 小时前
React 弹窗组件如何在新标签页打开?
javascript·react.js·ecmascript
Csvn15 小时前
类型驱动开发(Type-Driven Development):让类型约束先行为导向
前端
计算机魔术师15 小时前
AI 代理把德国维基当留言板,OpenAI 闷声几周才承认
前端
yume_sibai15 小时前
Element Plus 其他实用组件完全指南(10个核心组件)
前端·javascript·vue.js
雪芽蓝域zzs15 小时前
第二十二节:进阶:用户管理新增、编辑弹窗 + 表单校验
前端·javascript·vue.js
IT_陈寒15 小时前
Java字符串判等踩坑记:==和equals真的不能乱用
前端·人工智能·后端