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

相关推荐
老朋友此林几秒前
React Hook原理速通笔记1(useEffect 原理、使用踩坑、渲染周期、依赖项)
javascript·笔记·react.js
克里斯蒂亚诺更新1 分钟前
vue3使用pinia替代vuex举例
前端·javascript·vue.js
Benny的老巢11 分钟前
用 Playwright 启动指定 Chrome 账号的本地浏览器, 复用原账号下的cookie信息
前端·chrome
冰暮流星17 分钟前
javascript赋值运算符
开发语言·javascript·ecmascript
2501_9418053123 分钟前
从微服务网关到统一安全治理的互联网工程语法实践与多语言探索
前端·python·算法
寧笙(Lycode)24 分钟前
前端包管理工具——npm、yarn、pnpm详解
前端·npm·node.js
小夏卷编程26 分钟前
vue2 实现数字滚动特效
前端·vue.js
文心快码BaiduComate27 分钟前
嫌市面上的刷题App太丑,我让Comate帮我写了个“考证神器”
前端·产品
harrain30 分钟前
html里引入使用svg的方法
前端·svg
遗憾随她而去.43 分钟前
Webpack5 基础篇(二)
前端·webpack·node.js