RFC: Replace AST-based Module Analysis with Sourcemap-based Analysis in Rsdoctor

[yifancong]

Summary

This RFC proposes replacing Rsdoctor’s existing AST-based module analysis with a more efficient, accurate, and side-effect-free Source Map-based solution. The new approach aims to improve module size analysis, enable precise handling of concatenated modules, eliminate side effects from banner analysis, and provide support for CSS module analysis.

Motivation

Pain Points

The current AST-based analysis in Rsdoctor has several limitations:

1. Concatenated Module Analysis
   Concatenated modules (modules merged into a single closure during bundling) cannot be decomposed accurately. As a result, Rsdoctor annotates them with a "Concatenated" label, making size attribution imprecise and increasing the user's cognitive load to understand this concept.

2. BannerPlugin Side Effects
   Rsdoctor currently uses comment markers for BannerPlugin analysis, which introduces side effects into the bundle and prevents its use in CI/CD pipelines.

3. Lack of CSS Module Analysis
   There is no logic to parse and analyze CSS modules, resulting in incomplete size analysis for CSS assets.

Glossary

• Concatenated Module: A module optimization where multiple modules are combined into a single closure for better performance.
• VLQ (Variable-length quantity): An efficient integer encoding scheme used in SourceMap’s mappings field to compress position data.

Plan

1. Read Bundle Content and Source Map

• Read the content of the output bundle, splitting it by lines for precise code location.
• Obtain the source map via asset.source.sourceAndMap().

---

2. Iterate Source Map Mappings and Group by Line

• Use SourceMapConsumer to parse the source map, decoding VLQ to get generatedColumn, generatedLine, originalColumn, and originalLine.
• Iterate each mapping (the correspondence between bundle code segments and original modules), grouping by bundle line number.

---

3. Sort and Split Code Segments by Column

• For each line’s mappings, sort by column and split code accordingly, using the source path as a key in sourceMapSets.
• During iteration, concatenate code segments for each source path to reconstruct the bundled code for that module.

---

4. Aggregate Code Segments per Module

• The source field in each mapping indicates the real source module.
• Use the sourceMapSets map to assemble and aggregate code segments belonging to the same module.

---

Seamless Source Map Support in Rspack

Rsdoctor’s native plugin utilizes SourceMapDevToolPluginOptions in Rspack, enabling concatenated module analysis even when users do not explicitly enable source maps. This ensures smooth integration and consistent analysis without additional user configuration.

Acknowledgements

We drew inspiration from some of sonda’s implementation ideas. Sonda is a lightweight and user-friendly bundle analysis tool.