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

相关推荐
凉城a几秒前
前端预检请求是什么?
前端·面试
划雨悦潭之赋1 分钟前
pnpm+turbo迅速搭建monorepo工程
前端·javascript·前端框架·reactjs
qq_342218122 分钟前
echarts 横向渐变格子柱状图 三层
前端·javascript·echarts
烛衔溟4 分钟前
TypeScript 基础类型(上):string、number、boolean 与类型注解
javascript·typescript·前端开发·类型注解
亿元程序员4 分钟前
小伙伴说我的绳子要是有纹理就完美了,我就笑了...
前端
gaolei_eit5 分钟前
解锁Vue3构建新维度:Vite生产环境深度优化实战指南
前端
向上的车轮5 分钟前
TypeScript 一日速通指南:TypeScript可以做全栈开发吗?
前端·javascript·typescript
心.c6 分钟前
从输入 URL 到页面展示的完整过程
前端·javascript·vue.js·js
Mintopia7 分钟前
组件契约文档的标准结构(可复制模板)
前端·架构
一次旅行25 分钟前
飞书接入龙虾后失联解决方法
前端·人工智能·chrome·飞书