Vite, a New Era of Frontend Tooling?
summary
Vite is presented as a fast front-end tooling approach that serves unbundled ES modules during development and only bundles for production. It uses esbuild for the dev server and Rollup for production builds, offers project scaffolding (create-vite), auto-detects and can install Sass, provides a preview server for production bundles, supports HMR that preserves React state via React Refresh, typed import.meta.env, dev proxying, plugins, and warns about gotchas like differing dev/prod build engines, required server restarts on config changes, and potential context loss in non‑React frameworks.
AI-written summary · about
chapters (19)
- 0:00Introduction
- 0:51Build tool history
- 3:47Vite's birth and evolution
- 4:29Vite goals and features
- 6:16Vite technical workings
- 6:58Vite project setup
- 10:12Demo: Launch and HMR
- 13:25SCSS integration
- 14:27Production build and preview
- 15:51Environment variables
- 18:26Backend integration
- 20:13HMR API and plugins
- 23:00Demo: Using plugins
- 25:06Creating a custom plugin
- 27:27Feature recap
- 29:14Vite advantages
- 30:18Vite limitations
- 31:44Conclusion: Frontend new era?
- 33:39Q&A
