面试题：React中懒加载与代码分割的常用方法有哪些

Question

在React项目里，为了实现懒加载与代码分割，通常会用到哪些方法？请简要说明每种方法的实现原理及适用场景。

Answer 1

React.lazy 和 Suspense

• 实现原理：React.lazy 用于动态导入组件，它返回一个 React.lazy 组件，只有在组件真正需要渲染时，才会去加载其代码。Suspense 组件则用于在加载动态组件时，展示加载状态（如加载指示器）。它接收一个 fallback 属性，该属性为加载时显示的内容。
• 适用场景：适用于大部分场景，特别是页面中有较大组件或不常使用的组件，需要在需要时才加载以提高首屏渲染性能，比如一些复杂的弹窗组件、特定路由下的组件等。

React Router 中的代码分割

• 实现原理：在使用 React Router 时，可利用动态导入结合路由配置来实现代码分割。例如，在 React Router v4 及以上版本，可以在路由配置中使用 React.lazy 动态导入组件。这样，当用户访问到特定路由时，对应的组件代码才会被加载。
• 适用场景：适用于单页应用（SPA）的路由组件懒加载，根据不同的路由按需加载对应的页面组件，有效减少初始加载的代码量，提升应用的加载速度，尤其适用于大型应用中有较多路由页面的情况。

Webpack 的 Code Splitting

• 实现原理：Webpack 提供了 splitChunks 插件来实现代码分割。通过配置 splitChunks，可以将代码按照指定的规则（如公共模块、动态导入模块等）进行拆分。在 React 项目中，结合动态导入语法（如 import()），Webpack 会将动态导入的部分代码分割成单独的文件，在需要时异步加载。
• 适用场景：适用于对项目整体代码结构和加载策略有精细化控制的场景。可以针对不同的业务模块、第三方库等进行灵活的代码分割，优化项目的加载性能。例如，将所有页面都使用的公共库代码提取出来单独打包，提高缓存利用率。