#Ray 构建依赖分析

@ray-js/cli 内置了构建依赖分析能力，构建时生成结构化的 metafile，配合可视化工具可以快速定位体积异常的依赖包，以及因 ESM/CJS 混用导致 Tree Shaking 失效的问题。

#开启分析

执行以下命令进行构建，-a 参数会在产物目录中生成分析文件：

npx ray build --target=tuya -a --no-sourcemap

构建完成后，产物目录中会出现以下 **-metafile.json 文件：

#查看分析结果

打开 esbuild Bundle Size Analyzer，将上述 metafile 拖入页面即可查看可视化的依赖结构。

点击图中的模块，可以查看该模块的来源路径和导入关系，快速定位体积占比异常的依赖。

#定位 Tree Shaking 失效问题

构建分析的一个常见用途是排查 Tree Shaking 失效。当某个依赖包体积明显偏大时，通常原因是 ESM 和 CJS 混用。

例如上图中可以看到 lodash-es 被 node_modules/@ray-js/robot-map-component/lib/components/rjs-component/index.rjs 引入，在依赖图中占 378.2 kb。

查看该模块的源码，确认是否混用了 CJS 语法：

less node_modules/@ray-js/robot-map-component/lib/components/rjs-component/index.rjs

可以看到代码中通过 CJS 语法require('@ray-js/hybrid-robot-map'); 导入了其他模块。问题出在这里，ESM 和 CJS 混用，会导致 Tree Shaking 失效。