L3中级
Bundle 大小分析
30 分钟每月
格式:分析你的 JavaScript 包大小。
规则:
- 首屏 JS < 200KB(压缩后)
- 总 JS < 500KB(压缩后)
操作:
# Next.js 项目
npx next build
# 查看 .next/analyze 报告
# 通用工具
npx bundle-analyzer
常见大包原因:
- 导入了整个库但只用了一个函数(
import _ from 'lodash'vsimport debounce from 'lodash/debounce') - 没有代码分割(所有页面的代码在一个文件里)
- 包含了开发时才需要的依赖