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