一、前言
今天像往常一樣，開開心心的打程式碼程式設計。
前端部署之後，訪問頁面，空白？
我相信這種場景很多同胞都有遇到過。
於是便有了今天這篇文章，一起來探討一下。
當然，你也可以當做面試題。
二、分析
訪問頁面出現空白：
前端程式碼邏輯語法有問題，如xx.bb，當xx為空，則報錯導致下面不執行。
某個檔案載入很慢，後面的資源一直在等他。
排查之後，在nginx配置了攔截超過5m的檔案，而前端chunk.js卻是7M。
直接把檔案攔截了，檔案沒載入，自然空白頁面。
聰明的你，很快就想到了把nginx攔截設定大點不就可以了嗎？
但你想一下，或許也知道，為什麼後端要設定這麼大，應該有他的道理。
行，這個問題，由牛逼的前端來解決。
沒辦法，誰讓公司離開了前端就轉不起來了呢。
前端的chunk.js嘗試一下分若干個js檔案載入。
在vue.config.js
configureWebpack: (config) => {
config.optimization.splitChunks = {
chunks: 'all',
maxSize: 1000000, // 設定拆分的檔案大小閾值，單位是位元組，1M
}
}
值得注意的是：
調整 maxSize：將 maxSize 設定為 1MB 可能導致頻繁拆分檔案，生成大量小檔案。考慮調整為 200KB 或 500KB，以保持檔案適中。
最佳化網路請求：檔案分割可能增加網路請求次數。檢查伺服器響應時間和網路狀況，確保請求不會導致顯著延遲。
改進檔案快取策略：實施有效的快取策略，使瀏覽器在後續載入時能夠從快取中快速獲取檔案，減少網路請求時間。
考慮檔案合併：若使用多個小檔案，可以調整 splitChunks 的相關選項，或使用 webpack-bundle-analyzer 工具分析並最佳化打包結果。
利用 CDN 和快取：使用 CDN 可以顯著加快靜態資源的載入速度，確保靜態資源正確快取和分發，以提升訪問效率。
我們來看看打包出來的檔案。
訪問頁面的時候，基本不會因為大檔案而卡住了。
如果某個js卡住了頁面，嘗試使用async非同步載入。
三、productionSourceMap
專案（內網）中一直有開map方便除錯，本來想嘗試一下把map檔案禁止輸出，是不是會載入頁面快一點。
productionSourceMap: false
MAP 檔案（Source Map 檔案）用於將編譯後的程式碼對映回原始原始碼，主要為除錯提供便利，幫助開發者輕鬆查詢和修復程式碼錯誤。
雖然禁止輸出或從生產環境中移除 MAP 檔案可以減少額外的檔案載入，但對頁面載入速度的影響通常微乎其微。瀏覽器在正常執行時並不使用這些檔案，主要在開發和除錯過程中發揮作用。
移除 MAP 檔案有助於減少伺服器儲存需求，並降低安全風險（防止使用者檢視原始碼），但對頁面載入速度的提升效果不顯著。如果載入速度是首要關注點，最佳化程式碼、壓縮資源和實施有效的快取策略可能更為有效。
至此撒花~
