Rollup code splitting question relating to Vite/WXT

[npearson72]

Since this project uses Vite, which relies on Rollup to build, I'm wondering if the issue described here is somehow resolved/mitigated in WXT: rollup/rollup#2756

I also came across this issue, but wasn't sure if it's entirely related: #357

Also, from the issue I referenced in Rollup, it seemed like these problems do not exist in Webpack. Can someone confirm/deny if this is the case?

[aklinker1]

WXT works around this by using multiple builds with a single input each instead of a single build with multiple inputs.

#357 is related to enabling code splitting for content scripts. Each content script is built individually, preventing any code from being shared. That issue would add the ability to code-split content scripts and share chunks with other ESM entrypoints (like HTML pages).

[npearson72]

I see. As someone new to browser extensions, I wasn't aware of the need to have multiple content scripts. Why might that be useful?

I looked this up and understand now. But as a follow-up, what currently happens? Does WXT bundle all content scripts (and their dependencies) into a single chunk?

Or is that each content script is it's own chunk, but includes all the dependencies it needs; creating duplication?

PS: Thank you for answering this. WXT sounds really solid.

[aklinker1]

I looked this up and understand now. But as a follow-up, what currently happens? Does WXT bundle all content scripts (and their dependencies) into a single chunk?

Or is that each content script is it's own chunk, but includes all the dependencies it needs; creating duplication?

No, each content script is built individually, bundled into the IIFE format.

You can see the build steps in WXT's CLI:

1. Background is bundled individually:
   
2. The one content script is bundled individually:
   
3. The popup is bundled individually. In this case, there are no other HTML pages, so it's alone.
   

If you want to know the specifics of what types of entrypoints are grouped together into a single build vs what are built individually, see group-entrypoints.ts. It's a very simple function

[npearson72]

I think I got it now. Thanks.