react 的动态加载原理

文章参考了这个 https://juejin.cn/post/684490...有时候一个非常大的依赖包，只是在一个非常低频的深层路由才会使用，这时候就希望能做到懒加载，只有真正点击进了页面再加载，于是这个自组件需要被设计被懒加载。1.懒加载实现原理2.react 的懒加载如何实现3.为什么不同的框架有不同的懒加载细节

懒加载的实现原理

webpack 会把我们的web应用打包成一个bundle.js，这是在普通的spa应用的情况下。但是呢，需要懒加载的则就是说我不希望这部分的代码，被打包进这个bundle文件，然后跟着首页一起被加载出去。所以第一步需要让webpack知道，这一部分代码不要被打包进首页的bundle.js中.webpack 会自动识别 import('modulePath')（注释：https://webpack.docschina.org...） 动态加载文件的函数，识别到之后就会将modulePath的文件单独打包。

import（）

新的esmodule 标准推出了 import * from 'path'的语法。这个import 语法只能用在文件顶部，文件执行前先执行 import 操作。但是如果希望动态的加载一个文件，可以使用import('path')函数。https://developer.mozilla.org...

单独打包的react 的 component如何被加载的

webpack内置了如何动态加载，但是如果你使用了 Babel 则同时需要在babel的配置文件中添加这一句，告诉babel对import（）作特殊处理具体的我没懂，想了解的可以看原文https://reactrouter.com/web/g...

"plugins": ["@babel/plugin-syntax-dynamic-import"]

拿到了被单独打包的js文件（react component）之后react怎么将component渲染出来呢？

/** loadable/component 和 React.lazy 是一个东西，具体差别可以参考 
**https://loadable-components.com/docs/loadable-vs-react-lazy/
*/
import loadable from "@loadable/component"; 
import Loading from "./Loading.js";

const LoadableComponent = loadable(() => import("./Dashboard.js"), {
  fallback: <Loading />
});

export default class LoadableDashboard extends React.Component {
  render() {
    return <LoadableComponent />;
  }
} 

最后呢@loadable/component 会对动态加载 react component 进行一次封装。封装后的组件会带上当前正在请求的 module 的加载状态，'pending' 'resolved' 'rejected'这样。

最后已经加载到的 LoadableComponent 如何被渲染出来的

这就是 suspense 的逻辑了，suspense 接收 children 和 fallback 参数，然后children 就是动态加载的 LoadableComponent， 根据 children 的状态判断当前是渲染 fallback 还是渲染children 最后不吹牛逼，昨天用出来一次轮摆位移