【NEXT.JS 系列】NEXT.JS 是如何運作的 5 – 關於程式碼拆分

Home 教學 【NEXT.JS 系列】NEXT.JS 是如何運作的 5 – 關於程式碼拆分
【NEXT.JS 系列】NEXT.JS 是如何運作的 5 – 關於程式碼拆分
Next.js

程式碼拆分(Code Splitting)是什麼?

開發人員通常將他們的應用程式拆分為多個頁面,這些頁面可以從不同的 URL 訪問。 這些頁面中的每一個都成為應用程序的唯一入口

程式碼拆分是將應用程式的捆綁包拆分為每個入口所需的較小塊的過程。 目標是通過僅加載運行該頁面所需的程式碼來改進應用程式的初始載入時間。

Next.js 內建支援程式碼拆分, pages/ 目錄中的每個文件都將在建構步驟中自動將程式碼拆分為自己的 JavaScript 捆綁包。

不僅如此:

  • 頁面之間共享的任何程式碼也會被拆分到另一個捆綁包中,以避免在後續的導航時重新下載相同的程式碼。
  • 在初始頁面加載後,Next.js 可以開始預先加載用戶可能導航到的其他頁面的程式碼。
  • 動態導入是另一種手動拆分最初加載的程式碼的方法。

接著,我們將於下一節認識什麼是建構時間(Build time)、運行時間(Runtime)

相關文章