Loader Analysis and Optimization
Optimizing loaders is a common way to improve the performance of Rspack or Webpack compilation. In most cases, besides replacing the loader with a faster one, we can also reduce execution by setting module.rule.exclude for the loader.
Rsdoctor provides two core modules, Loader Overall and Loader Analysis, to help you optimize based on the loader's invocation information.
How to analyze?
Regardless of the optimization method used for loaders, we need to obtain data information about the loaders, such as which files a loader compiles and time-consuming information for compiling certain files, in order to optimize more accurately.
File Tree Structure
With the Loader Analysis module provided by Rsdoctor, we can see a tree structure composed of all files that pass through the loaders during the entire compilation process, as shown in the following figure:
Analyzing Directories
By clicking on a directory, you can see the time-consuming statistics of all loaders under the currently selected directory on the right side of the file tree, such as the number of files processed by a loader and the estimated time consumption. The content of the "Statistics of xxx" card is shown in the following figure:
We can intuitively know the time-consuming data of this folder, such as the number of files processed by a certain loader and the estimated time consumption, as well as the sum of all data, which further helps us make decisions on how to optimize the loader.
Usually, in the directories of third-party libraries inside node_modules, we can easily determine whether it is necessary to set module.rule.exclude for this directory based on the time-consuming information of the loader, in order to reduce the execution of loaders with long execution time, such as the common babel-loader.
Analyzing Files
By clicking on a file, a mask layer will pop up, showing a list of all loaders that have been executed on the currently clicked file. By clicking on a loader, you can see the input, output, and parameter data information of the target loader when it is called.
- Parameter Data Information: Click on "show more" or the expand button in the upper left corner to view the corresponding parameter information.
We can use the loader information of individual files here to troubleshoot issues and decide whether to add them to module.rule.exclude.
Usually, for internal packages inside the project (i.e., outside the cwd, usually the workspace), we can determine whether it is necessary to set module.rule.exclude for this directory based on the loader time-consuming information of the directory and the input-output information of individual files (because these internal packages may already have good compatibility with ES syntax).
Learn More
You may want to learn more about the usage of the Loader Analysis module: