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

相关推荐
search713 小时前
前端设计:CRG 2--CDC检查
前端·芯片设计
松涛和鸣13 小时前
DAY33 Linux Thread Synchronization and Mutual Exclusion
linux·运维·服务器·前端·数据结构·哈希算法
逛逛GitHub13 小时前
我把公众号文章导入了腾讯 ima,可以对话找开源项目了。
前端·github
Можно13 小时前
深入理解 JavaScript 函数:分类、特性与实战应用
开发语言·javascript
lionliu051913 小时前
JavaScript 变量声明最佳实践
前端·javascript·vue.js
源去_云走13 小时前
自建 Iconfy API 服务:解决国内访问不稳定问题
前端·容器·npm·node.js
AAA阿giao13 小时前
从零开始学 React:用搭积木的方式构建你的第一个网页!
前端·javascript·学习·react.js·前端框架·vite·jsx
遇到困难睡大觉哈哈13 小时前
Harmony OS Web 组件:如何在新窗口中打开网页(实战分享)
前端·华为·harmonyos
你脸上有BUG14 小时前
【工程化】前端打包时间优化
前端
TeleostNaCl14 小时前
Google Chrome 浏览器历史记录的存储位置
前端·chrome·经验分享