Temporal
Lesson Description
The "Component Lazy Loading Exercise" Lesson is part of the full, JavaScript Performance course featured in this preview video. Here's what you'd learn in this lesson:
In this exercise, students need to work on coding the markdown component to be loaded dynamically—further reducing the size of the initial bundle.
Preview
CloseTranscript from the "Component Lazy Loading Exercise" Lesson
[00:00:00]
>> Steve Kinney: Guess who's turn it is now, it's yours. So we know the NoteView,
>> Steve Kinney: NoteView is using this Markdown component. We know that the Markdown component right now is taking up 28 kilobytes. I've got some news for you about character entities, they're together [LAUGH] right? Which is another 25, so that's another initial 10%, right?
[00:00:27]
Or it's currently at this point 20% of our resulting bundle that we don't need immediately. So it would be great if we could use the same technique, create a loadable NoteView. Then go to the NoteView container and swap out NoteView for the loadable NoteView. And then we'll come back together and we'll be able to reanalyze it.
[00:00:47]
I'm gonna make a branch on this called live coding. I'm gonna push out what I have right now so you can pull it down. If you didn't like yarn install or mpm install, you can have those dependencies. You can take it for a spin and see how it goes, and then we'll do it together in about 20 minutes.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops