How to improve DX and build time?

[lionelhorn]

Hello!

What kind of build times do you get with your extensions?
And what did you try to speed up the build?

Fairly "complex" extension

PROD mode

 √ Built extension in 21.5 s
  ├─ .output\chrome-mv3\manifest.json                 921 B
  ├─ .output\chrome-mv3\background.js                 263.15 kB
  ├─ .output\chrome-mv3\content-scripts\content.js    6.65 MB
  ├─ .output\chrome-mv3\content-scripts\mainworld.js  166.73 kB
  └─ .output\chrome-mv3\content-scripts\content.css   286.88 kB
Σ Total size: 7.37 MB
√ Finished in 21.8 s

DEV mode first start 32s (~16s on reload)

 √ Built extension in 31.8 s
  ├─ .output\chrome-mv3\manifest.json                     939 B
  ├─ .output\chrome-mv3\background.js                     914.7 kB
  ├─ .output\chrome-mv3\background.js.map                 1.98 MB
  ├─ .output\chrome-mv3\content-scripts\content.js        20.38 MB
  ├─ .output\chrome-mv3\content-scripts\content.js.map    35.45 MB
  ├─ .output\chrome-mv3\content-scripts\mainworld.js      17.41 MB
  ├─ .output\chrome-mv3\content-scripts\mainworld.js.map  30.37 MB
  ├─ .output\chrome-mv3\content-scripts\content.css       361.42 kB
  └─ .output\chrome-mv3\content-scripts\mainworld.css     85.91 kB
Σ Total size: 106.96 MB

Extension is in a nx monorepo. Imports are all via tsconfig alias. So no code prebuilt.
Wondering if I could save a lot by prebuilding local deps used by the extension. But wondering if treeshaking would still work.

[aklinker1]

Usually, build times increase with the number of entrypoints, so it's surprising to see a 30s dev startup for just 4 entrypoints...

For reference, one of my extensions has ~9 entrypoints, and it takes 15s to start the browser in dev mode, and I would consider it a large extension as well.

So I feel like something about your setup is wrong. Do you use lots of barrel files (re-exporting an entire folder from an index file)? That could maybe cause vite to have to load more source files than necessary, slowing things down. That's the only thing I can think of...

#357 will help with this, but it's opt-in because it will effectively cause content scripts to ignore their run_at option. But even then, main world content scripts are built separate from isolated world ones, so you would have 2 build steps.

[lionelhorn]

I indeed probaly use too many export * from

In an attempt to speed things up without having to do a major refactor of my exports and barrels yet, I had a look into this vite plugin
https://github.com/antfu/vite-plugin-inspect

It can be added like this

 vite: ((env) => {
    console.log(env);

    return {
      cacheDir: ".vite-cache",
      // optimizeDeps: {
      //   include: []
      // },
      plugins: [
        react(),
--->     Inspect({
            build: true,
            outputDir: `.vite-inspect/${Date.now()}`
          }
        )
      ],     
    };
  })

env: ConfigEnv passed into vite only has this info:

{browser: "chrome", command: "serve", manifestVersion: 3, mode: "development"}

1. Is there a way to differentiate calls to vite() for different entrypoints bundling?
   Because if I set outputDir: ".vite-inspect" as plugin arg the results from one bundling may be overwritten by the results for background bundle for instance.

2. Is it possible to use optimizeDeps with wxt?

       optimizeDeps: {
         include: [...]
       },

3. I noticed one of the thing that slowed down my build was a dep that only has commonjs so it takes a few seconds each time for vite to convert it to esm. Is it possible somehow to have this operation cached? So it doesn't do it again on next build as this dep from "node_modules" doesn't change.

[aklinker1]

Is there a way to differentiate calls to vite() for different entrypoints bundling?

See

wxt/src/core/builders/vite/plugins/bundleAnalysis.ts

Line 6 in 2b374b9

let increment = 0;

I store a variable outside the plugin in the global context, and increment it on each build. Similar to your date approach. I suppose I could add the entrypoints being built in the EnvConfig.

Is it possible to use optimizeDeps with wxt?

Yes, but content scripts are bundled using vite.build, which I beileve ignores optimized dependencies, so even in development it won't have any effect. I think. Give it a try though.

A caching plugin like this might be more effective: vitejs/vite#12943

I'm traveling right now, so I can't write much code for the next few days. If you're able to find something that's effective, I can add it to WXT.

I have a similar extension that's all content scripts and is slow to build, so I'll try out a caching plugin sometime soon and see how it effects build times.

[lionelhorn]

I'll have a look at the code you mentionned.

I also tried to find quick wins without internal code refactoring.
Reading this blog series was very interesting : https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-7/

I ran node cpu profiler:
node --cpu-prof node_modules\wxt\bin\wxt.mjs

And viewed the profile with https://www.speedscope.app/
Whole trace viewed in "left heavy"

tryFsResolve highlighted is from vite

Vite 5.1 has related improvements enabled by default.
https://vitejs.dev/blog/announcing-vite5-1#faster-resolving-with-cached-checks

Improvements for windows are very nice.

I tried to bump vite from 5.0.12 to 5.1 on my extension project but then wxt command failed without any errors.
I couldn't reproduce that issue on my repro extension or in the demo inside wxt repo.

But I don't know what may be the issue as I get no errors.

[aklinker1]

Thanks for doing more research! I'll add support for 5.1, or you can open a PR. Got some stuff done between flights, but didn't get to this yet.

[lionelhorn]

Just tried again. With vite 5.1.0 & 5.1.1

Now instead of erroring like yesterday. The wxt command doesn't finish ^^
Not sure if it's my repo structure that makes this weird cases.

Vite 5.0.12

WXT 0.16.4 12:07:07
✔ Started dev server @ http://localhost:3000
ℹ Pre-rendering chrome-mv3 for development with Vite 5.0.12
✔ Built extension in 11.0 s 12:07:19
├─ .output\chrome-mv3\manifest.json 704 B
├─ .output\chrome-mv3\devtools.html 501 B
├─ .output\chrome-mv3\global-vars-pane.html 664 B
├─ .output\chrome-mv3\tab-exec-pane.html 661 B
├─ .output\chrome-mv3\background.js 15.13 kB
├─ .output\chrome-mv3\chunks\reload-html-Chpi56G0.js 1.71 kB
├─ .output\chrome-mv3\react16-utils.js 9.05 MB
└─ .output\chrome-mv3\assets\react16-utils.css 67.26 kB
Σ Total size: 9.14 MB

Vite 5.1.1

WXT 0.16.4 12:09:56
✔ Started dev server @ http://localhost:3000 12:09:57
ℹ Pre-rendering chrome-mv3 for development with Vite 5.1.1 12:09:57
⠦ [3/3] react16-utils

I stopped the process at around 1 min and was still at the same step.

[aklinker1]

Upgraded vite in v0.16.7. Didn't run into any issues, so not sure what was happening to you.