前言：
之前有過這樣的項目經(jīng)歷：我們寫的程序是前端打包給后端，后端再打包成jar包上傳到甲方的云市場，使用就在云市場里點(diǎn)擊應(yīng)用打開。
當(dāng)時甲方云市場做了一次升級，但是沒有給我們這邊說曲管，直到后面整個系統(tǒng)不能用了，然后給我們反饋了：“你們系統(tǒng)進(jìn)入頁面的時候請求了太多靜態(tài)資源硕糊，導(dǎo)致我們系統(tǒng)直接認(rèn)定是網(wǎng)絡(luò)攻擊院水，直接掛掉了”。然后我就去看了一下简十，前端項目的打包文件檬某，其中js文件和css文件最多，為了性能螟蝙，對超過10kb的文件還進(jìn)行了壓縮恢恼，前端靜態(tài)資源差不多就在五百個左右。
一般來說考慮到加載文件過大胰默，會打包成多個js或css文件來加載场斑，按甲方的意思就不需要考慮到文件加載問題了，先把靜態(tài)資源文件過多問題解決了牵署。
如果是Webpack搭建的項目漏隐，直接看webpack官網(wǎng)，LimitChunkCountPlugin插件的maxChunks奴迅、minChunkSize這兩個配置青责。官方對于這個模塊的解釋是：在編寫代碼時，您可能已經(jīng)添加了許多代碼拆分點(diǎn)來按需加載內(nèi)容取具。編譯后您可能會注意到某些塊太小會產(chǎn)生更大的 HTTP 開銷脖隶。LimitChunkCountPlugin可以通過合并它們來對你的塊進(jìn)行后處理
我使用的vue-cli3搭建的項目，在vue.config.js寫配置者填，vue-cli是支持直接使用webpack浩村。目前vue-cli現(xiàn)已處于維護(hù)模式做葵，現(xiàn)在官方推薦使用來Vite創(chuàng)建項目占哟。
const webpack = require('webpack')
chainWebpack: (config) => {
config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin, [{
maxChunks: 5, // 必須大于或等于 1，此處設(shè)置文件數(shù)量
minChunkSize: 100 // webpack官網(wǎng)意思是合并小于設(shè)置數(shù)量大小文件，如果產(chǎn)生的文件大小小于設(shè)置值榨乎，那么直接和其他的文件合并怎燥，目前該配置沒有產(chǎn)生效果
}])
},
Vue.config.js里這么配置了之后，再打包的效果如下蜜暑，再重新部署之后铐姚，服務(wù)沒問題了，問題解決肛捍。
