L3中级

Bundle 大小分析

30 分钟每月

格式:分析你的 JavaScript 包大小。

规则

  • 首屏 JS < 200KB(压缩后)
  • 总 JS < 500KB(压缩后)

操作

# Next.js 项目
npx next build
# 查看 .next/analyze 报告

# 通用工具
npx bundle-analyzer

常见大包原因

  • 导入了整个库但只用了一个函数(import _ from 'lodash' vs import debounce from 'lodash/debounce'
  • 没有代码分割(所有页面的代码在一个文件里)
  • 包含了开发时才需要的依赖

我的笔记