雖然一直有做 react 相關的優(yōu)化,按需加載、dll 分離、服務端渲染,但是從來沒有從路由代碼分割這一塊入手過,昨天在本地開發(fā)時沒有測試成功,今天又搞了下,已經(jīng)部署到線上環(huán)境了,今天就這個記錄一下。
成都創(chuàng)新互聯(lián)公司10多年企業(yè)網(wǎng)站設計服務;為您提供網(wǎng)站建設,網(wǎng)站制作,網(wǎng)頁設計及高端網(wǎng)站定制服務,企業(yè)網(wǎng)站設計及推廣,對成都衛(wèi)生間隔斷等多個領域擁有豐富的網(wǎng)站營銷經(jīng)驗的網(wǎng)站建設公司。
修改配置
開發(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)容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站標題:react實現(xiàn)頁面代碼分割、按需加載的方法
當前鏈接:http://bm7419.com/article2/iipjoc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營銷、自適應網(wǎng)站、網(wǎng)站改版、網(wǎng)站導航、網(wǎng)站制作、外貿(mào)網(wǎng)站建設
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)