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

相关推荐
拼图2092 分钟前
Vue.js开发基础——数据绑定/响应式数据绑定
前端·javascript·vue.js
刘志辉6 分钟前
vue反向代理配置及宝塔配置
前端·javascript·vue.js
oliveira-time21 分钟前
爬虫学习8
开发语言·javascript·爬虫·python·算法
星叔30 分钟前
ARXML汽车可扩展标记性语言规范讲解
java·前端·汽车
sky.fly1 小时前
HTML5+css3(浮动,浮动的相关属性,float,解决浮动的塌陷问题,clear,overflow,给父亲盒子加高度,伪元素)
前端·css·html
Coisini_甜柚か1 小时前
打字机效果显示
前端·vue3·antv
海绵波波1071 小时前
Webserver(4.5)复用
android·开发语言·javascript
老胡说前端1 小时前
vue3 elemnetPlus table 数据id 相同的合并单元格
javascript·vue.js·elementui
废柴小z1 小时前
从零创建vue+elementui+sass+three.js项目
javascript·vue.js·elementui
郑小憨1 小时前
Node.js NPM以及REPL(交互式解释器) 使用介绍(基础介绍 二)
开发语言·前端·javascript·npm·node.js