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

相关推荐
La Pulga9 分钟前
【STM32】FLASH闪存
android·c语言·javascript·stm32·单片机·嵌入式硬件·mcu
荻酷社区16 分钟前
HTML加密工具EXE软件介绍
前端·html·html加密·html代码加密工具
chxii20 分钟前
前后端分离
前端
Nan_Shu_6141 小时前
学习:JavaScript(1)
开发语言·javascript·学习·ecmascript
青衫码上行1 小时前
【Java Web学习 | 第三篇】CSS(2) - 元素显示模式
java·前端·学习
木木子99991 小时前
Next.js, Node.js, JavaScript, TypeScript 的关系
javascript·typescript·node.js
IT_陈寒1 小时前
Redis性能翻倍的5个冷门技巧,90%的开发者都不知道第3个!
前端·人工智能·后端
柑橘乌云_1 小时前
学习记录-package.json的scripts添加参数的方式有那些
前端·学习·node.js·json
清沫1 小时前
规训 AI Agent 实践
前端·ai编程·cursor
明仔的阳光午后2 小时前
React 入门 02:从单页面应用到多页面应用
前端·react.js·前端框架