JS利用?React.lazy?優(yōu)化頁(yè)面初次渲染
一、需求背景
主站采用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)拿芯彺妫瑥亩崆斑M(jìn)入渲染邏輯。提升用戶體驗(yàn)。
到此這篇關(guān)于JS利用 React.lazy 優(yōu)化頁(yè)面初次渲染的文章就介紹到這了,更多相關(guān)JS React.lazy 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS實(shí)現(xiàn)鼠標(biāo)移動(dòng)拖尾
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)鼠標(biāo)移動(dòng)拖尾效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
京東優(yōu)選小程序的實(shí)現(xiàn)代碼示例
這篇文章主要介紹了京東優(yōu)選小程序的實(shí)現(xiàn)代碼示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
javascript框架設(shè)計(jì)讀書筆記之模塊加載系統(tǒng)
本文是司徒正美的《javascript框架設(shè)計(jì)》的第二章模塊加載系統(tǒng)的讀書筆記，根據(jù)自己的理解，簡(jiǎn)要的跟大家講述了本章的主要內(nèi)容，方便大家更好的學(xué)習(xí)。2014-12-12
一個(gè)JavaScript防止表單重復(fù)提交的實(shí)例
防止重復(fù)表單提交的方法有很多，本文使用JavaScript來(lái)實(shí)現(xiàn)防止表單重復(fù)提交，很簡(jiǎn)單，但很實(shí)用，新手朋友們不要錯(cuò)過(guò)2014-10-10
淺談Javascript中Object與Function對(duì)象
JavaScript的面向?qū)ο笫腔谠蔚?，所有?duì)象都有一條屬于自己的原型鏈。Object與Function可能很多看Object instanceof Function ， Function instanceof Object都為true而迷惑，所以首先看下對(duì)象的實(shí)例2015-09-09
目前小程序使用比較多的富文本方案一個(gè)是小程序自帶的rich-text組件，一個(gè)是wxPrase，本篇文章主要介紹了詳解小程序rich-text對(duì)富文本支持方案，感興趣的小伙伴們可以參考一下2018-11-11
js中遍歷Map對(duì)象的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js中遍歷Map對(duì)象的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
JavaScript實(shí)現(xiàn)類似淘寶的購(gòu)物車效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)購(gòu)物車特效的相關(guān)資料，文中通過(guò)示例代碼詳細(xì)介紹了，利用Javascript如何實(shí)現(xiàn)類似淘寶購(gòu)物車中商品的單選、全選、刪除、修改等功能，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-03-03
取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法
今天小編就為大家分享一篇取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
js簡(jiǎn)單網(wǎng)速測(cè)試方法完整實(shí)例
這篇文章主要介紹了js簡(jiǎn)單網(wǎng)速測(cè)試方法,以完整實(shí)例形式分析了JavaScript基于網(wǎng)頁(yè)圖片下載進(jìn)行測(cè)試網(wǎng)速的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-12-12