Rspack 如何实现代码分割？ - 面试题

Rspack 的代码分割功能是其优化应用性能的重要特性，能够有效减少初始加载时间，提升用户体验。以下是 Rspack 代码分割的详细说明：

代码分割的基本概念

代码分割是指将代码拆分成多个 bundle，按需加载，而不是将所有代码打包成一个大的 bundle。这样可以：

减少初始加载的代码量
实现按需加载，提升首屏加载速度
优化缓存策略，提高资源复用率

Rspack 代码分割的方式

入口点分割（Entry Points）：通过配置多个入口点实现代码分割：

javascript
module.exports = {
  entry: {
    main: './src/main.js',
    vendor: './src/vendor.js'
  }
}

动态导入（Dynamic Import）：使用 import() 语法实现动态导入：

javascript
// 静态导入
import { add } from './math';

// 动态导入
import('./math').then(module => {
  module.add(1, 2);
});

// 异步函数中使用
async function loadModule() {
  const { add } = await import('./math');
  return add(1, 2);
}

SplitChunksPlugin： Rspack 内置了代码分割插件，可以智能提取公共代码：

javascript
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
}

SplitChunksPlugin 配置详解

chunks：
- all：对所有模块进行分割
- initial：只对初始加载的模块进行分割
- async：只对异步加载的模块进行分割
minSize：
- 模块的最小大小，小于此值的模块不会被分割
- 默认值为 30000 字节
maxSize：
- 模块的最大大小，超过此值的模块会被进一步分割
- 用于实现更细粒度的代码分割
minChunks：
- 模块被引用的最小次数
- 默认值为 1
maxAsyncRequests：
- 按需加载时的最大并行请求数
- 默认值为 5
maxInitialRequests：
- 入口点的最大并行请求数
- 默认值为 3
name：
- 分割后的 chunk 名称
- 可以是字符串或函数

框架集成

React：

javascript
import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Vue：

javascript
const LazyComponent = () => import('./LazyComponent.vue');

new Vue({
  components: {
    LazyComponent
  }
});

路由级代码分割：

javascript
// React Router
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

// Vue Router
const routes = [
  {
    path: '/',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('./views/About.vue')
  }
];

性能优化建议

合理设置分割策略：
- 根据项目规模和特点调整分割配置
- 避免过度分割导致过多的 HTTP 请求
- 平衡 bundle 大小和请求数量

预加载关键资源：

javascript
import(/* webpackPrefetch: true */ './path/to/LoginModal.js');
import(/* webpackPreload: true */ './path/to/component.js');

分析打包结果：
- 使用 Rspack 的分析工具查看 bundle 大小
- 识别可以进一步优化的模块
- 监控代码分割效果
缓存优化：
- 为第三方库设置稳定的 chunk 名称
- 利用长期缓存策略
- 减少不必要的重新下载

最佳实践

按功能模块分割：
- 将不同功能模块分割成独立的 chunk
- 便于维护和按需加载
提取公共依赖：
- 使用 SplitChunksPlugin 提取公共代码
- 减少重复代码
懒加载非关键代码：
- 对非首屏代码使用动态导入
- 提升首屏加载速度
监控和优化：
- 定期分析打包结果
- 根据实际使用情况调整分割策略
- 持续优化加载性能

Rspack 的代码分割功能为开发者提供了强大的性能优化工具，通过合理的配置和使用，可以显著提升应用的加载性能和用户体验。