头图

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
最后不吹牛逼,昨天用出来一次轮摆位移

阅读 1.7k
31 声望
5 粉丝
0 条评论
31 声望
5 粉丝
文章目录
宣传栏