Ray Build Dependency Analysis
@ray-js/cli includes built-in dependency analysis. During the build, it generates structured metafiles that work with visualization tools to quickly identify oversized dependencies and Tree Shaking failures caused by mixing ESM and CJS.
Enable Analysis
Run the following command to build. The -a parameter generates analysis files in the output directory:
After the build completes, the following *-metafile.json files appear in the output directory:
View Analysis Results
Open esbuild Bundle Size Analyzer and drag the metafiles above into the page to view the dependency graph visually.
Click a module in the graph to inspect its source path and import relationships, which helps quickly locate dependencies with abnormal size impact.
Locate Tree Shaking Failures
A common use case for build analysis is troubleshooting Tree Shaking failures. When a dependency package is unexpectedly large, the usual cause is mixing ESM and CJS.
For example, the image above shows that lodash-es is imported by node_modules/@ray-js/robot-map-component/lib/components/rjs-component/index.rjs, where it occupies 378.2 kb in the dependency graph.
Inspect the source code of that module to confirm whether CJS syntax is mixed in:
You can see that the code imports another module with CJS syntax: require('@ray-js/hybrid-robot-map');. This is the problem. Mixing ESM and CJS causes Tree Shaking to fail.