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