探究react-scripts start原理及如何让esbuild生成多Chunk脚本

一、react-scripts start 是怎么插入Chunk脚本的？ #

Create React App（react-scripts）底层依赖webpack，通过以下逻辑自动完成Chunk注入：

1. 代码分割：默认配置下，webpack会把代码拆分为多个独立Chunk——比如runtime~main.js（运行时代码）、vendor.js（第三方依赖，如react、react-dom）、main.js（业务代码）。
2. HtmlWebpackPlugin：这个插件会扫描webpack打包生成的所有Chunk文件，自动将对应的<script>标签插入到public/index.html的body末尾位置。
3. 热更新注入：webpack-dev-server会在页面中添加热更新客户端脚本，确保代码修改后能自动刷新并加载最新Chunk。

二、如何配置esbuild实现相同效果？ #

你的当前esbuild配置用outfile将所有代码打包成单个文件，既没开启代码分割，也没有自动注入脚本到HTML。需要调整以下核心点：

1. 开启代码分割 #

esbuild的代码分割需要同时启用splitting: true和format: 'esm'（仅支持ES模块格式），开启后会自动把第三方依赖、运行时代码拆分为独立Chunk。

2. 替换outfile为outdir #

多Chunk输出需要指定目录而非单个文件，因此用outdir替代outfile。

3. 用插件自动注入Chunk到HTML #

安装esbuild-plugin-html插件（执行npm install esbuild-plugin-html --save-dev），读取你的public/index.html作为模板，自动插入生成的所有Chunk脚本。

修改后的完整配置 #

const esbuild = require('esbuild');
const inlineImage = require('esbuild-plugin-inline-image');
const { sassPlugin } = require('esbuild-sass-plugin');
const svgrPlugin = require('esbuild-plugin-svgr');
const { htmlPlugin } = require('esbuild-plugin-html');

esbuild
  .serve(
    {
      servedir: './dist', // 指向多Chunk输出目录
      port: 3000,
    },
    {
      entryPoints: ['./src/index.tsx'],
      outdir: './dist', // 多Chunk输出到指定目录
      minify: true,
      bundle: true,
      splitting: true, // 开启代码分割
      format: 'esm', // 代码分割必须搭配ES模块格式
      define: {
        'process.env.NODE_ENV': '"development"',
        'process.env.REACT_APP_BACKEND_URL': '"https://something.xyz.ai/"',
        'process.env.REACT_APP_BACKEND_WSS': '"wss://something.xyz.ai/ws/"',
        'process.env.REACT_APP_BACKEND_URL_STAGE': '"https://stage-new.something.xyz.ai/"',
        'process.env.REACT_APP_HELP_AND_SUPPORT_URL': '"https://docs.something.xyz.ai/"',
      },
      loader: {
        '.js': 'jsx',
        '.ts': 'tsx',
      },
      plugins: [
        svgrPlugin({ exportType: 'named' }),
        inlineImage(),
        sassPlugin(),
        htmlPlugin({
          files: [
            {
              entryPoints: ['./src/index.tsx'],
              filename: 'index.html',
              template: './public/index.html', // 复用原有HTML模板
            },
          ],
        }),
      ],
    },
  )
  .catch(() => process.exit(1));

关键修改说明 #

• splitting + format：开启后，esbuild会生成类似CRA的多Chunk文件，比如index.js（业务代码）、vendor.js（第三方依赖）、runtime.js（运行时）。
• htmlPlugin：自动扫描所有生成的Chunk，将对应的<script type="module">标签插入到HTML模板中，完全替代CRA的HtmlWebpackPlugin功能。
• servedir指向dist：确保开发服务器能正确加载输出目录下的HTML和Chunk文件。

注意事项 #

• 删掉public/index.html中手动添加的<script>标签，避免重复加载。
• esbuild的serve默认支持热更新，修改代码后会自动重新编译并刷新页面。
• 开发环境可以关闭minify，提升编译速度和调试体验。

内容的提问来源于stack exchange，提问作者Alwaysblue