Why is it still using Webpack, or is it broken?

[peterbe]

I first tested in a much more evolved but still CRA based with TypeScript project. Didn't seem to be using esbuild. The yarn build still took ~10s.

Start a fresh new project:

cd /tmp/
npx create-react-app@latest my-ts-app --template typescript
cd my-ts-app
yarn build
# takes about ~5s

Then I followed the steps in the readme verbatim. And when I type yarn build you can see that it's supposedly using craco:

▶ yarn build
yarn run v1.22.10
$ craco build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:
...

But still takes about ~5s to build. I don't know what I'm doing but I did open node_modules/react-scripts/scripts/build.js and with some scatter console.log it seems it's still using webpack.

Is it busted at the moment? Or is something missing in the readme?

[cjones26]

I think it's because of this:

[esbuild-loader] ESBuildPlugin is no longer required for usage and will be removed in the next major release. Please refer to the docs and release notes for more info.

https://github.com/privatenumber/esbuild-loader/pull/125

I asked them to explain further but they didn't provide any useful information, only what I had already read.

Digging further into this, I think this is the issue, due to changes in ESBuild v0.9.0 (https://github.com/evanw/esbuild/releases/tag/v0.9.0):

Remove the esbuild.startService() API

Due to #656, Calling service.stop() no longer does anything, so there is no longer a strong reason for keeping the esbuild.startService() API around. The primary thing it currently does is just make the API more complicated and harder to use. You can now just call esbuild.build() and esbuild.transform() directly instead of calling esbuild.startService().then(service => service.build()) or esbuild.startService().then(service => service.transform()).

[Marvelanda]

Is there any cure for this? Also use craco esbuild and the build time remais the same.

[pradel]

For small build (like 5s) you won't see any difference as the biggest part of that time is actually used by webpack. This project is still using webpack along with esbuild, babel is replaced by esbuild but the bundling is still handled by webpack. For example, compiling the example of this repo using CRA takes 33 seconds, with esbuild it goes down to 16 seconds so a 50% win.

[cjones26]

@pradel -- I'm not seeing that ESBulid is being utilized at all after the changes I linked above. We utilize CRA in several extremely large production projects and after I attempted to implement this plugin I simply receive the following:

[esbuild-loader] ESBuildPlugin is no longer required for usage and will be removed in the next major release. Please refer to the docs and release notes for more info.

And see no improvement in transpilation.

[pradel]

@cjones26 okay that's not normal in that case yeah. The warning you had was fixed in the latest version so maybe you can give it another try?

[neil-buckley]

I'm actually seeing the same thing as @cjones26 with a config as below, the craco build is the same output and time taken as when I run react-scripts build

const CracoEsbuildPlugin = require('craco-esbuild')
let path = require('path')

module.exports = {
  plugins: [
    {
      plugin: CracoEsbuildPlugin,
      options: {
        includePaths: [
          path.resolve('src'),
          path.resolve(__dirname, '..', '..', 'design-system'),
        ],
        enableSvgr: true, // Optional.
        esbuildLoaderOptions: {
          loader: 'jsx',
          target: 'es2015',
        },
      },
    },
  ],
}

[withinoneyear]

Same here. Tested a few times, didn't see much difference, both took over 2 minutes to complete

[dbuezas]

You can compare before and after with the speed-meassure-webpack-plugin

// craco.config.js

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const CracoEsbuildPlugin = require("craco-esbuild");
const smp = new SpeedMeasurePlugin();

module.exports = {
  plugins: [{ plugin: CracoEsbuildPlugin }], // <-- comment this line to see w/o esbuild
  webpack: {
    configure: (webpackConfig) => smp.wrap(webpackConfig),
  },
  // eslint: {  enable: false, }, // <-- this shaves a couple of seconds for me
};

In a small-ish project I'm trying it shaves 50% of the build time (39sec -> 20sec)

[Mboulianne]

@withinoneyear @neil-buckley @cjones26 Have you find any work around for that? I'm in the same situation as you where I see no big difference between craco es-build vs CRA.