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

相关推荐
2501_94819534几秒前
RN for OpenHarmony英雄联盟助手App实战:符文配置实现
javascript·react native·react.js
小目标一个亿7 分钟前
Windows平台Nginx配置web账号密码验证
linux·前端·nginx
rocky19112 分钟前
网页版时钟
前端·javascript·html
Aotman_21 分钟前
Element-UI Message Box弹窗 使用$confirm方法自定义模版内容,修改默认样式
linux·运维·前端
计算机程序设计小李同学26 分钟前
基于SSM框架的动画制作及分享网站设计
java·前端·后端·学习·ssm
一只小阿乐1 小时前
vue-web端实现图片懒加载的方
前端·javascript·vue.js
牛马1111 小时前
Flutter 多语言
前端·flutter
by————组态1 小时前
集成详细说明
前端·物联网·信息可视化·组态·组态软件
2501_944521002 小时前
rn_for_openharmony商城项目app实战-商品评价实现
javascript·数据库·react native·react.js·ecmascript·harmonyos
我是小疯子662 小时前
jQuery快速入门指南
前端