了解 react-scripts 如何开始工作

Question

赏金将在 6 天后到期。 此问题的答案有资格获得+200声望赏金。 anny123想引起更多人对这个问题的关注。

所以我将我的代码移动到 esbuild 以固定我的构建。

当我这样做时，我的网站看起来很奇怪（当我使用 esbuild 运行时）。

我正在比较 webpack 和 esbuild 的 index.html 和 esbuild 之间的差异，并注意到 webpack 有这个

  <script src="/static/js/bundle.js"></script><script src="/static/js/vendors~main.chunk.js"></script><script src="/static/js/main.chunk.js"></script><script src="/static/js/bundle.js"></script><script src="/static/js/vendors~main.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>

esbuild 中缺少哪个。

这是我的 esbuild

// build.js
const esbuild = require('esbuild');
const inlineImage = require('esbuild-plugin-inline-image');
const { sassPlugin } = require('esbuild-sass-plugin');
const svgrPlugin = require('esbuild-plugin-svgr');

esbuild
  .serve(
    {
      servedir: 'public',
      port: 3000,
    },
    {
      entryPoints: ['./src/index.tsx'],
      outfile: './public/assets/app.js',
      minify: true,
      bundle: true,
      define: {
        'process.env.NODE_ENV': '"dev"',
        '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()],
    },
  )
  .catch(() => process.exit(1));

我很好奇，如何 react put /static/js/bundle.js和其他脚本，我怎样才能让 esbuild 做同样的事情？

Answer 1

webpack output 中出现的脚本是由于代码拆分。

您可以在 esbuild 中启用代码拆分，方法是在配置esbuild.serve(..., { splitting: true, ... }) splitting: true添加 split: true 或在命令行中--splitting 。

不过有一个警告； 目前 esbuild 不完全支持代码拆分：

代码拆分仍在进行中。 它目前仅适用于 esm output 格式。 跨代码拆分块的导入语句还有一个已知的排序问题。 您可以关注跟踪问题以获取有关此功能的更新。

---

当我这样做时，我的网站看起来很奇怪（当我使用 esbuild 运行时）。

代码拆分是一种性能优化，因此不太可能导致应用程序功能改变的问题。 更可能的原因是某些资产未正确加载。 根据之前 webpack 设置的复杂性，切换到 esbuild 可能需要执行额外的步骤来匹配 webpack 设置。 非标准设置越多，就越难。

特别是所谓的加载程序（ esbuild docs | webpack docs ）对于相同类型的文件可能会以不同的方式工作。