深度剖析React懒加载原理

目录

• 代码分割
• React的懒加载
  • import() 原理
  • React.lazy 原理
  • Suspense 原理
• 参考

1.代码分割

（1）为什么要进行代码分割？

现在前端项目基本都采用打包技术，比如 Webpack，JS逻辑代码打包后会产生一个 bundle.js 文件，而随着我们引用的第三方库越来越多或业务逻辑代码越来越复杂，相应打包好的 bundle.js 文件体积就会越来越大，因为需要先请求加载资源之后，才会渲染页面，这就会严重影响到页面的首屏加载。

而为了解决这样的问题，避免大体积的代码包，我们则可以通过技术手段对代码包进行分割，能够创建多个包并在运行时动态地加载。现在像 Webpack、 Browserify等打包器都支持代码分割技术。

（2）什么时候应该考虑进行代码分割？

这里举一个平时开发中可能会遇到的场景，比如某个体积相对比较大的第三方库或插件（比如JS版的PDF预览库）只在单页应用（SPA）的某一个不是首页的页面使用了，这种情况就可以考虑代码分割，增加首屏的加载速度。

2.React的懒加载

示例代码：

import React, {
    Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
   
  return (
    <div>
      <Suspense fallback={
   <div>Loading...</div>}>        <OtherComponent />
      </Suspense>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

如上代码中，通过 import()、React.lazy 和 Suspense 共同一起实现了 React 的懒加载，也就是我们常说了运行时动态加载，即 OtherComponent 组件文件被拆分打包为一个新的包（bundle）文件，并且只会在 OtherComponent 组件渲染时，才会被下载到本地。

那么上述中的代码拆分以及动态加载究竟是如何实现的呢？让我们来一起探究其原理是怎样的。

import() 原理

import() 函数是由TS39提出的一种动态加载模块的规范实现，其返回是一个 promise。在浏览器宿主环境中一个import()的参考实现如下：

function import(url) {
   
  return new Promise((resolve, reject) => {
   
    const script = document.createElement("script");
    const tempGlobal = "__tempModuleLoadingVariable" + Math.random().toString(32).substring(
1
2
3
4
5