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
另外載入。
沒有留言:
張貼留言