Learn how to configure and extend Vite to build modern web applications. Streamline the processing of static assets and optimizing performance with pre-bundling. Understand advanced use-cases like API proxies and creating custom Vite plugins.

1. Steve Kinney
Vite
A Frontend Masters Workshop

2. Vite calls itself next generation
frontend tooling.

3. Or: All of the things that shouldn’t be
hard, but are. Maybe they don’t have to
be?

5. Act One: Vite is simple.

6. Act Two: Vite is powerful.

7. Act Three: Vite is flexible.

8. Act Four: Vite is extensible.

9. What are we going to cover today?
A high level-overview.
Getting up and running with Vite.
Building for production.
Working with CSS.
Integration with TypeScript and
assorted frameworks (e.g. React,
Vue, Svelte, et cetera).
Optimizing static assets.
Building libraries for the browser
or Node.
The fundamentals of building a
design system with Vite.
Module federation and other
architectural techniques.
Extending Vite using the Plugin
API.

10. What even is Vite?

13. Vite then serves those modules
as native ES Modules.

14. Vite then serves those modules
as native ES Modules.
The browser is doing the job of
the bundler.

16. Vite still produces bundles for
production.

18. Build Optimizations
Behind the scenes, Vite is doing a lot for you.
CSS code splitting.
Preload directives.
Asynchronous chunk generation
and parallelizing dependency
loading.

20. Hot Module Reloading
Server Side Rendering

21. Course Website
https://vite-workshop.vercel.app

22. Let’s get into it.