How do I analyze the bundle?
I noticed my app bundle increased from 8mb to 40mb after I installed a couple of deps. Is there a way I can figure out exactly what is causing the larger bundles?
15 Replies
Any way to access:
- https://parceljs.org/features/production/#bundle-analyzer
- https://parceljs.org/features/production/#bundle-buddy
Okay actually it might not be my code
[email protected] -> 4.4mb
[email protected] -> 40.7mb
Any information I can help surface @louis ?
71.0 -> 5.5mb
71.1 -> 5.5mb
71.2 -> failed
71.3 -> 5.5mb
72.0 -> 41.3mb
72.1 ->
72.2 ->
73.0 ->
73.1 ->
Stopped here but let me know if you want me to fill it out further
No hoist
nvm its something in my index.production.tsx
yeah you can use bundle-buddy with the bundle-buddy flag
Plasmo Docs
Create a Production Build – Plasmo
How to build a production version of your browser extension.
Weird, the lazy imports is the only difference between my production and non production build. Bundle buddy says the bundle is 2mb but the entire folder (compressed) is 40
Ill just disable the lazy imports
it's likely each of those lazy import carries some react wrapper code for the lazy import stuff :-?... (I suspect...)
I'm not entirely sure what might be bloating it tbh
Yeah Im not sure either tbh
its all good
BTW do you know if theres a way I can preload the main js bundle?
start the network request a little bit earlier
for newtab?
Yep
For prod, I would lazy load some of the page and have a loader
you can't really preload the main bundle because it's the entry
but the rest of it can be async - since you already have the router setup to lazy load as needed
maybe see which route is the biggest and lazy load them (?)
You can also override the newtab html template as well:
Plasmo Docs
Replacing the HTML Templates – Plasmo
Plasmo uses HTML templates to mount your components. Learn how to customize them.
This will allow you to do some smoke and mirror preload static stuff in the html with CSS and some element until DOM is ready to load react page
Also, another way to split your new tab into smaller bundle is to use the tab pages feature:
Plasmo Docs
Tab Pages – Plasmo
Learn how to use tab pages with Plasmo to create new tab views in your browser extension.
So instead of using memory router, use a tab page and re-map your react router with the
tabs/* routes for the heavy ones
We should prob re-map all them tabs/etc.html -> /tabs/etc in a future version :-?....Damn I didnt know about tab-pages
I'll look into it
It would've been cool to have a nextjs style router for the newtab but I feel like thats asking too much from a framework
that might be a sensible iteration for the plasmo framework, but it won't be a single page tab, but rather tab that are served by the bgsw itself
basically use the bgsw as a server to serve these pages/assets. It's just that bgsw is kinda flaky :d......
The 2 main problems of this are the router itself, and a context provider to hydrate state between the 2 runtimes using storage as source of truth