Rollup 如何进行代码分割 (Code Splitting)？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 Rollup 中，代码分割（Code Splitting）可以通过以下步骤实现：

使用动态导入（Dynamic Import）：在代码中使用 import() 语法来动态加载模块。Rollup 会自动将这些动态导入的模块分割成单独的文件。
```
// main.js
async function loadModule() {
  const module = await import('./module.js');
  module.doSomething();
}

loadModule();
```
配置 Rollup 输出格式：确保 Rollup 的输出格式设置为 es 或 system，因为这些格式支持代码分割。
```
// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'es',
  },
};
```

使用 @rollup/plugin-commonjs 和 @rollup/plugin-node-resolve：如果项目中使用了 CommonJS 模块或 Node.js 模块，需要安装并配置这些插件。

// www.javascriptcn.com code example
// rollup.config.js
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'es',
  },
  plugins: [resolve(), commonjs()],
};

运行 Rollup：执行 Rollup 构建命令，Rollup 会自动将动态导入的模块分割成单独的文件。
```
npx rollup -c
```

本题详细解读

代码分割的概念

代码分割是一种优化技术，用于将应用程序的代码拆分成多个较小的文件（或“块”），以便在需要时按需加载。这可以减少初始加载时间，并提高应用程序的性能。

Rollup 中的代码分割

Rollup 从版本 2.0 开始支持代码分割。与 Webpack 不同，Rollup 的代码分割主要依赖于 ES 模块的动态导入（import()）语法。当 Rollup 检测到动态导入时，它会自动将导入的模块分割成单独的文件。

动态导入

动态导入是 ES 模块规范的一部分，允许在运行时异步加载模块。Rollup 利用这一特性来实现代码分割。例如：

// main.js
async function loadModule() {
  const module = await import('./module.js');
  module.doSomething();
}

loadModule();

在这个例子中，module.js 会被 Rollup 分割成一个单独的文件，并在 loadModule 函数被调用时异步加载。

输出格式

Rollup 的代码分割功能依赖于输出格式。目前，只有 es 和 system 格式支持代码分割。es 格式是 ES 模块的标准格式，而 system 格式是 SystemJS 的模块格式。

插件支持

如果项目中使用了 CommonJS 模块或 Node.js 模块，需要使用 @rollup/plugin-commonjs 和 @rollup/plugin-node-resolve 插件来处理这些模块。这些插件确保 Rollup 能够正确解析和转换这些模块，以便进行代码分割。

构建过程

在配置好 Rollup 后，运行构建命令即可生成分割后的代码。Rollup 会自动处理动态导入，并将它们分割成单独的文件。这些文件可以在需要时按需加载，从而提高应用程序的性能。

通过以上步骤，你可以在 Rollup 中实现代码分割，优化应用程序的加载性能。