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