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

相关推荐
irises1 分钟前
从零实现2D绘图引擎:4.矩形与文本的实现
前端·数据可视化
前端_逍遥生1 分钟前
Vue 2 vs React 18 深度对比指南
前端·vue.js·react.js
irises2 分钟前
从零实现2D绘图引擎:2.Storage和Painter的实现
前端·数据可视化
juma90022 分钟前
最近在搞PCS储能双向变流器的Simulink仿真时踩了不少坑,尤其是功率控制环的配合调试简直让人头秃。咱们直接打开仿真模型,先从系统架构开始盘
javascript
irises5 分钟前
从零实现2D绘图引擎:3.交互系统(Handle)的实现
前端·数据可视化
feiyangqingyun8 分钟前
Qt/C++地图最简示例/在线离线切换/地图视图切换/执行各种js函数交互
javascript·c++·qt
irises10 分钟前
从零实现2D绘图引擎:1.实现数学工具库与基础图形类
前端·数据可视化
葡萄城技术团队10 分钟前
SpreadJS 自定义函数实战指南:从入门到避坑
前端
m0_7400437318 分钟前
v-bind 和 v-model 的核心区别
前端·javascript·vue.js
集成显卡20 分钟前
AI取名大师 | 使得 uni-app 兼容 vue3 同名简写语法糖的 vite 插件
javascript·vue.js