react-router4 +react-loadable 實現Code Splitting

BaronZhang 發布于2019-08-22 16:58 / 2577人閱讀

摘要：之前在中文官方文檔使用的是。實現按需加載，升級之后，這個方法就走不通了。之后看了的官網，按需加載只需要神器。

之前在react-router中文官方文檔使用的是require。ensure實現按需加載，升級之后，這個方法就走不通了。
之后看了react-router的官網，按需加載只需要神器 react-loadable 。
react-loadable的好處：

基于import()的自動代碼拆分
import()的厲害之處在于 Webpack 2 可以自動拆分代碼，不論你在何時加入新代碼，都不用做其他額外的工作，你可以通過切換 import() 位置來輕易試驗代碼拆分點，以便讓你的app達到最佳性能。

避免組件加載閃爍
Loading組件需要接收一個pastDelay prop(默認200ms)
export default function Loading({ error, pastDelay }) {

 if (error) {
   return Error!;
 } else if (pastDelay) {
   return Loading...;
 } else {
   return null;
 }

}

預加載
Loadable 創建的組件向外暴露了一個用于預加載的靜態方法：組件.preload()
最后說到webpack搭配react-loadable實現懶加載：
使用到的庫有：react-loadable+plugin-syntax-dynamic-import
在 .babelrc進行如下配置：

{
 "presets": [
   "react"
 ],
 "plugins": [
   "syntax-dynamic-import"
 ]

}
完整使用如下：

import Loadable from "react-loadable";
import Loading from "./Loading";

const LoadableComponent = Loadable({
  loader: () => import("./Dashboard"),
  loading: Loading,
})

export default class LoadableDashboard extends React.Component {
  render() {
    return ;
  }
}

云服務器 GPU云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94732.html

react 前端項目技術選型、開發工具、周邊生態

摘要：更多參考通過庫掌握函數組件有些時候，我們想要動態的加載一些組件按需加載，比如在一個單頁面應用中頁面的組件頁面的組件頁面的組件只有真正要實例化當前頁面的時候，才會去加載相應的組件。 react 前端項目技術選型、開發工具、周邊生態聲明：這不是一篇介紹 React 基礎知識的文章，需要熟悉 React 相關知識主架構：react, react-router, redux, redux...

hersion 2019-08-30 15:54 評論0 收藏0
react 前端項目技術選型、開發工具、周邊生態

摘要：更多參考通過庫掌握函數組件有些時候，我們想要動態的加載一些組件按需加載，比如在一個單頁面應用中頁面的組件頁面的組件頁面的組件只有真正要實例化當前頁面的時候，才會去加載相應的組件。 react 前端項目技術選型、開發工具、周邊生態聲明：這不是一篇介紹 React 基礎知識的文章，需要熟悉 React 相關知識主架構：react, react-router, redux, redux...

kidsamong 2019-08-23 14:07 評論0 收藏0
react搭建后臺管理（react初窺）

摘要：前言以前一直是用進行的開發于是決定年后弄一弄所以年后這段時間也就一直瞎弄可算是看到成果了本來是想寫一個類似仿今日頭條那樣的項目來入手后來又尋思還不如寫個后臺管理呢。于是乎自己便著手簡單的搭建了一個集中設置的版本。前言以前一直是用vue進行的開發, 于是決定年后弄一弄react, 所以年后這段時間也就一直瞎弄react, 可算是看到成果了本來是想寫一個類似 Vue仿今日頭條那樣...

wangjuntytl 2019-08-22 15:23 評論0 收藏0
深入理解 Webpack 打包分塊（下）

摘要：例如允許我們在打包時將腳本分塊利用瀏覽器緩存我們能夠有的放矢的加載資源。文章的內容大體分為兩個方面，一方面在思路制定模塊分離的策略，另一方面從技術上對方案進行落地。我之前提到測試之下是什么樣具體的場景并不重要。前言隨著前端代碼需要處理的業務越來越繁重，我們不得不面臨的一個問題是前端的代碼體積也變得越來越龐大。這造成無論是在調式還是在上線時都需要花長時間等待編譯完成，并且用戶也不得不花額外的...

pingan8787 2019-05-22 19:26 評論0 收藏0