如何在VSCode中借助Node环境统计当前项目的资源大小-VSCode-PHP中文网

npm run build 后看不到真实资源体积是因为webpack默认不输出详细体积报告，vscode也不自带体积分析功能；真正需要的是识别“谁贡献了这些体积”，而非仅看文件大小。

如何在vscode中借助node环境统计当前项目的资源大小

为什么 `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，避免每人重配