代码分割

代码分割、动态导入

📋 学习目标

{
  entryPoints: ['src/index.js'],
  bundle: true,
  splitting: true,  // 启用代码分割
  format: 'esm',    // 必须使用 ESM
  outdir: 'dist'
}

// src/index.js
import('./module.js').then(module => {
  module.default()
})

// 路由懒加载
const loadPage = async (page) => {
  const module = await import(`./pages/${page}.js`)
  return module.default
}

{
  entryNames: '[name]-[hash]',
  chunkNames: '[name]-[hash]'
}

ESBuild 自动识别动态导入并分割代码。