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

相关推荐
C_心欲无痕4 分钟前
ts - 模板字面量类型与 `keyof` 的魔法组合:`keyof T & `on${string}`使用
linux·运维·开发语言·前端·ubuntu·typescript
Van_captain5 分钟前
rn_for_openharmony常用组件_Tabs选项卡
javascript·开源·harmonyos
赵民勇7 分钟前
ES6中的const用法详解
javascript·es6
一勺菠萝丶9 分钟前
Java 后端想学 Vue,又想写浏览器插件?
java·前端·vue.js
@PHARAOH14 分钟前
HOW - 如何禁用 localstorage
前端·状态模式
霍理迪14 分钟前
CSS布局方式——弹性盒子(flex)
前端·css
Van_captain24 分钟前
React Native for OpenHarmony Toast 轻提示组件:自动消失的操作反馈
javascript·开源·harmonyos
Van_captain33 分钟前
React Native for OpenHarmony Modal 模态框组件:阻断式交互的设计与实现
javascript·开源·harmonyos
xkxnq33 分钟前
第一阶段:Vue 基础入门(第 14天)
前端·javascript·vue.js
前端小臻33 分钟前
列举react中类组件和函数组件常用到的方法
前端·javascript·react.js