真正影响上线体积的是最终打包产物中实际被引入的代码量，而非node_modules大小；可用source-map-explorer定位主包体积来源，webpack-bundle-analyzer分析依赖层级与重复引入，npm-size评估安装体积，package phobia在线查体积趋势及依赖树。
直接看 node_modules 文件夹大小没用——它包含大量开发时用到但未打进包的依赖，比如 TypeScript 类型定义、构建工具插件等。真正影响上线体积的是最终打包产物里实际被引入的代码量。统计目标得明确：不是“装了多少”，而是“打了多少进去”。
用 source-map-explorer 快速定位体积来源
这是最轻量、见效最快的方案，适合快速诊断主包（如 main.js）里谁占得多。
- 先确保构建时生成了 sourcemap（Webpack 默认 production 模式下
devtool: 'source-map'或'cheap-module-source-map'；Vue CLI 和 Create React App 默认已开启） - 运行构建命令，例如
npm run build - 安装并执行：
npx source-map-explorer@2.5.3 dist/static/js/*.js（路径按你实际输出目录调整，如dist/js/*.js） - 浏览器自动打开交互式扇形图，点击任意区块即可下钻到具体文件，比如
node_modules/lodash-es/或src/views/Dashboard.vue
用 webpack-bundle-analyzer 查依赖层级和重复引入
当你需要知道某个包是否被多个地方间接引入、有没有被重复打包（比如两个组件各自 import { debounce } from 'lodash' 导致两份），就得靠它。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 安装：
npm install -D webpack-bundle-analyzer - 在 Webpack 配置中添加插件（Vue CLI 改
vue.config.js，React 项目用 craco）：
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = { plugins: [new BundleAnalyzerPlugin({ openAnalyzer: false })] };
- 运行构建（如
npm run build --report），完成后访问http://127.0.0.1:8888 - 可视化树状图中可清晰看到
moment被ant-design和date-fns同时拉入，或lodash的多个子模块是否被 tree-shaking 正确剔除
用 npm-size 查安装前的“理论体积”
它不看打包结果，而是模拟 npm install 后 node_modules 占用的磁盘空间，适合评估新引入依赖的“成本”。
- 全局或临时使用：
npx npm-size axios或npx npm-size react-router-dom@6 - 支持指定版本、本地包路径、甚至整个
package.json：npx npm-size --file package.json - 输出含总大小、依赖数量、最大三层子依赖详情，便于横向对比（比如
axiosvskyvsfetch原生封装）
用 Package Phobia 查在线体积趋势
无需本地安装，打开网页就能查——尤其适合在写 package.json 前做决策。
- 访问 https://www.php.cn/link/1e0ff48875096192d24c66eaf11338d8，输入包名（如
dayjs） - 页面显示 install size（压缩后安装体积）和 publish size（发布到 registry 的体积），并附带历史版本曲线
- 点开 “Dependencies” 可展开完整依赖树，标出每个子包的体积占比，一眼识别膨胀源头
- 支持 API 调用，可集成进 CI 流程做体积门禁（例如：新包 install size > 200KB 则构建失败）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
