代码分割·懒加载
🎯 30 章实战
01
前端性能瓶颈：为什么需要代码分割？
加载时间 · 首屏渲染 · 用户体验
02
Webpack核心配置
entry · output · chunk · bundle
03
动态 import() 语法
ES2020 · 按需加载核心API
04
React.lazy + Suspense
组件级懒加载 · 加载状态
05
Vue异步组件
defineAsyncComponent · 错误处理
06
SplitChunksPlugin 深入
chunks · minSize · cacheGroups
07
路由级代码分割
React Router · Vue Router 懒加载
08
预加载与预获取
webpackPrefetch · webpackPreload
09
Magic Comments 魔法注释
chunkFilename · webpackChunkName
10
第三方库分割
lodash · moment 单独打包
11
CSS代码分割
MiniCssExtractPlugin · 按需加载
12
图片与字体懒加载
IntersectionObserver · 字体策略
13
Web Worker 分割
计算密集型 · 避免阻塞主线程
14
微前端中的代码分割
Module Federation · 跨应用共享
15
Tree Shaking 原理
ES Module静态分析 · sideEffects
16
Webpack Bundle Analyzer
可视化分析 · 定位体积过大模块
17
Vite中的代码分割
ESBuild · rollupOptions配置
18
Next.js动态导入
next/dynamic · SSR懒加载
19
Nuxt.js懒加载
definePageMeta · 异步组件
20
Angular懒加载模块
loadChildren · 模块化组织
21
Svelte代码分割
dynamic import · SvelteKit懒加载
22
加载状态管理
骨架屏 · Loading · 错误边界
23
性能监控与指标
LCP · FID · CLS 优化
24
缓存策略
Service Worker · 离线缓存
25
HTTP/2与多路复用
优化多个chunk并行加载
26
Monorepo中的代码分割
Nx · Turborepo · 共享库
27
条件性代码分割
设备/浏览器/A/B测试动态加载
28
代码分割与SEO
SSR + 懒加载平衡
29
实战案例一：React 10页面应用
路由级+组件级懒加载
30
实战案例二：Vue3后台管理系统
首屏 8s → 1.5s