一、需求背景

主站采用qiankun微前端方式嵌入新項(xiàng)目，qiankun會(huì)阻塞子應(yīng)用資源加載，這導(dǎo)致應(yīng)用白屏?xí)r間增加，希望在子應(yīng)用端進(jìn)行優(yōu)化以減少白屏?xí)r間。

二、代碼分析

利用 webpack-bundle-analyzer 檢查當(dāng)前 bundle

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

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

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

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

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

由圖可知，當(dāng)前 bundle 體積集中在2.6cb4c9dd.chunk.js中，有必要進(jìn)行代碼分割

優(yōu)化方向：

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

三、技術(shù)實(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 不僅將路由分離成了單獨(dú)的bundle，并且對(duì)依賴進(jìn)行了拆解，將首屏未用到的第三方依賴，如echarts、zrender拆分到單獨(dú)的 bundle 中，只在需要的路由頁(yè)進(jìn)行加載，這大大減少了首屏資源加載體積（37%），將明顯提前進(jìn)入首屏渲染邏輯。

2. Prefetch 預(yù)獲取

由于路由懶加載功能將非首屏依賴抽離出來(lái)，默認(rèn)只在進(jìn)入對(duì)應(yīng)路由頁(yè)面時(shí)刻進(jìn)行加載，這會(huì)導(dǎo)致路由跳轉(zhuǎn)時(shí)出現(xiàn)白屏或者loading，影響用戶體驗(yàn)。所以我們使用 Prefetch預(yù)獲取功能來(lái)幫助解決這個(gè)問(wèn)題。

使用 webpackPrefetch：告訴瀏覽器將來(lái)可能需要該資源來(lái)進(jìn)行某些導(dǎo)航跳轉(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è)資源加載完成后，其他路由頁(yè)資源會(huì)以低優(yōu)先級(jí)的順序在后臺(tái)下載。在跳轉(zhuǎn)其他頁(yè)面時(shí)，可以快速?gòu)拿芯彺?，從而提前進(jìn)入渲染邏輯。提升用戶體驗(yàn)。

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

最新評(píng)論