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

相关推荐
晓说前端2 分钟前
TypeScript 核心语法应用 —— Vue 3 中的使用(上)
前端·typescript
breeze jiang5 分钟前
JavaScript 单例模式:用静态属性保证 Popup 只创建一次
开发语言·javascript·单例模式
No Silver Bullet7 分钟前
Vue进阶(贰幺叁)vue.config.js 中 productionSourceMap 作用详解
前端·javascript·vue.js
xcsweb9 分钟前
从5分钟到10秒:我用一个Skill把团队部署效率提升了30倍
前端·vue.js
用户629605932470528 分钟前
一次位置调整引发的画布失忆:深入 Vue2 虚拟 DOM 复用机制
前端·vue.js
Sterting30 分钟前
条件渲染与列表渲染
前端·vue.js
__sjfzllv___33 分钟前
在职前端Leader学习/转行 AI Agent -DAY28
前端
用户8471810541934 分钟前
LangChain中间件教程及DeepAgents应用
javascript·agent
不爱说话郭德纲34 分钟前
uni-app x iOS 扫码模糊怎么办?AVFoundation 灰尘级别摄像头助你超广角聚焦
前端·uni-app·app
柒和远方35 分钟前
V062:WebGPU 端侧推理与单例模式:从 Transformers.js 把大模型装进浏览器,到 Worker 线程的流式对话
前端