关于react.js: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
最初不吹牛逼，昨天用进去一次轮摆位移