react-router4 +react-loadable 實(shí)現(xiàn)Code Splitting

BaronZhang 發(fā)布于2019-08-22 16:58 / 2573人閱讀

摘要：之前在中文官方文檔使用的是。實(shí)現(xiàn)按需加載，升級之后，這個(gè)方法就走不通了。之后看了的官網(wǎng)，按需加載只需要神器。

之前在react-router中文官方文檔使用的是require。ensure實(shí)現(xiàn)按需加載，升級之后，這個(gè)方法就走不通了。
之后看了react-router的官網(wǎng)，按需加載只需要神器 react-loadable 。
react-loadable的好處：

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

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

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

}

預(yù)加載
Loadable 創(chuàng)建的組件向外暴露了一個(gè)用于預(yù)加載的靜態(tài)方法：組件.preload()
最后說到webpack搭配react-loadable實(shí)現(xiàn)懶加載：
使用到的庫有：react-loadable+plugin-syntax-dynamic-import
在 .babelrc進(jìn)行如下配置：

{
 "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 ;
  }
}