Lesson Description
The "Rspack, Webpack, & Vite" Lesson is part of the full, Enterprise UI Development: Microfrontends, Testing, & Code Quality course featured in this preview video. Here's what you'd learn in this lesson:
Steve describes several tools for orchestrating build ordering and workspace management in development, including RSPack, Webpack, Vite, pnpm, npm, and Bun. Steve stresses the importance of building only what is necessary to improve performance, especially in continuous integration and deployment, by avoiding testing unchanged parts to speed up the process
Transcript from the "Rspack, Webpack, & Vite" Lesson
[00:00:00]
>> Steve Kinney: Uh, so we're going to talk about how to solve the like build ordering, building everything all at once, no matter what stuff. I do want to take one brief aside for a public service announcement, which is, you know, the first example we use RSPC which is affected like Webpack. Uh, we looked at Vite in the second one. We also talked about the different ways you can do some of that workspace management across pnpm, uh, Bun, and npm and like obviously doing it in all three makes no sense because they are, the Venn diagram's got a lot of overlap, but if you were curious, you're like, oh, I use one, or I'm just kind of curious, I did put together the table comparing npm, pnpm, and Bun and like obviously there's also Yarn and stuff along those lines.
[00:00:57]
But as you can kind of see, like there are minor differences in like the syntax where like npm uses workspace, um, and pnpm uses a filter that like is graph and Git aware and stuff, you know, like all of those things and like Bun's a little bit more configurable. They all will do all the things with slightly different flavors. Um, so if you are already in one ecosystem, I believe you can do it all with Yarn too.
[00:01:28]
I just haven't used Yarn nearly as much personally. These are the three that I have the most experience with. Um, and the same for Rspack. Is that how we're going to say it out loud? Um, Webpack and Vite, like you can use any of them. I have like predominantly just used Vite. Um, but like they're all roughly the same, but if you're curious about some of the different flavors, you can also check that out as well.
[00:02:01]
Um, so I want to solve some of the problems like for this exercise too, our job was to kind of look at how it's different, the problems, it was just to examine it. There are some stretch goals you want to play around with like adding a component, but again, I seek to have, you know, we're using React because it's there to use. I'm not trying to go all the way into the weeds of React specifics, so some of the stuff I kind of left as supplementary, um, we're going to jump over to solving the problem that I just talked about because it felt like the right thing to do.
[00:02:32]
Uh, and we're going to look at some of the tooling in this case for navigating like how do you build stuff in the right order? How do you only build the stuff that you want to build, you know, because like you know, like, I do a course on like performance and like my philosophy is doing nothing is faster than doing something. You want to make your CI/CD faster, don't test the stuff that didn't change.
Learn Straight from the Experts Who Shape the Modern Web
- 250+In-depth Courses
- Industry Leading Experts
- 24Learning Paths
- Live Interactive Workshops