React 代码分割

大部分React应用使用打包器来管理我们的代码。打包器可以将我们的各个文件打包成一个“bundle”，这样在页面加载时，可以一次性加载整个页面。

代码分割并不能减少我们的整体代码量，但是可以帮助我们在页面加载时按需加载，从而提升性能。

使用 import 的动态加载是实现代码分割的最佳方式。import  { add } from ＂./math.js＂  除了import 外，React.lazy()函数也可以实现动态引入组件。const Component = React.lazy( () =>  import(＂./Component＂))； 在使用 React.lazy＂懒加载＂引入组件后，需要配合 <Suspense>标签使用，并且<Suspense> 标签接受一个 fallback 的属性。通过该属性，我们可以定义在页面加载中的等待时间内我们想展示的内容。

<Suspense fallback={ <div> loading... </div> } >... 通过 React.lazy 引入的组件名</suspense>

理论上代码分割可以的位置你可以随意定义，但是基于用户体验来说，选择合理的地方进行代码分割，可以提升用户的使用感受，比如用户习惯于在页面切换时等待加载。可以使用基于路由的代码分割。在我最近的使用中也使用到了React.lazy。使用场景是渲染数据的表单页面，这为我们提供了另一种思路，在面对数据量大的情况下，也可以使用懒加载的特性提升页面的整体加载速度。