性能优化_代码分割（一）

页面初始化优化

大多数 React 应用都会使用 Webpack，Rollup或 Browserify 这类的构建工具来打包文件。

打包是一个将文件引入合并到一个单独文件的过程，最终形成一个 “bundle”。 接着在页面上引入该 bundle，整个应用即可一次性加载。

随着应用的增长，你的代码包也将随之增长。尤其是在整合了体积巨大的第三方库的情况下。最终打包后的文件体积会很大，这样对页面初始化很不友好，会延长页面初始化时间。

• 代码分割

  对应用进行代码分割能够帮助你“懒加载”当前用户所需要的内容，能够显著地提高你的应用性能。

  尽管并没有减少应用整体的代码体积，但你可以避免加载用户永远不需要的代码，并在初始加载的时候减少所需加载的代码量。

  React.lazy

  React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 defalut export 的 React 组件。

  xxxxxxxxxx
  React.lazy(() => import('./LazyComponent'));
  

  xxxxxxxxxx
  import React from 'react';
  
  const LazyComponent = React.lazy(() => import('./LazyComponent'));
  
  function LazyTest() {
    return (
      <div>
        <h3>下面要展示的组件页面是延迟加载的</h3>
          <LazyComponent />
      </div>
    );
  }
  

  提示：

  代码分割我们一般会结合react路由一起实现。

实时效果反馈

1. 代码分割最终生成___.js文件：

A 单个

B 多个

答案

1=>B