Next.js 是如何運作的

什麼是程式碼拆分？

開發者通常會把應用程式拆分成數個頁面，可以透過網址來取得這些頁面資訊。每個頁面成了該應用程式唯一的進入點（entry point）。

程式碼拆分意即將應用程式的模組拆分成進入點需要的更小的組塊（chunks）的完整過程。目的是藉由載入某個頁面時才載入該頁面的程式碼來改善應用程式初次載入頁面的所花費的時間。

Next.js 有內建支援程式碼拆分功能。每個存放於 pages/ 資料夾內的檔案，在打包（build）階段時會自動地將程式碼拆分成數個 JavaScript 模組。

更深入探討：

• 任何在頁面之間共享的程式碼也會被拆分成另一個模組來避免當使用路由導航時的重複載入同樣程式碼的問題。
• 在頁面初次載入之後，Next.js 就會開始預載入使用者可能會前往的其他頁面的程式碼。
• 動態引入（Dynamic imports）是另一個手動針對載入的程式碼進行拆分的方法。