成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

JasinYip / 485人閱讀

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

雖然一直有做 react 相關(guān)的優(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 
;
  } else if (timedOut) {
    return 
Taking a long time...
;
  } else if (error) {
    return 
Error!
;
  }
  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
});

...

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

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

驗證結(jié)果

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

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

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

Tips

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

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

該文章首發(fā)于我的博客https://blog.bingqichen.me/

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93942.html

相關(guān)文章

  • webpack4大結(jié)局：加入騰訊IM配置策略，實現(xiàn)前端工程化環(huán)境極致優(yōu)化

    摘要：或者的，都會對其進行分析。舒適的開發(fā)體驗，有助于提高我們的開發(fā)效率，優(yōu)化開發(fā)體驗也至關(guān)重要組件熱刷新熱刷新自從推出熱刷新后，前端開發(fā)者在開環(huán)境下體驗大幅提高。實現(xiàn)熱調(diào)試后，調(diào)試流程大幅縮短，和普通非直出模式調(diào)試體驗保持一致。 showImg(https://segmentfault.com/img/bVbtOR3?w=1177&h=635); webpack，打包所有的資源 不知道不...

    李增田 評論0 收藏0

  • webpack4大結(jié)局：加入騰訊IM配置策略，實現(xiàn)前端工程化環(huán)境極致優(yōu)化

    摘要：或者的，都會對其進行分析。舒適的開發(fā)體驗，有助于提高我們的開發(fā)效率，優(yōu)化開發(fā)體驗也至關(guān)重要組件熱刷新熱刷新自從推出熱刷新后，前端開發(fā)者在開環(huán)境下體驗大幅提高。實現(xiàn)熱調(diào)試后，調(diào)試流程大幅縮短，和普通非直出模式調(diào)試體驗保持一致。 showImg(https://segmentfault.com/img/bVbtOR3?w=1177&h=635); webpack，打包所有的資源 不知道不...

    stdying 評論0 收藏0

  • webpack4大結(jié)局：加入騰訊IM配置策略，實現(xiàn)前端工程化環(huán)境極致優(yōu)化

    摘要：或者的，都會對其進行分析。舒適的開發(fā)體驗，有助于提高我們的開發(fā)效率，優(yōu)化開發(fā)體驗也至關(guān)重要組件熱刷新熱刷新自從推出熱刷新后，前端開發(fā)者在開環(huán)境下體驗大幅提高。實現(xiàn)熱調(diào)試后，調(diào)試流程大幅縮短，和普通非直出模式調(diào)試體驗保持一致。 showImg(https://segmentfault.com/img/bVbtOR3?w=1177&h=635); webpack，打包所有的資源 不知道不...

    The question 評論0 收藏0

  • 前端性能優(yōu)化—js代碼打包

    摘要：注意使用的版本不同，可能會導致打包出的結(jié)果不一樣。完整的優(yōu)化代碼見有用的文章分離第三方庫及公用文件 現(xiàn)在的 web 應用，內(nèi)容一般都很豐富，站點需要加載的資源也特別多，尤其要加載很多 js 文件。js 文件從服務端獲取，體積大小決定了傳輸?shù)目炻?；瀏覽器端拿到 js 文件之后，還需要經(jīng)過解壓縮、解析、編譯、執(zhí)行操作，所以，控制 js 代碼的體積以及按需加載對前端性能以及用戶體驗是十分的重...

    Rango 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<