javascript - 了解 react 脚本如何开始工作

Question

所以我将我的代码移至 esbuild 以加强我的构建。

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

我正在比较 webpack 和 esbuild 的 index.html 之间的差异，并注意到 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 是如何把 /static/js/bundle.js 和其他脚本放在一起的，我怎样才能让 esbuild 做同样的事情？

Answer 1

webpack 输出中出现的脚本是由于 code splitting 引起的.

您可以启用 code splitting in esbuild通过将 splitting: true 添加到配置 esbuild.serve(..., { splitting: true, ... }) 或 --splitting 如果是命令行。

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

Code splitting is still a work in progress. It currently only works with the esm output format. There is also a known ordering issue with import statements across code splitting chunks. You can follow the tracking issue for updates about this feature.

---

When I do so, my website looks weird (when I run using esbuild).

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

特别是所谓的加载器 ( esbuild docs | webpack docs ) 可能对相同类型的文件有不同的工作方式。