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

相关推荐
WaywardOne12 分钟前
iOS复习必看!weak关键字底层原理(Deepseek&豆包)回答整理
前端
工边页字12 分钟前
AI公司面试100%加分的话题:如何做 API成本预算
前端·后端·面试
HelloReader18 分钟前
Qt Quick vs Qt Widgets如何选择适合你的 UI 技术路线(五)
前端
cmd21 分钟前
吃透 ES6 Generator:yield/next/yield* 核心用法详解
前端·javascript
我叫黑大帅22 分钟前
🎯 DOM 事件:onclick VS addEventListener('click')区别
前端·javascript·面试
踩着两条虫25 分钟前
AI 驱动的 Vue3 应用开发平台 深入探究(二十二):CLI与工具链之开发与生产工作流
前端·vue.js·ai编程
Ankkaya28 分钟前
大师助我,electron-hiprint 源码梳理
前端·vue.js
风止何安啊28 分钟前
🪝 别再重复造轮子了!教你偷懒:在 React 自定义 Hook
前端·react.js·面试
踩着两条虫28 分钟前
AI 驱动的 Vue3 应用开发平台 深入探究(二十三):API与参考之Engine API 参考
前端·vue.js·ai编程
Moment29 分钟前
开源一年,我的 AI 全栈项目 AI 协同编辑器终于有 1.1 k star了 😍😍😍
前端·后端·面试