前端限制打包文件数量

前言：

        之前有过这样的项目经历：我们写的程序是前端打包给后端，后端再打包成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里这么配置了之后，再打包的效果如下，再重新部署之后，服务没问题了，问题解决。