面试题：React组件打包优化之代码分割策略

React.lazy 和 Suspense 在代码分割中的作用

React.lazy：
- 动态导入组件：React.lazy 允许我们在 React 应用中动态导入组件。它接受一个函数，这个函数返回一个动态 import()。这使得组件在需要的时候才被加载，而不是在应用启动时就全部加载。例如：
```
const SomeComponent = React.lazy(() => import('./SomeComponent'));
```
- 延迟加载：这样做可以有效地延迟组件的加载，只有当 SomeComponent 即将在屏幕上渲染时才会加载其代码，减少初始加载的代码量，提高应用的初始加载速度。
Suspense：
- 处理加载状态：Suspense 组件用于在组件加载时展示加载状态。当 React.lazy 导入的组件正在加载时，Suspense 组件可以显示一个加载指示器（如加载动画等）。
- 使用方式：Suspense 组件需要包裹 React.lazy 导入的组件，并设置 fallback 属性，fallback 中可以定义加载时显示的内容。例如：
```
import React, { Suspense } from'react';
const SomeComponent = React.lazy(() => import('./SomeComponent'));
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <SomeComponent />
    </Suspense>
  );
}
export default App;
```

Webpack 配置优化代码分割提高加载性能

优化分包策略：
- splitChunks 配置：在 Webpack 的 optimization.splitChunks 中，可以配置如何将代码分割成不同的块。例如，可以将第三方库（如 React、React - DOM 等）和业务代码分开打包。
```
module.exports = {
  //...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name:'vendors',
          chunks: 'all'
        }
      }
    }
  }
};
```
- 这样，在构建时，Webpack 会将来自 node_modules 的代码提取到 vendors 这个单独的文件中，浏览器可以缓存这个文件，提高后续加载速度。

启用压缩：

TerserPlugin 配置：Webpack 中的 TerserPlugin 可以压缩代码，减小打包文件的体积。在 optimization.minimizer 中配置：

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  //...其他配置
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          compress: {
            drop_console: true // 移除 console.log 等调试代码
          }
        }
      })
    ]
  }
};

启用并行压缩（parallel: true）可以加快压缩速度，drop_console 可以移除调试用的 console.log 语句，进一步减小代码体积。

Tree - shaking：
- 模式设置：Webpack 在 production 模式下默认启用 Tree - shaking。Tree - shaking 可以移除未使用的代码，减少打包体积。确保 Webpack 配置中设置 mode: 'production'：
```
module.exports = {
  mode: 'production',
  //...其他配置
};
```
- 如果在非生产模式下也想启用 Tree - shaking，可以安装 @babel/plugin - transform - remove - unused - imports 等插件，并在 Babel 配置中进行设置。
Code Splitting 相关 Loader 配置：
- 配置 React.lazy 相关：Webpack 的 @babel/plugin - syntax - dynamic - import 和 @babel/plugin - transform - dynamic - import 插件可以支持 React.lazy 中的动态导入语法。在 Babel 配置文件（.babelrc 或 babel.config.js）中添加：
```
{
  "plugins": [
    "@babel/plugin - syntax - dynamic - import",
    "@babel/plugin - transform - dynamic - import"
  ]
}
```
- 这样 Webpack 可以正确处理 React.lazy 导入的组件，实现代码分割。

面试题：React组件打包优化之代码分割策略

知识考点

面试题答案

React.lazy 和 Suspense 在代码分割中的作用

Webpack 配置优化代码分割提高加载性能