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

相关推荐
独泪了无痕5 小时前
使用Fetch API 探索前后端数据交互
前端·http·交互设计
css趣多多5 小时前
别名路径的知识点
前端
靓仔建7 小时前
Vue3导入组件出错does not provide an export named ‘user_setting‘ (at index.vue:180:10)
开发语言·前端·typescript
EnoYao7 小时前
我写了一个团队体检报告 Skill,把摸鱼的同事扒出来了😅
前端·javascript
梁正雄8 小时前
Python前端-2-css练习
前端·css·python
清汤饺子8 小时前
用 Cursor 半年了,效率还是没提升?是因为你没用对这 7 个功能
前端·后端·cursor
Never_Satisfied8 小时前
在JavaScript / Node.js中,package.json文件中的依赖项自动选择最新版安装
javascript·node.js·json
蓝莓味的口香糖8 小时前
【vue3】组件的批量全局注册
前端·javascript·vue.js
wefly20178 小时前
开发者效率神器!jsontop.cn一站式工具集,覆盖开发全流程高频需求
前端·后端·python·django·flask·前端开发工具·后端开发工具
独泪了无痕8 小时前
自动导入 AutoImport:告别手动引入依赖,优化Vue3开发体验
前端·vue.js·typescript