npm run build 后看不到真实资源体积是因为Webpack默认不输出详细体积报告，VSCode也不自带体积分析功能；真正需要的是识别“谁贡献了这些体积”，而非仅看文件大小。
为什么 npm run build 后看不到真实资源体积？
很多项目跑完 npm run build 只生成一堆文件，但你根本不知道 main.js 里塞进了多少第三方库，或者某个组件打包后占了多大——Webpack 默认不输出详细体积报告，而 VSCode 本身也不自带体积分析功能。真正有用的不是“文件大小”，而是“谁贡献了这些体积”。
用 source-map-explorer 快速定位体积大户
这是目前最轻量、最直观的方案：它读取构建产物里的 .map 文件，把每个模块的体积映射到可视化扇形图上，直接点开就能看到 node_modules/lodash 或 src/utils/request.ts 占了多少 KB。
- 先确保已构建出带 sourcemap 的产物（如
webpack --mode=production --devtool=source-map，或vue-cli/create-react-app默认开启） - 全局安装：
npx source-map-explorer@2.5.3 dist/static/js/*.js（路径按你实际输出目录调整） - VSCode 中右键打开终端执行，结果会自动在默认浏览器弹出交互式图表
- 注意：如果报错
Cannot find module 'source-map'，加装npm install -D source-map
用 webpack-bundle-analyzer 查看依赖层级和重复引入
当你需要知道 moment 被几个包间接引入、lodash 是否被多次打包进不同 chunk，就得靠它。它比 source-map-explorer 更重，但能暴露 tree-shaking 失效点。
Rydberg Agent Node
下载
使用一条命令部署ProbeChain Rydberg测试网代理节点。自动注册为Agent(NodeType=1)，免gas，支持macOS/Linux/Windows。触发词：/r
- 安装：
npm install -D webpack-bundle-analyzer - 在 Webpack 配置中加插件（Vue CLI 用户改
vue.config.js，Create React App 需craco）：
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
plugins: [new BundleAnalyzerPlugin({ openAnalyzer: false })]
};
http://127.0.0.1:8888 启一个本地服务，展示模块依赖树和体积占比openAnalyzer 导致每次构建都弹窗口VSCode 里怎么让体积检查变成一键操作？
别每次手动敲命令。直接在 .vscode/tasks.json 里配个 task，Ctrl+Shift+P → “Tasks: Run Task” 就能触发：
{
"version": "2.0.0",
"tasks": [
{
"label": "Analyze bundle size",
"type": "shell",
"command": "npx source-map-explorer dist/static/js/*.js",
"group": "build",
"presentation": { "echo": true, "reveal": "always", "panel": "new" }
}
]
}
- 路径
dist/static/js/*.js必须和你实际构建输出一致，否则提示No files matched - 如果项目用 TypeScript，确保
tsc或swc没把.map文件删掉（检查tsconfig.json中"sourceMap": true） - 多人协作时，把这个
tasks.json加进 Git，避免每人重配
真正卡住人的从来不是工具不会装，而是 sourcemap 没生成、路径写错、或者以为构建完就万事大吉——体积问题永远藏在 dev 和 prod 的差异里。
