01
依赖膨胀的根源
从npm/node_modules“黑洞”讲起，分析传递依赖、版本锁定与重复打包三大根源。
根源npm
02
依赖分析工具入门
使用npm ls、yarn why、pnpm ls快速定位“谁依赖了谁”及冗余包。
工具CLI
03
可视化依赖图谱
dependency-cruiser、madge生成SVG依赖图，直观展示模块“蜘蛛网”。
图谱SVG
04
重复依赖检测
npm dedupe、pnpm dedupe及分析package-lock.json找出多版本重复包。
去重lock
05
幽灵依赖揭秘
什么是幽灵依赖？案例演示“本地能跑，上线就挂”的深层原因。
幽灵隐患
06
package-lock.json深度解析
逐行拆解lock文件，理解resolved、integrity、dependencies字段。
lock结构
07
yarn.lock vs package-lock.json
两大锁文件差异对比，以及pnpm锁文件的优势。
对比pnpm
08
pnpm硬链接与符号链接
pnpm如何通过硬链接和符号链接实现“只存一份，到处引用”。
pnpm磁盘
09
Monorepo架构入门
Monorepo通过共享依赖减少膨胀，使用Lerna或Nx搭建简单项目。
MonorepoLerna
10
Workspaces实战
npm/yarn/pnpm Workspaces将多子项目共享依赖提取到根目录。
Workspaces共享
11
依赖分类与按需加载
区分dependencies、dev、peer，利用动态import()实现按需加载。
分类import
12
Tree Shaking原理与实践
Webpack/Rollup静态分析“摇掉”未用代码，sideEffects字段的坑。
Tree ShakingsideEffects
13
代码分割与懒加载
React.lazy、Vue异步组件、Webpack import()将大包拆成小块。
分割懒加载
14
CDN与外部化依赖
React、Vue标记为externals，通过CDN加载减少打包体积。
CDNexternals
15
图片与静态资源优化
image-webpack-loader压缩图片，小图Base64内联，减少HTTP请求。
图片Base64
16
CSS与字体文件优化
PurgeCSS清除未用样式，字体文件子集化。
CSS字体
17
Polyfill与按需填充
core-js和@babel/preset-env的useBuiltIns，只引入需要的Polyfill。
Polyfillbabel
18
Moment.js与Lodash替代方案
Moment.js是“体积杀手”，推荐dayjs、date-fns、lodash-es等轻量替代。
替代轻量
19
大型UI库按需引入
Ant Design、Element Plus通过babel-plugin-import实现按需加载。
UI库按需
20
Docker镜像瘦身
从1GB到200MB：多阶段构建、Alpine基础镜像、清理缓存。
Docker瘦身
21
CI/CD中的依赖缓存
GitHub Actions或Jenkins配置依赖缓存，避免重复下载node_modules。
CI/CD缓存
22
依赖安全审计
npm audit、Snyk、Dependabot自动检测已知漏洞并修复。
安全审计
23
依赖版本管理策略
~、^、*的利弊，renovate/dependabot实现自动化版本更新。
版本自动化
24
私有npm仓库搭建
Verdaccio搭建内部npm源，加速安装并管理私有包。
私有源Verdaccio
25
离线安装与镜像源
配置淘宝镜像源，使用离线包管理器如npm-offline-packages。
镜像离线
26
依赖冻结与锁定
关键发布节点使用npm shrinkwrap或精确版本号锁定所有依赖。
冻结锁定
27
依赖清理与垃圾回收
depcheck找出未用依赖，npkill清理无用的node_modules。
清理depcheck
28
大型项目实战案例
真实中台项目从依赖膨胀2.3GB优化到800MB全过程记录。
实战优化
29
性能监控与持续优化
webpack-bundle-analyzer、rollup-plugin-visualizer建立CI门禁。
监控门禁
30
未来趋势与总结
ESM普及、Import Maps、Bundleless工具(Vite/Turbopack)如何根治膨胀。
趋势ESM