Vite plugin: babel transform performance issue

[hoongtong]

Environment

wyw-in-js version: v0.5.0 node: v20.10.0 OS: MacOS v14.2.1 (23C71) Bundler: vite v5.2.6

Description

When updating the vite plugin from @linaria/vite v5.0.4 to @wyw-in-js/vite v0.5.0 we noticed a huge degradation in performance. When profiling the vite build we found that the babel transform took approximately 30s using the new plugin, while it was near negligible with the old one. Below you can see the different in the cpuprofiles between the plugins.

Using wyw-in-js: Using linaria:

Here is our vite.config.ts:

 linaria({
        babelOptions: {
          presets: ["@babel/preset-typescript", "@babel/preset-react"],
        },
        exclude: ["node_modules"],
        include: ["**/*.{tsx,jsx}"],
      }),

Did anyone else experience this too? I don't immediately see any changes in the babel configuration that could be the cause. We have one very large codegen .ts files (77k lines)

[Anber]

Hi @hoongtong May I ask you to run both builds with { debug: { dir: "debug-info", print: true } } in linaria/wyw plugin's config and publish By method section from the log? It should look like

By method:
  createEntrypoint: 3365ms
  parseFile: 1482ms
  transform:evaluator: 1326ms
  transform:preeval: 7148ms
  transform:preeval:processTemplate: 1627ms
  transform:preeval:removeDangerousCode: 1236ms

[hoongtong]

Thanks for the quick response, here's the timings of @linaria/vite v5.0.4

Timings:
Total: 68894ms

By method:
  createEntrypoint: 4135ms
  parseFile: 1858ms
  transform:evaluator: 513ms
  transform:preeval: 21600ms
  transform:preeval:processTemplate: 11197ms
  transform:preeval:removeDangerousCode: 4361ms

Memory usage: {
  rss: 1303511040,
  heapTotal: 2850275328,
  heapUsed: 2778737384,
  external: 83556834,
  arrayBuffers: 2697994
}

@wyw-in-js/vite v0.5.0

Timings:
Total: 121885ms

By method:
  createEntrypoint: 1938ms
  parseFile: 2564ms
  transform:evaluator: 48097ms
  transform:preeval: 43592ms
  transform:preeval:processTemplate: 7631ms
  transform:preeval:removeDangerousCode: 9725ms

Memory usage: {
  rss: 1528971264,
  heapTotal: 2483060736,
  heapUsed: 2400392600,
  external: 81798423,
  arrayBuffers: 964627
}

A lot of time is spent in the evaluator step of the transform compared to the older version.

[o-alexandrov]

Ideally, wyw-in-js would use swc instead of babel