網頁

2021/7/25

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.jsHello.js;使用Loadable後main.chunk.js中只有App.jsHello.js則被放到1.chunk.js另外載入。





沒有留言:

張貼留言