📦 打包体积·优化实战
🧩 30章 完整版
🧑🎓 友好色
🚀
30
个章节 · 从入门到工程化
01
课程导学
· 为什么需要关注打包体积？
前端性能瓶颈的真相
→
02
构建工具基础
Webpack核心概念：Entry、Output、Loader、Plugin
→
03
打包产物分析
使用Webpack Bundle Analyzer可视化分析
→
04
Source Map配置
开发与生产环境的正确打开方式
→
05
Tree Shaking原理
死代码消除的底层机制
→
06
Tree Shaking实践
如何正确使用ES Module让摇树生效
→
07
代码分割 (Code Splitting)
SplitChunksPlugin深度配置
→
08
动态导入 (Dynamic Import)
按需加载的魔法
→
09
懒加载实战
路由级与组件级的懒加载方案
→
10
图片优化
压缩、转WebP、雪碧图与Base64取舍
→
11
字体优化
字体子集化与预加载策略
→
12
CSS优化
PurgeCSS去除无用样式、CSS Modules与CSS-in-JS
→
13
JavaScript压缩
TerserPlugin配置与高级选项
→
14
HTML压缩
HtmlWebpackPlugin的minify配置
→
15
缓存策略
Content Hash、Long Term Caching实战
→
16
模块联邦 (Module Federation)
微前端下的体积控制
→
17
第三方库优化
Lodash、Moment.js等库的按需引入
→
18
Polyfill优化
core-js与@babel/preset-env的精准配置
→
19
Webpack 5新特性
持久化缓存、文件系统缓存
→
20
Vite打包分析
Rollup插件生态下的体积洞察
→
21
ESBuild与SWC
下一代打包工具的极速体验
→
22
Gzip与Brotli压缩
服务端压缩的配置与收益
→
23
CDN与边缘计算
静态资源分发的最佳实践
→
24
HTTP/2与HTTP/3
多路复用对打包的影响
→
25
预加载与预获取
Preload/Prefetch的正确使用
→
26
性能预算 (Performance Budget)
用Lighthouse设定红线
→
27
CI/CD集成
在流水线中自动检测体积变化
→
28
实战案例一
从5MB到1MB的React项目优化全记录
→
29
实战案例二
Vue3项目打包体积优化复盘
→
30
课程总结
建立持续优化的工程文化
→