Rsdoctor provides the Bundle Size
module, which is mainly used to analyze the information of the build artifacts of Webpack or Rspack, including the size of resources, duplicate packages, and module reference relationships:
Click on the "Bundle Size" option in the navigation bar to view the Bundle analysis report. Please note that to display this page, you need to enable the build artifact analysis capability features.
Assets
: Resources refer to images, fonts, media, and other file types. They are the files that ultimately exist in the output folder. Each Chunk has corresponding Assets resources.Module
: One or more Modules combine to form a Chunk. For more information about Module types, please refer to Rspack Modules and Webpack Modules.Bundle Size
: The final packaged size of the resource artifact, which is the final size after being processed by the builder.Module Bundled Source & Size
: Module Parsed Source refers to the final code fragment of the Module in the packaged artifact, and Module Parsed Size refers to the size of the final code fragment of the Module in the packaged artifact.Package Count
: The number of third-party packages.Initial Chunk
: The initial chunk is the main chunk of the entry point. This chunk contains all the modules specified by the entry point and their dependencies, unlike the chunks for "on-demand loading".
Duplicate Packages
: Duplicate third-party packages bundled into the project. Excludes third-party packages that are not bundled into the artifact. Please refer to Duplicate Packages.Concatenated Module
: A concatenated module is a technique that combines multiple modules into one closure during packaging. In the past, Webpack would package each module into a separate closure, and this encapsulation function would cause slower execution of JavaScript in the browser. Optimization can be achieved by enabling the optimization.concatenateModules
parameter.The bundle overview displays information about the number and size of files, such as Total Files
. Clicking on the card chart expands the resource details, as shown in the following image:
The Duplicate Packages card displays the number of duplicate third-party packages in the project. Clicking on the image allows you to view the specific details of the duplicate packages. Please note that these are duplicate packages that have been bundled.
For more information, please refer to Duplicate Packages.
If your project is based on Rspack and the version is lower than 0.5.1, you cannot view code information.
The Bundle Analysis module is used to analyze the size and code information of the build artifacts' resources (Assets) and the included Modules. The example image is shown below:
The top toolbar from left to right includes: the search tool for Assets, the filter tool for Assets size, and the filter tool for Module size.
The Assets tag is shown in the left image, from left to right representing: Resource Size, Initial Chunk, and Code View.
The Modules tag is shown in the right image, from left to right representing:
concatenated
are concatenated modules, which have a certain impact on this value. Please refer to the explanation of concatenated module
below.Modules
are concatenated.Module
it is aggregated into. This sub-module cannot be further unpacked after bundling, so the specific Bundled Size
cannot be determined. Only the size of the entire concatenated module is known, which is marked at the end of the main module.Modules
.Source
(source code), Transformed
(compiled code), and Bundled
(bundled code).Click the "Bundle Analyzer Graph" button on the "Bundle Size" page to view the classic tile graph.
When enabling the BannerPlugin analysis, do not use Rsdoctor in the production version.
Both Rspack and Webpack support the BannerPlugin, which is a built-in plugin that allows you to add specific content at the top or bottom of the generated chunks. The added code segment will affect the analysis capability of the bundle.
Rsdoctor is compatible with the logic of adding code using the BannerPlugin, but it is not enabled by default because Rsdoctor needs to add tag code. The Rsdoctor BannerPlugin capability is enabled in the following two cases:
The project uses the BannerPlugin in rspack.config.j|ts
or webpack.config.j|ts
.
Enable Rsdoctor BannerPlugin capability through Rsdoctor options by setting supports.banner
:
drop_console
will affect Rsdoctor's analysis of the BannerPlugin. Therefore, you can disable drop_console
when RSDOCTOR = true
.