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

相关推荐
猜测79 小时前
新语法在旧设备上的问题
前端·javascript·node.js
Liangwei Lin10 小时前
LeetCode 155. 最小栈
java·javascript·算法
前端若水10 小时前
实战:纯 CSS 实现“有图片的卡片不同样式”
前端·css
爱喝水的鱼丶10 小时前
SAP-ABAP:SAP 与 ABAP 关联逻辑与入门路径:业务×开发的协作指南
服务器·前端·数据库·学习·sap·abap
小陈的进阶之路11 小时前
Python系列课(2)——判断
java·前端·python
2301_8156453811 小时前
html.
前端·html
qq_3813385011 小时前
CSS @layer 级联层实战指南:从样式冲突到分层架构
前端·css
广州华水科技11 小时前
深度测评2026年好用的单北斗GNSS变形监测系统推荐,提升GNSS位移监测精度,引领智能监控新风尚
前端
花归去11 小时前
vue3中 function getText(){} 、 const getText=()=>{} ;区别在哪里,优缺点
javascript·vue.js·ecmascript