vitesse-webext icon indicating copy to clipboard operation
vitesse-webext copied to clipboard

Compiling content script with many modules is painfully slow

Open Merlin04 opened this issue 2 years ago • 4 comments

Hello, I'm using vitesse-webext to develop a fairly large browser extension where the majority of the code is in the content script (using React and other libraries like MUI and Framer Motion). However, the build times for my content script have become painfully slow, taking between 10 and 25 seconds per rebuild:

build started...
✓ 11020 modules transformed.
../extension/dist/contentScripts/index.global.js   744.09 KiB / gzip: 230.18 KiB
../extension/dist/contentScripts/index.global.js.map 3180.64 KiB
built in 17941ms.

Most of the time spent building is after it has printed out the "modules transformed" message - it sits there without any output for a considerable amount of time, then prints rendering chunks (1)..., then a half a second later prints out the rest of the output.

Is there any way I can make this build faster?

Merlin04 avatar Feb 21 '22 20:02 Merlin04

I experience the same issue, once I migrated to monorepo, the build times increased dramatically.

sixers avatar Jun 06 '22 16:06 sixers

I experience the same issue, once I migrated to monorepo, the build times increased dramatically.

Which monorepo did you use? Turborepo? I'd love to see how you configured it.

seomikewaltman avatar Nov 22 '22 23:11 seomikewaltman

Hello @Merlin04, Sorry to reopen the topic so late, but dod you find anything to improve the build time? I face the same problem... Cheers !

HenriChabert avatar Dec 24 '23 10:12 HenriChabert

it's been a while so I don't entirely remember how it worked, but I think I made my own rollup configs/bundling system for development that compiled dependencies separately to an output folder with a file for each dependency in the package.json, wrote a babel plugin to transform imports in my content script to reference these new files, and used a custom implementation of systemjs to actually import these dependencies. this way the content script is compiled separate from dependencies and so it rebuilds really fast when you make changes. it's a pretty terrible hack, but it worked alright!

here's the code if you want to reference what I did: https://github.com/Merlin04/bandcamp

Merlin04 avatar Dec 24 '23 19:12 Merlin04