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

相关推荐
ghfdgbg13 小时前
12. AOP(记录日志)
前端
我命由我1234513 小时前
微信小程序 - 页面返回并传递数据(使用事件通道、操作页面栈)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
一水鉴天13 小时前
整体设计 定稿 备忘录仪表盘方案 之1 初稿之8 V5版本的主程序 之2: 自动化导航 + 定制化服务 + 个性化智能体(豆包助手)
前端·人工智能·架构
vortex513 小时前
【Web开发】从WSGI到Servlet再到Spring Boot
前端·spring boot·servlet
于谦13 小时前
git提交信息也能自动格式化了?committier快速体验
前端·javascript·代码规范
小高00713 小时前
React 避坑指南:彻底搞定不必要的重新渲染
前端·javascript·react.js
浩浩酱13 小时前
【TS】any的问题及与unknown的区别
前端·typescript
San30.13 小时前
从原型链到“圣杯模式”:JavaScript 继承方案的演进与终极解法
开发语言·javascript·原型模式
dagouaofei13 小时前
手术室护理年终PPT怎么做?
前端·python·html·powerpoint
技术爬爬虾13 小时前
为什么React的漏洞能攻破服务器?Next.js与RSC入门基础
前端·数据库·安全