基于 Vite 的 SSG 框架开发实战--掘金小册课程推荐/优惠

你会学到什么

1. 7 大模块，拆解复杂项目搭建全流程；

2. 场景驱动，基于 Vite 定制底层构建系统；

3. 视频讲解，实战 SSG 框架开发与优化；

4. 前沿视角，解读现代化前端技术栈。

作者介绍

神三元，字节跳动前端工程师。目前深耕前端工程化构建领域，拥有大量的 Vite 工程化实战和性能优化经验，曾将 Vite 落地到抖音直播 PC 端等公司大型业务中，也是 Vite Contributor。同时也是掘金小册《深入浅出 Vite》和《React Hooks 与 Immutable 数据流实战》的作者。

小册介绍

在目前的前端生态中，Vite 正在成为下一代的前端工具链。 相比于传统的 Webpack，它让前端开发者的开发效率有了质的提升。

经过两年多的发展，Vite 的 star 数量已经达到 50 k，社区中也因此诞生了许多基于 Vite 的上层框架，产生了非常多的社区插件。因此，深入地学习和掌握 Vite 对于提升自身竞争力，拓宽技术发展道路来说都是一个非常好的选择。

基于此，本课程将带你深度应用 Vite，手把手教你从 0 搭建一个类 VitePress 的框架，搞懂 SSG 框架的内部实现奥秘，让你在深入掌握这类框架实现原理的同时，也能从造轮子的过程中全方位提升自己的工程化能力和编程水平！

此外，本课程还同时具备如下优势。

• 内容稀缺，市面上一般只是简单教你如何使用框架的教程，缺乏有深度的实战资料。

• 全程视频实战，从工程搭建到各个模块的设计和实现，每一小节内容都有实际可运行的代码分支，同时搭配视频实操讲解+文字梳理，满足多种需求。

• 技术栈前沿，课程中所使用的各种技术栈都是业界比较前沿或者已经成为业界趋势的技术，给你现代化的技术视角。

• 理论先行，所谓"磨刀不误砍柴工"，对于一些重要的技术点，如Hydration、Islands架构等等 ，会专门给大家提前打好基础，保证课程的可实操性。

具体来说，课程的内容分为七大模块。

• 原型开发篇：用最少的代码完成 CLI 工具、DevServer 等核心流程的开发，搭建 Demo 版本。

• 工作流搭建篇：搭建项目构建方案、规范工具工具链和单元测试/E2E 测试环境。

• 配置解析篇：设计项目的整体配置，完成 TypeScript 配置文件解析的逻辑。

• 主题 UI 开发篇：基于 React 和 Unocss 开发各个主题 UI 模块。

• 构建层开发篇：完成约定式路由、MDX 编译插件、开发阶段热更新以及生产环境构建等能力。

• 服务端渲染篇：基于 Islands 架构完成服务端渲染能力，产出完整的 SSG 产物。

• 持续集成和部署篇：完成 CI、CD 的流程编排，并发布安全和规范的 NPM 包

在这门课程中，你不仅能掌握诸多现代前端工程化解决方案，拥有搭建大型项目工作流的能力，还能深度应用构建工具 Vite，开发相对复杂的插件来自定义构建流程，理解现代前端 SSR/SSG 框架的实现原理，并拥有从零造轮子的实战经验，全方位提升你的技术能力！

适宜人群

1. 没有项目工程化搭建的经验，想要学习如何搭建一个真实且完整的前端工程项目；
2. 对前端框架 React 理解不够深入，想要进行项目的实战以巩固技术栈；
3. 对于服务端渲染/SSG/Islands 架构感兴趣，但苦于学习资料少、理解门槛比较高；
4. 想要深入理解类似 VitePress、Astro、Gatsby 这些优秀框架设计原理，但苦于源码阅读难度高。

学习本课程需要哪些基础？

• React 组件基本语法；
• 基本的 TypeScript 语法；
• 常用 Node.js 的模块，如 fs、path。

• MVP 版本开发(二)：主题组件渲染实现

• 开篇：项目介绍及课程安排

• MVP 版本开发(一)： CLI 脚手架、Dev Server 搭建

• 框架初体验：环境搭建和功能概览

• 代码规范: 集成项目的编程规范工具链

• 前端测试：搭建单元测试和 E2E 测试环境

• 库构建：如何为我们的工具包接入构建方案？

• MVP 版本开发(三)：CSR、SSR、SSG 渲染模式原理

• 配置解析器：通用配置文件解析逻辑开发

• MVP 版本开发(四)：SSG 核心流程开发

• rehype 插件实战(二): 实现代码高亮插件

• 数据整合：整理配置内容、生成站点数据

• rehype 插件实战(一)：实现 preWrapper 插件

• Home 页面：根据数据自动组装首页内容

• MDX 插件集成：常用 remark/rehype 插件集成

• 约定式路由(二)：Vite 构建插件开发

• 约定式路由(一)：前端路由设计和 Demo 实现

• 热更新：开发阶段 MDX 模块热更新实现

• remark 插件实战: 实现 TOC 解析插件

• 公共导航栏(二)：深色模式实现

• 原子化 CSS：为什么要选择 UnoCSS 开发？

• 正文页面：核心内容区渲染

• 多路由打包：生产环境 SSG 构建功能完善

• 页面数据流：通过 React Context 共享编译时信息

• 公共导航栏(一)：基本结构梳理和 UI 实现

• TOC 热更新问题：使用自定义 HMR 事件

• MDX 编译：整体工具链及生态介绍

• 侧边栏模块：如何实现自动化的侧边栏生成？

• Babel 插件：开发 babel-plugin-island 定制模块编译时

• TOC 模块：实现丝滑的内容大纲体验

• 自定义 head 实现: 接入 react-helmet-async

• Islands 架构：基本实现原理和运行流程

• 自定义 JSX Runtime：运行时拦截 React 的 JSX Runtime 逻辑

• Islands 打包：构造虚拟模块，打包 Islands 组件代码

• React 多实例：使用 Import Map 和预打包解决多实例问题

• 模板拼接：注入 Islands 组件 bundle 和数据信息

• 生产预览：支持本地预览生产环境产物

• 结束语: 如何保持对技术的热爱？

• 持续集成与部署：项目的 CI 部署及 NPM 发包规范

• 交互逻辑：TOC 相关交互开发