react loadable 效能優化

前言

在開發react單頁面應用時，我們會遇到乙個問題，那就是打包後的js檔案特別巨大，首屏載入會特別緩慢。這個時候我們應該講**進行分割，按需載入，將js 拆分成若干個chunk.js,用到就載入，react-loadable就可以很好地解決這個問題。

1.安裝

yarn add react-loadable

2.基本使用假設現在專案中有個 home頁面元件

//src/pages/home/index.js

import react,  from 'react'
import  from 'react-router-dom'
import home from '@pages/home'
const routes = () => (
);export default routes

被路由包裹的根元件直接引入home元件顯示為當前介面會出現乙個問題

執行專案後我們可以看chrome的network記錄

那就是載入全部的js 檔案體積過大開發久了 js檔案多了就會影響體驗

噹噹噹噹解決辦法來了

在home檔案下新建乙個loadable.js檔案

import react from 'react';
import loadable from 'react-loadable';
//通用的過場元件
const loadingcomponent =()=>
export default loadable();

然後再router裡面呼叫

import home from '@pages/home/loadable'  // 呼叫方法相同 只是加了一句

現在再看看chrome的network記錄

工作原理其實就是在頁面元件上有包了一成高階元件來代替原來的頁面元件

到這裡，**分割其實已經解決了，但是如果專案有100個頁面，那laodable.js就需要寫100遍，這樣就感覺有點冗餘了，所以這個我們可以封裝一下

首先，我們建乙個util

src/util/loadable.js

//封裝react-loadable
import react from 'react';
import loadable from 'react-loadable';
//通用的過場元件
const loadingcomponent =()=>
//過場元件預設採用通用的，若傳入了loading，則採用傳入的過場元件
export default (loader,loading = loadingcomponent)=>);
}

根元件引入方式

import react,  from 'react'
import  from 'react-router-dom'
import loadable from '../util/loadable'
const home = loadable(()=>import('@pages/home'))
const routes = () => (
);export default routes

封裝之後，laodable只需寫一次，改變的只是元件的引入方式，這樣一來就方便多了，react-loadable是以元件級別來分割**的，這意味著，我們不僅可以根據路由按需載入，還可以根據元件按需載入，使用方式和路由分割一樣，只用修改元件的引入方式。

react loadable 效能優化

react loadable 實現路由懶載入

效能測試效能測試步驟

《效能之巔》初識效能

react loadable 效能優化

react loadable 實現路由懶載入

效能測試 效能測試步驟

《效能之巔》初識效能

相關推薦

效能測試效能測試步驟