前端限定打包文件数目

开发者 · 2024-9-13 09:53:25

媒介：

之前有过这样的项目履历：我们写的步调是前端打包给后端，后端再打包成jar包上传到甲方的云市场，利用就在云市场里点击应用打开。

其时甲方云市场做了一次升级，但是没有给我们这边说，直到背面整个体系不能用了，然后给我们反馈了：“你们体系进入页面的时间哀求了太多静态资源，导致我们体系直接认定是网络攻击，直接挂掉了”。然后我就去看了一下，前端项目标打包文件，其中js文件和css文件最多，为了性能，对高出10kb的文件还举行了压缩，前端静态资源差不多就在五百个左右。

一样寻常来说思量到加载文件过大，会打包成多个js或css文件来加载，按甲方的意思就不须要思量到文件加载题目了，先把静态资源文件过多题目办理了。
如果是Webpack搭建的项目，直接看webpack官网，LimitChunkCountPlugin插件的maxChunks、minChunkSize这两个设置。官方对于这个模块的表明是：在编写代码时，您大概已经添加了许多代码拆分点来按需加载内容。编译后您大概会注意到某些块太小会产生更大的 HTTP 开销。LimitChunkCountPlugin可以通过归并它们来对你的块举行后处理惩罚

我利用的vue-cli3搭建的项目，在vue.config.js写设置，vue-cli是支持直接利用webpack。现在vue-cli现已处于维护模式，如今官方保举利用来Vite创建项目。
const webpack = require('webpack') chainWebpack: (config) => { config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin, [{ maxChunks: 5, // 必须大于或等于 1，此处设置文件数目 minChunkSize: 100 // webpack官网意思是归并小于设置数目巨细文件，如果产生的文件巨细小于设置值，那么直接和其他的文件归并，现在该设置没有产生结果 }]) },Vue.config.js里这么设置了之后，再打包的结果如下，再重新摆设之后，服务没题目了，题目办理。

前端限定打包文件数目

所属分类: 问答交流

新帖推荐: 30日

推荐作品