快捷導航

JS利用?React.lazy?優(yōu)化頁面初次渲染

更新時間：2022年07月26日 09:13:04 作者：??Cyber_Bear?

這篇文章主要介紹了JS利用?React.lazy?優(yōu)化頁面初次渲染,React.lazy?接受一個函數(shù)，這個函數(shù)需要動態(tài)調(diào)用import()，它必須返回一個Promise，該Promise需要resolve一個default?export的React組件

一、需求背景

主站采用qiankun微前端方式嵌入新項目，qiankun會阻塞子應用資源加載，這導致應用白屏時間增加，希望在子應用端進行優(yōu)化以減少白屏時間。

二、代碼分析

利用 webpack-bundle-analyzer 檢查當前 bundle

// 安裝
npm install -D webpack-bundle-analyzer

// 配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

// 使用 構(gòu)建時自動彈出
npm run build

第三方庫如echarts已經(jīng)使用按需引入方案，從代碼體積層面已無優(yōu)化空間

由圖可知，當前 bundle 體積集中在2.6cb4c9dd.chunk.js中，有必要進行代碼分割

優(yōu)化方向：

使用路由懶加載，延遲加載在初次渲染時未用到的組件。
使用 prefetch 功能，在首頁必須資源加載完后自動加載其他路由頁面資源，防止路由跳轉(zhuǎn)白屏

三、技術(shù)實現(xiàn)

1. 路由懶加載

使用 React.lazy

const Market = React.lazy(() => import(/* webpackChunkName: "Market" */ './pages/market'))
const Record = React.lazy(() => import(/* webpackChunkName: "Record" */ './pages/Myrecord'))
const Detail = React.lazy(() => import(/* webpackChunkName: "Detail" */ './pages/detail'))

打包分析圖:

由圖可以看到，webpack 不僅將路由分離成了單獨的bundle，并且對依賴進行了拆解，將首屏未用到的第三方依賴，如echarts、zrender拆分到單獨的 bundle 中，只在需要的路由頁進行加載，這大大減少了首屏資源加載體積（37%），將明顯提前進入首屏渲染邏輯。

2. Prefetch 預獲取

由于路由懶加載功能將非首屏依賴抽離出來，默認只在進入對應路由頁面時刻進行加載，這會導致路由跳轉(zhuǎn)時出現(xiàn)白屏或者loading，影響用戶體驗。所以我們使用 Prefetch預獲取功能來幫助解決這個問題。

使用 webpackPrefetch：告訴瀏覽器將來可能需要該資源來進行某些導航跳轉(zhuǎn)

const Market = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "Market" */ './pages/market'))
const MyRecord = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "MyRecord" */ './pages/record'))
const Detail = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "Detail" */ './pages/detail'))

在首頁資源加載完成后，其他路由頁資源會以低優(yōu)先級的順序在后臺下載。在跳轉(zhuǎn)其他頁面時，可以快速從命中緩存，從而提前進入渲染邏輯。提升用戶體驗。

到此這篇關(guān)于JS利用 React.lazy 優(yōu)化頁面初次渲染的文章就介紹到這了,更多相關(guān)JS React.lazy 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: