React Loadable Component Splitting 簡單範例

React使用Loadable Component Splitting簡單範例。

簡介

Loadable Components（簡稱Loadable）為React程式碼打包做Code Splitting的函式庫。

React使用打包工具如Webpack、Browserify打包程式碼時原本是將程式碼及依賴函式庫等打包(bundle)成一大個js檔。當專案的依賴套件很多會讓打包的js檔案非常龐大，瀏覽器載入時必須一次載入全部，造成等待時間變久使用者體驗變差。解決辦法是不要一次打包成一個大js檔，而是打包成多個較小的js檔並在使用者需要時才動態載入必要的js檔，這個做法就叫Code Splitting，是種延遲載入(lazy-loading)的手法。

React本身有React.lazy()可設定動態載入的Component，但目前無法在server-side render使用，官方推薦使用Loadable Components套件來做Code-Splitting。

注意本範例非server-side render使用Loadable。

安裝

加入Loadable套件的方式很簡單，在專案目錄以命令列輸入npm install @loadable/component即可。

npm install @loadable/component

使用

例如package ./greeting下有一個Hello component。

./greeting/Hello.js

const Hello = props => {
  return <h1>Hello, {props.name}!</h1> 
}

export default Hello;

在App.js使用Loadable的loadable()引入Hello component。

App.js

import loadable from '@loadable/component'

import './App.css';

const Hello = loadable(() => import('./greeting/Hello'), {
  fallback: <div>Loading...</div>
}); // load Hello component dynamically

function App() {
  return <Hello name = "John"/>
}

export default App;

則透過Loadable引入的Hello component會做Code Splitting並延遲載入，另外透過fallback選項設定載入前的"Loading..."字樣。

從Chrome瀏覽器開發者模式的[Network]觀察，在使用Loadable前只有一包main.chunk.js，裡面包含了App.js及Hello.js；使用Loadable後main.chunk.js中只有App.js，Hello.js則被放到1.chunk.js另外載入。

• Loadable Components - Code Splitting
• Loadable Components - Getting Started