react實現(xiàn)頁面代碼分割、按需加載的方法

雖然一直有做 react 相關(guān)的優(yōu)化，按需加載、dll 分離、服務(wù)端渲染，但是從來沒有從路由代碼分割這一塊入手過，昨天在本地開發(fā)時沒有測試成功，今天又搞了下，已經(jīng)部署到線上環(huán)境了，今天就這個記錄一下。

成都創(chuàng)新互聯(lián)公司10多年企業(yè)網(wǎng)站設(shè)計服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及高端網(wǎng)站定制服務(wù),企業(yè)網(wǎng)站設(shè)計及推廣,對成都衛(wèi)生間隔斷等多個領(lǐng)域擁有豐富的網(wǎng)站營銷經(jīng)驗的網(wǎng)站建設(shè)公司。

修改配置

開發(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>

然后打包結(jié)果就會分離出各頁面代碼：

在頁面中我們只需要載入入口文件 app.js ，其他腳本在訪問到對應(yīng)頁面時都會經(jīng)由這個文件載入。

驗證結(jié)果

在將靜態(tài)資源上傳到 cdn 之后，在頁面中加載 app.css 和 app.js ，運行之后訪問各個頁面就會依次加載對應(yīng)腳本，結(jié)果如圖：

可以看到，在訪問第一個頁面時加載的頁面腳本經(jīng) gzip 壓縮后僅有 21.8KB ！！！當然這與頁面復雜度也有關(guān)，但是相較于加載全部腳本，已經(jīng)是大幅減少了，這種優(yōu)化對訪問目標性很強的用戶感受起來尤為明顯。

這么做的另一個好處就是當我們只更改項目中某些頁面的業(yè)務(wù)代碼時，其他頁面的代碼依然是不變的，所以這個時候其他頁面用的是客戶端緩存，從另一個層面又做了一次優(yōu)化。

Tips

react-loadable 還有其他配置選項，可以按需配置；

這里還需要注意的一點是：webpack 中的 output.publicPath 選項，這個配置會影響 app.js 從何處加載頁面腳本，正確的寫法應(yīng)該是腳本文件載入的前綴地址，例如： 0.js 的遠程鏈接為 http://static.domain.com/release/0.js ，那么這個應(yīng)該配置為http://static.domain.com/release/。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站標題：react實現(xiàn)頁面代碼分割、按需加載的方法
當前鏈接：http://www.jbt999.com/article2/iipjoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、自適應(yīng)網(wǎng)站、網(wǎng)站改版、網(wǎng)站導航、網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)