Vite 異步 Chunk 加載優化


在實際項目中,Rollup 通常會生成 “共用” chunk —— 被兩個或以上的其他 chunk 共享的 chunk。與動態導入相結合,會很容易出現下面這種場景:

image

在無優化的情境下,當異步 chunk A 被導入時,瀏覽器將必須請求和解析 A,然后它才能弄清楚它首先需要那個共用 chunk C。這會導致額外的網絡往返:

Entry ---> A ---> C

Vite 將使用一個預加載步驟自動重寫代碼,來分割動態導入調用,因而當 A 被請求時,C 也將 同時 被獲取到:

Entry ---> (A + C)

C 也可能有更深的導入,在未優化的場景中,這甚至會導致額外網絡往返。Vite 的優化會跟蹤所有的直接導入,無論導入的深度如何,都能夠完全消除不必要的往返。

參考資料:https://cn.vitejs.dev/guide/features.html#async-chunk-loading-optimization


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM