Exercice 1 Final has a huge chunk

[ValentinH]

Hey 👋

I'm following the first lesson right now about code-splitting and I noticed something odd: one of the initial chunk is huge. It's 867KB gzipped and 3.5MB once decompressed 😱 .

I'm using this page: https://react-performance.netlify.app/isolated/final/01.js

As this exercice is about avoiding loading unnecessary JS, this is misleading. In the end, what we save with code-splitting is quite small compared to this chunk.

In the video, I don't see it so it might be a regression.

[kentcdodds]

Keep in mind that all workshops are pretty contrived examples and are intended to demonstrate concepts. The workshop app is large and has a lot of moving pieces. I'm not concerned about the performance of the workshop itself. I'm much more concerned about you learning how to use the tools to analyze an app and identify opportunities for optimizations.

That said, this does look like a regression. After investigating that chunk, it looks like the vast majority of it is SVG icons. I'm guessing those aren't getting tree-shaken like they should. Here's where they're imported

[kentcdodds]

I'm not sure when this happened, but I believe the reason it's not tree-shaking is because I'm building the @kentcdodds/react-workshop-app to commonjs. I'm working on this now.

[kentcdodds]

That's way better :)

[kentcdodds]

@all-contributors please add @ValentinH for bugs

[allcontributors]

@kentcdodds

I've put up a pull request to add @ValentinH! 🎉

[ValentinH]

Keep in mind that all workshops are pretty contrived examples and are intended to demonstrate concepts. The workshop app is large and has a lot of moving pieces. I'm not concerned about the performance of the workshop itself. I'm much more concerned about you learning how to use the tools to analyze an app and identify opportunities for optimizations.

That said, this does look like a regression. After investigating that chunk, it looks like the vast majority of it is SVG icons. I'm guessing those aren't getting tree-shaken like they should. Here's where they're imported

Yes I understand that these are pretty contrived but I was still surprised to see such a big chunk on a page that is not doing much to be fair.
Don't you think that the "isolated pages" (like https://react-performance.netlify.app/isolated/final/01.js) should not included the chunks required by the full workshop app?

Thanks for the quick fix BTW 🙂

[kentcdodds]

Don't you think that the "isolated pages" (like react-performance.netlify.app/isolated/final/01.js) should not included the chunks required by the full workshop app?

Yeah, they really shouldn't. That was the original goal (and part of the reason the entry file is so complicated/vanilla): https://github.com/kentcdodds/react-workshop-app/blob/e0b6a83193b23d5b02ed06db732c231e4053fc41/src/index.js

But I had a little trouble making it work at some point and gave up trying to lazy-load the ./react-app import. Unfortunately, we won't be able to lazy load the ./server import because we can't really detect whether that will be needed. So there will always be some extra stuff on even the isolated pages making everything work without a problem.

There's a surprising amount of complexity involved to make sure the experience for learners is as smooth as possible 😅

[ValentinH]

I understand 😄

Rest assured, my experience so far is SUPER SMOOTH! 🎉