**目錄** - 程式碼分割 - React的懶載入 - import() 原理 - React.lazy 原理 - Suspense 原理 - 參考
**1.程式碼分割** （1）為什麼要進行程式碼分割？ 現在前端專案基本都採用打包技術，比如 Webpack，JS邏輯程式碼打包後會產生一個 bundle.js 檔案，而隨著我們引用的第三方庫越來越多或業務邏輯程式碼越來越複雜，相應打包好的 bundle.js 檔案體積就會越來越大，因為需要先請求載入資源之後，才會渲染頁面，這就會嚴重影響到頁面的首屏載入。 而為了解決這樣的問題，避免大體積的程式碼包，我們則可以通過技術手段對程式碼包進行分割，能夠建立多個包並在執行時動態地載入。現在像 Webpack、 Browserify等打包器都支援程式碼分割技術。
（2）什麼時候應該考慮進行程式碼分割？ 這裡舉一個平時開發中可能會遇到的場景，比如某個體積相對比較大的第三方庫或外掛（比如JS版的PDF預覽庫）只在單頁應用（SPA）的某一個不是首頁的頁面使用了，這種情況就可以考慮程式碼分割，增加首屏的載入速度。
**2.React的懶載入** 示例程式碼： ```jsx import React, { Suspense } from 'react'; const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( }>