了解 react-scripts 如何开始工作

Question

. Answers to this question are eligible for a +200 reputation bounty. anny123 wants to to this question.

So i was moving my code to esbuild to fasten my builds.

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

I was comparing the diff between index.html of the webpack and esbuild and noticed that webpack one have this

  <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>

Which is missing in esbuild.

This is my 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));

I am curious, how does react put /static/js/bundle.js and other scripts and how can I make esbuild do the same?

Answer 1

The scripts present in webpack output are due to code splitting .

You can enable code splitting in esbuild by adding splitting: true to the config esbuild.serve(..., { splitting: true, ... }) or --splitting in case of command line.

One caveat though; currently esbuild does not support code splitting fully:

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).

Code splitting is a performance optimisation and as such rather unlikely cause of issues with altered functioning of the app. More likely cause is that some assets are not loaded properly. Depending on the complexity of previous webpack setup switching to esbuild may require performing additional steps to match webpack setup. The more non-standard setup the harder it gets.

Specifically so-called loaders ( esbuild docs | webpack docs ) may work differently for the same types of files.