01
单文件时代
什么是单文件应用 · HTML/CSS/JS混写痛点 · 单页面计算器案例
基础案例
02
模块化萌芽
为什么需要模块化 · 全局污染 · IIFE · CommonJS/AMD/CMD初探
规范历史
03
CommonJS规范
Node.js模块系统 · module.exports/require · 加载机制 · 循环依赖
Node.js核心
04
AMD与RequireJS
异步模块定义 · define/require · 配置文件 · 重构计算器
异步实战
05
ES6模块化
export/import · 默认/命名导出 · 动态import · 静态分析
ES6+标准
06
Webpack核心概念
入口/出口 · loader/plugin · webpack.config.js
打包配置
07
Webpack实战配置
CSS/Less/Sass · 图片字体 · Babel · 开发服务器与热更新
工程化HMR
08
Webpack高级优化
Code Splitting · 懒加载 · Tree Shaking · Content Hash
性能缓存
09
Vite入门
为什么是Vite · ESM开发服务器 · 冷启动 · HMR · 对比Webpack
ViteESM
10
Vite实战配置
配置文件 · 静态资源 · CSS预处理器 · 构建生产 · 环境变量
配置构建
11
组件化思想
什么是组件 · 封装/复用/组合 · 与模块化区别 · 设计原则
思想设计
12
React组件基础
函数/类组件 · JSX · props/state · 生命周期
React基础
13
React Hooks入门
useState · useEffect · 自定义Hook · 使用规则
Hooks状态
14
React组件通信
父传子 · 子传父 · Context · 状态提升
通信模式
15
Vue组件基础
Vue实例 · 模板语法 · 全局/局部注册 · props/$emit
Vue入门
16
Vue组件进阶
插槽/作用域插槽 · 动态/异步组件 · provide/inject · Vuex
进阶状态
17
组件库开发
架构设计 · 样式隔离 · 按需加载 · 文档编写
组件库工程
18
Storybook组件环境
安装配置 · 编写故事 · 插件系统 · 可视化测试
Storybook测试
19
组件测试
Jest配置 · React Testing Library / Vue Test Utils · 快照/交互测试
测试质量
20
设计系统与规范
Design Tokens · 命名规范 · API设计 · 版本管理
设计系统规范
21
Monorepo管理
Monorepo概念 · Lerna/Nx/Turborepo · 工作空间 · 依赖策略
Monorepo工具
22
组件打包工具
Rollup配置 · ESM/CJS/UMD · 外部依赖 · 类型声明
Rollup发布
23
组件发布流程
npm发布 · 语义化版本 · CHANGELOG · CI/CD集成
发布CI
24
微前端入门
微前端概念 · iframe · Web Components · Module Federation · qiankun
微前端架构
25
Module Federation实战
Webpack 5配置 · 共享组件/库 · 运行时加载 · 版本冲突
联邦微前端
26
低代码平台组件化
组件物料市场 · 拖拽搭建 · 组件协议 · 渲染引擎
低代码引擎
27
性能优化
虚拟列表 · memo/useMemo · 包体积 · 加载性能 · 监控
性能优化
28
跨平台组件化
React Native · Flutter · Taro/uni-app · Web Components
跨平台适配
29
组件安全与可访问性
XSS防御 · 输入验证 · ARIA · 键盘导航 · 屏幕阅读器
安全a11y
30
未来趋势
Islands架构 · Server Components · AI辅助 · WebAssembly
前沿趋势