Sign In Sign Up
Phil

Bundle Analyzer

I would love for a service/product that could take my project (NextJS/ReactJS) and analyze the bundle size and the provide me with some actionable tasks!

I struggle to fix this issue and I know my project does suffer from a large bundle - people have said.

I have used @next/bundle-analyzer which prints a pretty picture but no idea what to do. Result From: https://launchafrica.io/

I have followed many blogs about what one can do but nothing I do seems to change anything!

Anyone have some advice here? Anyone know some quick things I could do?

0 Likes 3 Comments
Kevin

You probably know bundlephobia? To check for alternatives for deps

0 Likes
Phil Author

@kevcodez Oh no, havent heard of it. But its not alternatives i need really, as there are not many for my packages. But will have a quick look and see.

0 Likes
Kevin

Does seem weird that you need this much JavaScript for the landing page and all of those chunks get loaded…. (Not a next user tho)

Purging CSS will also help with performance

0 Likes
Kevin

@kevcodez Feels like there's something wrong in your app and chunks are duplicated or being loaded too early

0 Likes
Phil Author

@kevcodez I know right! I feel like there could be a simple "config" i am not doing right but cant figure it out.

0 Likes
Kevin

@strange_quirks Is it open source?

0 Likes
Phil Author

@kevcodez No, but if you are up for looking into it i could put it somewhere for you. Thats if you have time or so.

0 Likes
Nathaniel Blackburn

OK so the bigger the box the more space it takes up in the bundle. Zoom in on the bigger ones and ask yourself the following…

  • Do you NEED this dependency.
  • Is the dependency installed in the right place (devDependencies vs dependencies)
  • Do you NEED everything this dependency provides or can you just import the functions you actually use.

Looking at the image you provided it seems there is quite a bit of duplication going on so I would look how you have things configured as something is wrong.

0 Likes

Please sign in to leave a comment.