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

相关推荐
天若有情67313 小时前
Dev_Portfolio 个人主页html网页源码分享!!!
前端·html·源码·个人主页
李剑一14 小时前
ant-design-vue 1.x 版本换肤功能开发
前端·vue.js·ant design
京东云开发者14 小时前
【Coding生态】从代码托管到 AI 能力底座:与Coding一起共建 AI 研发生态
前端
guhy fighting15 小时前
x-www-form-urlencoded,form-data,raw 表单请求格式的区别
前端·表单请求格式
李明卫杭州15 小时前
Vue2 与 Vue3 自定义指令详解:钩子变化、迁移指南与实战示例
前端·javascript·vue.js
问商十三载15 小时前
大模型GEO内容更新频率:3个节奏规律提收录权重,零成本提30%引用率附更新计划表
前端·人工智能·机器学习
yingyima15 小时前
sed 命令速查手册:从一次午夜事故说起
前端
七月丶15 小时前
线上出 Bug,你还在让用户"清一下缓存"?我用一个插件让每个请求自报版本
前端·javascript·面试
飘尘15 小时前
让AI能够预演现实的世界模型,到底是什么?
前端·人工智能
不简说15 小时前
JS 代码技巧 vol.3 — 10 个防抖节流深挖,小白到老炮的踩坑路
前端·javascript·面试