JavaScript 动态导入怎么在 esbuild 中使用-js教程-PHP中文网

在 esbuild 中使用 javascript 动态导入，只需确保代码中使用了 import() 语法，esbuild 会自动将其识别为动态导入并生成对应的 chunk 文件。默认情况下，esbuild 使用 [hash] 命名规则来输出这些动态导入的模块，你可以通过配置 entrynames 选项来自定义输出文件名格式。

JavaScript 动态导入怎么在 esbuild 中使用

esbuild 如何处理动态导入的入口点

当你的代码中包含 import('./module.js') 时，esbuild 会将该模块视为一个独立的入口点（chunk）。它不会将该模块的代码内联到主 bundle 中，而是单独打包成一个文件。这种处理方式使得主 bundle 保持精简，而动态导入的模块仅在需要时才被加载。

JavaScript 动态导入怎么在 esbuild 中使用

const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outdir: 'dist',
  format: 'esm',
  splitting: true, // 启用代码分割以支持动态导入
}).then(() => {
  console.log('Build complete');
});

上述代码展示了如何使用 esbuild 构建包含动态导入的项目。关键配置是 splitting: true，它告诉 esbuild 进行代码分割，从而正确处理动态导入的模块。运行此命令后，esbuild 会在 dist 目录下生成主 bundle 和动态导入的 chunk 文件。

如何自定义动态导入文件的输出名称

esbuild 允许通过 entryNames 选项自定义输出文件的命名规则。你可以使用占位符如 [name]、[hash] 和 [ext] 来控制文件名。例如，设置 entryNames: '[name]-[hash].js' 会为每个入口点和动态导入的 chunk 生成带有哈希值的唯一文件名，这有助于缓存管理。

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

JavaScript 动态导入怎么在 esbuild 中使用

const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outdir: 'dist',
  format: 'esm',
  splitting: true,
  entryNames: '[name]-[hash].js',
}).then(() => {
  console.log('Build complete with custom naming');
});

在这个示例中，entryNames 配置被添加到 esbuild 选项中。构建完成后，生成的文件名将遵循指定的模式，例如 index-a1b2c3d4.js 和 module-e5f6g7h8.js。这种命名策略确保了每个文件都有唯一的标识符，便于浏览器缓存优化。