variances in typescript checking times

[pollen8]

Hi I've only started playing with craco and this plugin tonight, so I may well be missing something pretty obvious.

We have a large CRA typescript project which I'm experimenting with. The craco.config.js looks as follows:

// craco.config.js
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const CracoEsbuildPlugin = require("craco-esbuild");
const smp = new SpeedMeasurePlugin();
const { ProvidePlugin } = require('webpack');

module.exports = {
  webpack: {
    configure: (webpackConfig) => smp.wrap(webpackConfig),
  },
  plugins: [
    {
      plugin: CracoEsbuildPlugin,
    }
  ],

};

If I disable CracoEsbuildPlugin and run

GENERATE_SOURCEMAP=false INLINE_RUNTIME_CHUNK=false IMAGE_INLINE_SIZE_LIMIT=0 NODE_OPTIONS=--max-old-space-size=4096 craco build

I get the following

 SMP  ⏱  
General output time took 1 min, 33.73 secs

 SMP  ⏱  Plugins
TerserPlugin took 37.81 secs
ForkTsCheckerWebpackPlugin took 21.21 secs
IgnorePlugin took 3.79 secs
ESLintWebpackPlugin took 2.19 secs
OptimizeCssAssetsWebpackPlugin took 0.752 secs
HtmlWebpackPlugin took 0.13 secs
ManifestPlugin took 0.005 secs
MiniCssExtractPlugin took 0.002 secs
InterpolateHtmlPlugin took 0.001 secs
DefinePlugin took 0.001 secs
ModuleNotFoundPlugin took 0 secs

 SMP  ⏱  Loaders
babel-loader took 29.52 secs
  module count = 2247
modules with no loaders took 7.43 secs
  module count = 119
mini-css-extract-plugin, and 
css-loader, and 
postcss-loader took 2.43 secs
  module count = 1
css-loader, and 
postcss-loader took 1.39 secs
  module count = 6
url-loader took 0.097 secs
  module count = 1
html-webpack-plugin took 0.023 secs
  module count = 1

with CracoEsbuildPlugin enabled I'm seeing

 SMP  ⏱  
General output time took 1 min, 27.34 secs

 SMP  ⏱  Plugins
ForkTsCheckerWebpackPlugin took 1 min, 4.92 secs
IgnorePlugin took 2.31 secs
ESLintWebpackPlugin took 1.89 secs
HtmlWebpackPlugin took 0.116 secs
ManifestPlugin took 0.006 secs
MiniCssExtractPlugin took 0.006 secs
InterpolateHtmlPlugin took 0.001 secs
ModuleNotFoundPlugin took 0 secs
DefinePlugin took 0 secs

 SMP  ⏱  Loaders
modules with no loaders took 15.49 secs
  module count = 1780
esbuild-loader took 11.15 secs
  module count = 522
mini-css-extract-plugin, and 
css-loader, and 
postcss-loader took 1.8 secs
  module count = 1
css-loader, and 
postcss-loader took 1.1 secs
  module count = 6
url-loader took 0.116 secs
  module count = 1
html-webpack-plugin took 0.015 secs
  module count = 1

so whilst esbuild is quiker (yay!) ForkTsCheckerWebpackPlugin is approx 3 times longer and modules with no loaders twice as long

I'm stumped as to why I'm seeing such a difference here - does anyone have any ideas?

Thanks!

[Mboulianne]

I get results very similar to yours:

Craco only, no es-build

 SMP  ⏱
General output time took 36.45 secs

 SMP  ⏱  Plugins
IgnorePlugin took 6.18 secs
TerserPlugin took 4.87 secs
ESLintWebpackPlugin took 2.6 secs
OptimizeCssAssetsWebpackPlugin took 0.313 secs
HtmlWebpackPlugin took 0.153 secs
ManifestPlugin took 0.015 secs
ForkTsCheckerWebpackPlugin took 0.01 secs
ModuleNotFoundPlugin took 0 secs
MiniCssExtractPlugin took 0 secs
ProvidePlugin took 0 secs
InlineChunkHtmlPlugin took 0 secs
InterpolateHtmlPlugin took 0 secs
DefinePlugin took 0 secs

 SMP  ⏱  Loaders
babel-loader took 25.56 secs
  module count = 3379
modules with no loaders took 6.94 secs
  module count = 189
svg-inline-loader took 3.8 secs
  module count = 491
@svgr/webpack, and
file-loader took 0.941 secs
  module count = 1
mini-css-extract-plugin, and
css-loader, and
postcss-loader took 0.612 secs
  module count = 1
css-loader, and
postcss-loader took 0.553 secs
  module count = 1
html-webpack-plugin took 0.034 secs
  module count = 1

Craco with es-build

 SMP  ⏱
General output time took 30.39 secs

 SMP  ⏱  Plugins
IgnorePlugin took 4.83 secs
ESLintWebpackPlugin took 2.6 secs
HtmlWebpackPlugin took 0.15 secs
ForkTsCheckerWebpackPlugin took 0.026 secs
ManifestPlugin took 0.015 secs
MiniCssExtractPlugin took 0.002 secs
InlineChunkHtmlPlugin took 0.001 secs
ModuleNotFoundPlugin took 0 secs
ProvidePlugin took 0 secs
InterpolateHtmlPlugin took 0 secs
DefinePlugin took 0 secs

 SMP  ⏱  Loaders
modules with no loaders took 20.96 secs
  module count = 3373
@svgr/webpack, and
svg-inline-loader took 7.29 secs
  module count = 491
esbuild-loader took 5.44 secs
  module count = 147
@svgr/webpack, and
file-loader took 1.19 secs
  module count = 1
mini-css-extract-plugin, and
css-loader, and
postcss-loader took 0.922 secs
  module count = 1
css-loader, and
postcss-loader took 0.869 secs
  module count = 1
html-webpack-plugin took 0.015 secs
  module count = 1

So I went from modules with no loaders took 6.94 secs to modules with no loaders took 20.96 secs

I'm wondering if the issue wouldn't be caused by the fact that we fail to exclude node_modules or something like that.

[CHE1RON]

I'm bumping this as I encountered the same problem as @pollen8 ..