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

相关推荐
程序人生88812 分钟前
几百张固定位置扫描件如何离线批量清?DocConverter Web 批量去水印链路
前端
deli00713 分钟前
一个汉字三种编码:UTF-8、GBK、UTF-16 逐字节对比实测
前端
庖丁解牛22 分钟前
第二课:把代码保存成网页 + 认识变量 (2)
前端
代码猎人22 分钟前
怎么开发一个Vue3项目
前端
梦里寻码23 分钟前
从 0 到 1 用 NestJS + LangChain 搭一套可售卖的 SaaS AI 客服:挂件一行代码接入,知识库秒变 SEO 帮助中心
前端·后端·github
爱喝水的小周24 分钟前
实验十一 Vuex 实现王者荣耀后台比赛管理系统
前端·css·html
三十而立洋25 分钟前
前端模块化的演进:从全局变量到 Import Maps
前端·javascript·前端工程化
橘猫走江湖26 分钟前
浮动塌陷复现失败:父元素为什么一直不塌
前端·css
小凯在掘金27 分钟前
一文搞懂 Map、Set、WeakMap、WeakSet
javascript·面试
用户17335980753727 分钟前
纯前端 PDF 按书签拆分避坑指南:拆分后章节对不上?
前端·javascript·vue.js