react 實(shí)現(xiàn)頁面代碼分割、按需加載的方法
雖然一直有做 react 相關(guān)的優(yōu)化,按需加載、dll 分離、服務(wù)端渲染,但是從來沒有從路由代碼分割這一塊入手過,昨天在本地開發(fā)時(shí)沒有測試成功,今天又搞了下,已經(jīng)部署到線上環(huán)境了,今天就這個(gè)記錄一下。
修改配置
開發(fā)環(huán)境:webpack@v3 、react-router@v4
安裝依賴:
$ yarn add babel-plugin-syntax-dynamic-import -dev
修改 .babelrc 文件:在 plugins 中添加 "syntax-dynamic-import"
改造項(xiàng)目代碼
安裝依賴:
$ yarn add react-loadable
根據(jù) react-loadable 文檔提示,我們需要提供一個(gè)載入新頁面時(shí)的 Loading 組件,同時(shí)對(duì)加載和超時(shí)狀態(tài)進(jìn)行區(qū)別提示:
import React from 'react'; import { Icon } from 'antd'; const Loading = ({ pastDelay, timedOut, error }) => { if (pastDelay) { return <div><Icon type="loading" /></div>; } else if (timedOut) { return <div>Taking a long time...</div>; } else if (error) { return <div>Error!</div>; } return null; };
更改頁面組件導(dǎo)入方法:
import React from 'react'; import Loadable from 'react-loadable'; import { Route, Switch } from 'react-router-dom'; const Home = Loadable({ loader: () => import('../Home'), loading: Loading, timeout: 10000 }); const EditArticle = Loadable({ loader: () => import('../EditArticle'), loading: Loading, timeout: 10000 }); ... <Switch> <Route exact path="/home" component={Home} /> <Route path="/editarticle" component={EditArticle} /> </Switch>
然后打包結(jié)果就會(huì)分離出各頁面代碼:
在頁面中我們只需要載入入口文件 app.js ,其他腳本在訪問到對(duì)應(yīng)頁面時(shí)都會(huì)經(jīng)由這個(gè)文件載入。
驗(yàn)證結(jié)果
在將靜態(tài)資源上傳到 cdn 之后,在頁面中加載 app.css 和 app.js ,運(yùn)行之后訪問各個(gè)頁面就會(huì)依次加載對(duì)應(yīng)腳本,結(jié)果如圖:
可以看到,在訪問第一個(gè)頁面時(shí)加載的頁面腳本經(jīng) gzip 壓縮后僅有 21.8KB ?。?!當(dāng)然這與頁面復(fù)雜度也有關(guān),但是相較于加載全部腳本,已經(jīng)是大幅減少了,這種優(yōu)化對(duì)訪問目標(biāo)性很強(qiáng)的用戶感受起來尤為明顯。
這么做的另一個(gè)好處就是當(dāng)我們只更改項(xiàng)目中某些頁面的業(yè)務(wù)代碼時(shí),其他頁面的代碼依然是不變的,所以這個(gè)時(shí)候其他頁面用的是客戶端緩存,從另一個(gè)層面又做了一次優(yōu)化。
Tips
react-loadable 還有其他配置選項(xiàng),可以按需配置;
這里還需要注意的一點(diǎn)是:webpack 中的 output.publicPath 選項(xiàng),這個(gè)配置會(huì)影響 app.js 從何處加載頁面腳本,正確的寫法應(yīng)該是腳本文件載入的前綴地址,例如: 0.js 的遠(yuǎn)程鏈接為 http://static.domain.com/release/0.js ,那么這個(gè)應(yīng)該配置為http://static.domain.com/release/。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
淺談react?16.8版本新特性以及對(duì)react開發(fā)的影響
本文主要介紹了react?16.8版本新特性以及對(duì)react開發(fā)的影響,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03如何使用 React Router v6 在 React 中
面包屑在網(wǎng)頁開發(fā)中的角色不可忽視,它們?yōu)橛脩籼峁┝艘环N跟蹤其在網(wǎng)頁中當(dāng)前位置的方法,并有助于網(wǎng)頁導(dǎo)航,本文介紹了如何使用react-router v6和bootstrap在react中實(shí)現(xiàn)面包屑,感興趣的朋友一起看看吧2024-09-09react hook使用useState更新數(shù)組,無法更新問題及解決
這篇文章主要介紹了react hook使用useState更新數(shù)組,無法更新問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Reactjs實(shí)現(xiàn)通用分頁組件的實(shí)例代碼
這篇文章主要介紹了Reactjs實(shí)現(xiàn)通用分頁組件的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-01-01React Refs轉(zhuǎn)發(fā)實(shí)現(xiàn)流程詳解
Refs是一個(gè) 獲取 DOM節(jié)點(diǎn)或React元素實(shí)例的工具,在React中Refs 提供了一種方式,允許用戶訪問DOM 節(jié)點(diǎn)或者在render方法中創(chuàng)建的React元素,這篇文章主要給大家介紹了關(guān)于React中refs的一些常見用法,需要的朋友可以參考下2022-12-12react純函數(shù)組件setState更新頁面不刷新的解決
在開發(fā)過程中,經(jīng)常遇到組件數(shù)據(jù)無法更新,本文主要介紹了react純函數(shù)組件setState更新頁面不刷新的解決,感興趣的可以了解一下2021-06-06React/Redux應(yīng)用使用Async/Await的方法
本篇文章主要介紹了React/Redux應(yīng)用使用Async/Await的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11React State狀態(tài)與生命周期的實(shí)現(xiàn)方法
這篇文章主要介紹了React State狀態(tài)與生命周期的實(shí)現(xiàn)方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03React實(shí)現(xiàn)動(dòng)態(tài)調(diào)用的彈框組件
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)動(dòng)態(tài)調(diào)用的彈框組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08