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

相关推荐
来恩100316 小时前
EL表达式应用
前端·javascript·vue.js
希冀12316 小时前
【CSS学习第十篇】
前端·css
小飞侠是个胖子17 小时前
在 WebGL 中构建高性能 3D 沉浸式系统的三套高阶方案
前端·3d
wh_xia_jun17 小时前
Vue3 + Vitest 浏览器测试 从零开发指南
前端·javascript·vue.js
FlyWIHTSKY17 小时前
区块链前端技术栈介绍
前端·区块链
唐青枫17 小时前
别再让 key 写成字符串:TypeScript keyof 从入门到实战
前端·javascript·typescript
一点一木1 天前
深度体验TRAE SOLO移动端7天:作为独立开发者,我把工作流揣进了兜里
前端·人工智能·trae
天外飞雨道沧桑1 天前
TypeScript 中 omit 和 record 用法
前端·javascript·typescript
Lee川1 天前
mini-cursor 揭秘:从 Tool 定义到 Agent 循环的完整实现
前端·人工智能·后端
canonical_entropy1 天前
从 Spec-Driven Development 到 Attractor-Guided Engineering
前端·aigc·ai编程