依赖体积优化策略

依赖体积直接影响安装速度、构建产物和运行性能，优化需从分析与治理两方面入手。

减少依赖体积

依赖体积分析

# 全局安装分析工具
npm install -g cost-of-modules

# 在项目根目录执行
npx cost-of-modules --less

# 使用 source-map-explorer 分析构建产物
npm install -D source-map-explorer
npx source-map-explorer dist/*.js

# 使用 bundlephobia 在线查询包体积
npx bundlephobia lodash@4.17.21
# 输出: min: 71.5KB, min+gzip: 24.5KB, download time: 0.35s

优先分析 top-10 大体积包，80% 体积通常集中在少数依赖上。

按需引入

// 反例：全量引入 lodash
import _ from 'lodash'  // 引入完整 71KB (gzipped)

// 正例：按需引入
import debounce from 'lodash/debounce'  // 仅引入 ~1KB

// 配置 babel-plugin-lodash 自动转换

// .babelrc
{
  "plugins": ["lodash"]
}

// 反例：全量引入 @babel/polyfill
import '@babel/polyfill'

// 正例：按需引入 core-js
import 'core-js/stable/promise'

Tree Shaking 配置

// package.json 中标记 ES Module 入口
{
  "name": "my-lib",
  "module": "esm/index.js",
  "sideEffects": false
}

// webpack 配置
module.exports = {
  mode: 'production',  // 自动启用 Tree Shaking
  optimization: {
    usedExports: true,
    minimize: true
  }
}

sideEffects: false 告知打包器该包无副作用，可安全移除未使用导出。有副作用的文件需在数组中排除。

替代轻量包

# 替换 moment 为 dayjs
npm uninstall moment
npm install dayjs

移除冗余依赖

# 检测未使用的依赖
npx depcheck

# 输出示例：
# Unused dependencies
# * lodash
# Missing dependencies
# * dayjs

# 检测重复依赖
npx npm-check
# 或
npx npm-dedupe
npm dedupe  # 自动去重，将重复版本提升到根目录

depcheck 会扫描代码中的 require/import，对比 package.json 声明，输出未使用和缺失的依赖。

条件依赖与可选依赖

// package.json
{
  "optionalDependencies": {
    "fsevents": "^2.3.0"
  },
  "peerDependencies": {
    "react": ">=18.0.0"
  }
}

• optionalDependencies：安装失败不阻塞，适合平台特定包
• peerDependencies：由宿主项目提供，不计入自身体积

将开发时才需要的工具放入 devDependencies，生产构建不安装。

要点总结

• 用 cost-of-modules 或 bundlephobia 定位大体积依赖，优先治理 top-10
• 按需引入（lodash/debounce）替代全量引入，配合 babel 插件自动转换
• sideEffects: false + ESM 入口是 Tree Shaking 生效的前提
• 优先选择轻量替代包（dayjs 替代 moment，原生 API 替代第三方包）
• depcheck 检测未使用依赖，npm dedupe 去除重复版本