切換語言為:簡體
生產環境開啟要10s以上不要急,分包splitChunks,大檔案分小檔案

生產環境開啟要10s以上不要急,分包splitChunks,大檔案分小檔案

  • 爱糖宝
  • 2024-09-24
  • 2054
  • 0
  • 0

一、前言

今天像往常一樣,開開心心的打程式碼程式設計。

前端部署之後,訪問頁面,空白?

我相信這種場景很多同胞都有遇到過。

於是便有了今天這篇文章,一起來探討一下。

當然,你也可以當做面試題。

二、分析

訪問頁面出現空白:

  • 前端程式碼邏輯語法有問題,如xx.bb,當xx為空,則報錯導致下面不執行。

  • 某個檔案載入很慢,後面的資源一直在等他。

排查之後,在nginx配置了攔截超過5m的檔案,而前端chunk.js卻是7M。

直接把檔案攔截了,檔案沒載入,自然空白頁面。

聰明的你,很快就想到了把nginx攔截設定大點不就可以了嗎?

生產環境開啟要10s以上不要急,分包splitChunks,大檔案分小檔案

但你想一下,或許也知道,為什麼後端要設定這麼大,應該有他的道理。

行,這個問題,由牛逼的前端來解決。

沒辦法,誰讓公司離開了前端就轉不起來了呢。

前端的chunk.js嘗試一下分若干個js檔案載入。

在vue.config.js

configureWebpack: (config) => {
  config.optimization.splitChunks =  {
      chunks: 'all',
      maxSize: 1000000, // 設定拆分的檔案大小閾值,單位是位元組,1M
    }
}

值得注意的是:

  1. 調整 maxSize:將 maxSize 設定為 1MB 可能導致頻繁拆分檔案,生成大量小檔案。考慮調整為 200KB 或 500KB,以保持檔案適中。

  2. 最佳化網路請求:檔案分割可能增加網路請求次數。檢查伺服器響應時間和網路狀況,確保請求不會導致顯著延遲。

  3. 改進檔案快取策略:實施有效的快取策略,使瀏覽器在後續載入時能夠從快取中快速獲取檔案,減少網路請求時間。

  4. 考慮檔案合併:若使用多個小檔案,可以調整 splitChunks 的相關選項,或使用 webpack-bundle-analyzer 工具分析並最佳化打包結果。

  5. 利用 CDN 和快取:使用 CDN 可以顯著加快靜態資源的載入速度,確保靜態資源正確快取和分發,以提升訪問效率。

我們來看看打包出來的檔案。

生產環境開啟要10s以上不要急,分包splitChunks,大檔案分小檔案

訪問頁面的時候,基本不會因為大檔案而卡住了。

如果某個js卡住了頁面,嘗試使用async非同步載入。

三、productionSourceMap

專案(內網)中一直有開map方便除錯,本來想嘗試一下把map檔案禁止輸出,是不是會載入頁面快一點。

productionSourceMap: false

MAP 檔案(Source Map 檔案)用於將編譯後的程式碼對映回原始原始碼,主要為除錯提供便利,幫助開發者輕鬆查詢和修復程式碼錯誤。

雖然禁止輸出或從生產環境中移除 MAP 檔案可以減少額外的檔案載入,但對頁面載入速度的影響通常微乎其微。瀏覽器在正常執行時並不使用這些檔案,主要在開發和除錯過程中發揮作用。

生產環境開啟要10s以上不要急,分包splitChunks,大檔案分小檔案

移除 MAP 檔案有助於減少伺服器儲存需求,並降低安全風險(防止使用者檢視原始碼),但對頁面載入速度的提升效果不顯著。如果載入速度是首要關注點,最佳化程式碼、壓縮資源和實施有效的快取策略可能更為有效。

至此撒花~

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.