### Bundle

在使用 React 時是一定會使用到 Webpack 等等工具來把 JSX、CSS、IMAGES... 等等進行打包。如果你的 APP 已經建立得非常大時，產生的 Bundle 檔案也會非常巨大。使用者在下載時就會花上很多時間了喔 !

### 解決方法

我們可以通過使用 React 內建的 Lazy loading 來解決一次過下載巨大 Bundle 檔案的問題。它的原理是把單一的 Bundle 檔案依不同的 package 來分割開，然後在使用者實際使用時才動態載入。

### 內裏是 Promise

我們有以下的 module ，作用把兩個傳入的數字相加。

```js
// math.js
export default sum(a, b) => a + b;
```

在傳統的使用方法，我們是以下這樣 :

```js
import sum from './math.js';

console.log(sum(1, 2)); // 3
```

使用 Lazy Loading 的話，載入的 object 就會變成了 Promise 物件:

```js
import('./math.js')
	.then(sum => console.log(sum(1, 2))); // 3
```

### 實際使用

在實際使用上，我們可以通過使用 `React.lazy` 方法來簡單化整個載入的流程。

```js
// 載入 SomeComponent
const SomeComponent = React.lazy(() => import('./SomeComponent.jsx'));
```

然可以作為一般的 Component 來使用，但是需要放在 React.Suspense 元件內。

```js
<React.Suspense fallback={<div>Loading...</div>}>
	<SomeComponent />
</React.Suspense>
```

React.Suspense 是處理其子 Component 如果有 Lazy Loading 動作時，就會劃出 fallback 的元件出來，等待 Lazy Load 完成後，就會顯示元件。

### 筆者推介使用方法

因為在 React 內得多元件都可以重用，但是如果有使用 React Router 的話，不同 URL 之間的元件是一定不會重用的，所以我們可以簡單把 React.Suspense 包住整個 Router。然後把不同 Route 內的 Component 都轉成使用 Lazy Load，這樣就已經可以簡單快速地分割出合適的 Bundle 檔案了。

### 官方文件

官方文件 : https://zh-hant.reactjs.org/docs/code-splitting.html