Vite 因為其跨前端框架的能力和極其優越的性能，被稱為下一代前端構建工具。如果你想在未來幾年有更好的發展空間，那么最好盡早學會 Vite。 我們將從如何配置使用入手，深入到Vite的場景、插件以及源碼，幫助大家系統掌握 Vite，全面提升對前端構建的認知，更能自行構建項目，為進階前端架構師打下堅實的基礎。
Vite 從入門到精通，玩轉新時代前端構建法則 百度網盤
-
第1章 Vite 的概要介紹 試看5 節 | 25分鍾
本章將向大家介紹什么是 Vite、Vite 的特色，並輔以介紹前端構建工具的發展歷史進行對比，幫助同學們對 Vite 有個初步的印象。
- 視頻：1-1 關於課程你需要了解的都在這里 (08:44)試看
- 視頻：1-2 什么是 Vite (07:15)
- 視頻：1-3 Vite 對比其他構建工具的優勢 (08:52)
- 圖文：1-4 【拓展知識】前端構建工具發展史
- 作業：1-5 【討論題】談談你對於構建工具得認識
-
第2章 Vite 的基礎應用 試看9 節 | 111分鍾
本章中我們會學習，如何使用 Vite 搭建不同前端框架的項目，如何配置一些常見的功能比如 CSS、靜態文件等來達到日常使用的目的。
- 視頻：2-1 Vite 的優勢 (10:22)
- 視頻：2-2 Vite 創建 Vue3 項目 (12:22)
- 視頻：2-3 Vite 創建 Vue2 的項目 (08:30)
- 視頻：2-4 Vite 創建 React 的項目 (07:21)
- 視頻：2-5 Vite 中使用 CSS 的各種功能 (15:47)試看
- 視頻：2-6 Vite 中使用 Typescript (21:19)
- 視頻：2-7 Vite 中處理靜態資源的方法 (09:44)
- 視頻：2-8 Vite 集成 eslint 和 prettier (12:38)
- 視頻：2-9 Vite 中得 env 環境變量 (12:21)
-
第3章 Vite 的高級應用 試看10 節 | 118分鍾
本章講解 Vite 的一些高級功能，比如熱更新，服務端渲染，集成到 node 服務中等，讓同學們在遇到一些特殊情況時也能夠得心應手。
- 圖文：3-1 【知識拓展】什么是熱更新
- 視頻：3-2 Vite 中的 HMR 熱更新功能 (14:02)
- 視頻：3-3 Vite 的 glob-import 批量導入功能 (10:18)
- 視頻：3-4 Vite 性能揭秘---預編譯優化 (11:35)試看
- 視頻：3-5 在非 Node 服務中集成 Vite (18:17)
- 視頻：3-6 Nodejs 集成 Vite 開發時的 SSR (16:39)
- 視頻：3-7 Node 集成正式 build 的 Vite 應用的 SSR (15:12)
- 視頻：3-8 通過 SSR 功能實現靜態站點導出 (11:54)
- 視頻：3-9 Vite 配置項一覽 (19:55)
- 作業：3-10 【任務題】使用vite更新一個你的現有項目
-
第4章 Rollup 系統學習11 節 | 137分鍾
Vite 的內核是圍繞 Rollup 進行構建，因此，想要更好得理解 Vite 學習 Rollup 是必須的。本章將一起學習 Rollup 的核心應用。
- 視頻：4-1 Rollup 介紹 (10:36)
- 圖文：4-2 【知識拓展】ES Module詳解
- 視頻：4-3 Rollup 的命令行使用 (19:37)
- 視頻：4-4 Rollup 配置文件使用 (18:38)
- 視頻：4-5 Rollup 插件功能解析（上） (14:59)
- 視頻：4-6 Rollup 插件功能解析（下） (19:28)
- 視頻：4-7 Rollup 常用插件盤點 (13:32)
- 視頻：4-8 Esbuild 的使用教程 (19:03)
- 視頻：4-9 Esbuild 插件的開發方式 (20:43)
- 作業：4-10 【任務題】用rollup打包一個vue或者react項目
- 作業：4-11 【討論題】談談你對esbuild未來的預測
-
第5章 Vite 插件系統詳解9 節 | 123分鍾
本章詳細介紹 Vite 的插件系統，包括插件能做什么、如何實現的、並通過講解官方的Vite-Vue3-jsx 插件的源碼來講解 Vite 插件的實現原理。
- 視頻：5-1 Vite 插件開發概述 (08:58)
- 視頻：5-2 Vite 插件的執行時機 (09:22)
- 視頻：5-3 Vite 插件 API 詳解 (15:22)
- 視頻：5-4 HMR-API 詳細解析（上） (14:57)
- 視頻：5-5 HMR-API 詳細解析（下） (17:50)
- 視頻：5-6 vite-vue3-jsx 插件概覽 (09:49)
- 視頻：5-7 vite-vue3-jsx 插件源碼解析之配置和產出 (17:44)
- 視頻：5-8 vite-vue3-jsx 插件詳解之 HMR (18:18)
- 視頻：5-9 vite-vue3-jsx 插件解析之 SSR (10:20)
-
第6章 實戰 Vite 插件11 節 | 135分鍾
本章將帶領同學們實現一個真實可用的 Vite 插件。應用該插件，可以輕松實現用 MDX語法來寫頁面，並且可實現主題切換內置組件等功能，讓你快速搞定靜態頁面。
- 圖文：6-1 【拓展知識】Ast語法樹介紹
- 視頻：6-2 MDX 語法介紹和插件設計 (08:05)
- 視頻：6-3 MDX 的使用以及 mdx-loader 的原理 (16:07)
- 視頻：6-4 MDX 如何配合 React 使用 (15:55)
- 視頻：6-5 插件 Vue 版本基礎實現 (13:45)
- 視頻：6-6 Vue3 的 mdx 函數實現 (24:46)
- 視頻：6-7 Vite-mdx 插件 vue3 聯調 (10:08)
- 視頻：6-8 Vite-mdx 插件集成 react (13:59)
- 視頻：6-9 Vite-mdx 插件進一步完善 (08:14)
- 視頻：6-10 獨立開發 vite-mdx 插件並發布到 npm (17:52)
- 視頻：6-11 解決發布 vite-mdx 插件的問題 (05:15)
-
第7章 Vite 源碼解析10 節 | 139分鍾
本章將帶領大家一起來從源碼層面真正理解 Vite。我們會從 Vite的 dev server、熱更新、如何編譯文件這些角度來完整展示 Vite 的核心實現原理，讓同學們不僅會用而是真正的理解 Vite
- 視頻：7-1 Vite 源碼解析-目錄結構和構建 (11:17)
- 視頻：7-2 啟動Vite 的 createServer (19:37)
- 視頻：7-3 resolveConfig 解析配置過程解析（上） (11:20)
- 視頻：7-4 resolveConfig 解析配置過程解析（下） (11:54)
- 視頻：7-5 pluginContainer 作用和源碼解析 (14:04)
- 視頻：7-6 JS 請求處理和模塊圖譜源碼解析 (21:57)
- 視頻：7-7 vite-dev-server 中的 HMR 處理 (15:45)
- 視頻：7-8 vite 預編譯優化源碼解析 (25:24)
- 視頻：7-9 總結 (06:51)
- 作業：7-10 【任務題】挑選vite的內部plugin，進行源碼解析並分享