https://rsdoctor.rs/static/js/async/5165.afb5c278f8.js

1"use strict";(self.rspackChunk_rsdoctor_docs=self.rspackChunk_rsdoctor_docs||[]).push([[5165],{7068(e,r,i){i.r(r);var s=i(7080),n=i(157);function t(e){let r={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",strong:"strong",ul:"ul",...(0,n.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(r.h1,{id:"loaders-analysis",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#loaders-analysis",children:"#"}),"Loaders analysis"]}),"\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.strong,{children:"Rsdoctor"})," provides the ",(0,s.jsx)(r.code,{children:"Loader Analysis"})," module, which mainly provides statistics on Loaders at the ",(0,s.jsx)(r.strong,{children:"directory and file level"}),". It helps you analyze the compilation of ",(0,s.jsx)(r.strong,{children:"folders"})," and ",(0,s.jsx)(r.strong,{children:"individual files"})," by Loaders."]}),"\n",(0,s.jsxs)(r.p,{children:["Click on the navigation bar ",(0,s.jsx)(r.strong,{children:'"Compile Analysis"'})," -> ",(0,s.jsx)(r.strong,{children:'"Loader Analysis"'})," option to view the compilation analysis report. Of course, this page will only display the features if the ",(0,s.jsx)(r.code,{children:"loader"})," analysis capability is enabled ",(0,s.jsx)(r.a,{href:"/config/options/options.html",children:"features"}),"."]}),"\n",(0,s.jsxs)(r.h2,{id:"overview",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#overview",children:"#"}),"Overview"]}),"\n",(0,s.jsx)(r.p,{children:"Firstly, in this module, you can directly see the file tree structure of all files processed by Loaders, as shown in the following image:"}),"\n",(0,s.jsx)("img",{src:"https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-all.png",width:"600px",style:{margin:"auto"}}),"\n",(0,s.jsxs)(r.p,{children:["In the ",(0,s.jsx)(r.strong,{children:"filter search box"})," at the top, you can filter Loaders and search for file names. After entering the name, the file tree dynamically displays the matching files, making it easier to locate the files you want to query."]}),"\n",(0,s.jsx)(r.p,{children:"In the file tree structure below, there are two interactive forms to obtain different data information:"}),"\n",(0,s.jsxs)(r.ul,{children:["\n",(0,s.jsxs)(r.li,{children:[(0,s.jsx)(r.strong,{children:"Clicking on a directory"}),": Displays ",(0,s.jsx)(r.strong,{children:"Loader data for the file directory"}),"."]}),"\n",(0,s.jsxs)(r.li,{children:[(0,s.jsx)(r.strong,{children:"Clicking on a file"}),": Displays ",(0,s.jsx)(r.strong,{children:"detailed Loader information for the individual file"}),"."]}),"\n"]}),"\n",(0,s.jsx)(r.p,{children:"The corresponding details will be explained in the following paragraphs."}),"\n",(0,s.jsxs)(r.h2,{id:"loader-data-for-file-directories",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#loader-data-for-file-directories",children:"#"}),"Loader data for file directories"]}),"\n",(0,s.jsxs)(r.p,{children:["By ",(0,s.jsx)(r.strong,{children:"clicking on a selected directory"}),", you can see the ",(0,s.jsx)(r.strong,{children:"time statistics of all Loaders in the selected directory"})," (",(0,s.jsx)(r.a,{href:"/guide/more/faq.html#loader-timing-data-is-inaccurate",children:"estimated time consumption"}),') on the right side of the file tree. The content of the "Statistics of ***" card is shown in the following image:']}),"\n",(0,s.jsx)("img",{src:"https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-table.png",width:"300px",height:"400px",style:{margin:"auto"}}),"\n",(0,s.jsx)(r.p,{children:"Here are the main information we can obtain:"}),"\n",(0,s.jsxs)(r.ul,{children:["\n",(0,s.jsxs)(r.li,{children:["The number of ",(0,s.jsx)(r.strong,{children:"files processed"})," and the ",(0,s.jsx)(r.strong,{children:"estimated time consumption"})," for an ",(0,s.jsx)(r.strong,{children:"individual Loader"})," in the selected directory."]}),"\n",(0,s.jsxs)(r.li,{children:["The number of ",(0,s.jsx)(r.strong,{children:"files processed"})," and the ",(0,s.jsx)(r.strong,{children:"estimated time consumption"})," for ",(0,s.jsx)(r.strong,{children:"all Loaders"})," in the selected directory."]}),"\n"]}),"\n",(0,s.jsxs)(r.p,{children:["Usually, we can select some ",(0,s.jsx)(r.strong,{children:"third-party library directories"})," within ",(0,s.jsx)(r.code,{children:"node_modules"})," and then determine whether it is necessary to set ",(0,s.jsx)(r.a,{href:"https://webpack.js.org/configuration/module/#ruleexclude",rel:"noopener noreferrer",target:"_blank",children:"module.rule.exclude"})," for this directory based on the Loader's time consumption information. This helps reduce the processing time of common Loaders like ",(0,s.jsx)(r.code,{children:"babel-loader"}),"."]}),"\n",(0,s.jsxs)(r.p,{children:["If it is a third-party library with ",(0,s.jsx)(r.strong,{children:"advanced ES syntax"})," or a package within the ",(0,s.jsx)(r.strong,{children:"workspace"}),", we need to make more granular decisions at the individual file level based on the content in the next paragraph to optimize Loader performance."]}),"\n",(0,s.jsxs)(r.h2,{id:"loader-details-for-individual-files",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#loader-details-for-individual-files",children:"#"}),"Loader details for individual files"]}),"\n",(0,s.jsxs)(r.p,{children:["By ",(0,s.jsx)(r.strong,{children:"clicking on a file"}),", a modal will appear with the following content:"]}),"\n",(0,s.jsxs)(r.ul,{children:["\n",(0,s.jsxs)(r.li,{children:["\n",(0,s.jsxs)(r.p,{children:['"',(0,s.jsx)(r.strong,{children:"Left section"}),'": A list of all ',(0,s.jsx)(r.strong,{children:"executed Loaders"})," for the clicked file and the ",(0,s.jsx)(r.strong,{children:"time consumption"})," of each Loader for compiling the file."]}),"\n"]}),"\n",(0,s.jsxs)(r.li,{children:["\n",(0,s.jsxs)(r.p,{children:['"',(0,s.jsx)(r.strong,{children:"Right section"}),'": Information about the ',(0,s.jsx)(r.strong,{children:"input, output"}),", and ",(0,s.jsx)(r.strong,{children:"parameter data"})," of the selected Loader at the time of invocation."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)("img",{src:"https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-code-change.png",width:"600px",style:{margin:"auto"}}),"\n",(0,s.jsxs)(r.ul,{children:["\n",(0,s.jsxs)(r.li,{children:[(0,s.jsx)(r.strong,{children:"Parameter Data"}),': Click on "',(0,s.jsx)(r.strong,{children:"show more"}),'" or the expand button in the top left corner to view the corresponding parameter information.']}),"\n"]}),"\n",(0,s.jsx)("img",{src:"https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-options.png",width:"600px",style:{margin:"auto"}}),"\n",(0,s.jsxs)(r.p,{children:["As shown in the image, we can obtain the following information about the ",(0,s.jsx)(r.strong,{children:"target file"}),":"]}),"\n",(0,s.jsxs)(r.ul,{children:["\n",(0,s.jsx)(r.li,{children:"All the Loaders it has gone through."}),"\n",(0,s.jsxs)(r.li,{children:["The ",(0,s.jsx)(r.strong,{children:"parameter data"})," on the ",(0,s.jsx)(r.a,{href:"https://webpack.js.org/api/loaders/#the-loader-context",rel:"noopener noreferrer",target:"_blank",children:(0,s.jsx)(r.strong,{children:"Loader Context"})}),"."]}),"\n",(0,s.jsx)(r.li,{children:"The input and output of the Loader."}),"\n"]})]})}function o(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:r}={...(0,n.R)(),...e.components};return r?(0,s.jsx)(r,{...e,children:(0,s.jsx)(t,{...e})}):t(e)}o.__RSPRESS_PAGE_META={},o.__RSPRESS_PAGE_META["en%2Fguide%2Fusage%2Floaders-analysis.mdx"]={toc:[{id:"overview",text:"Overview",depth:2},{id:"loader-data-for-file-directories",text:"Loader data for file directories",depth:2},{id:"loader-details-for-individual-files",text:"Loader details for individual files",depth:2}

1],title:"Loaders analysis",headingTitle:"Loaders analysis",frontmatter:{}},i.d(r,{default:()=>o})}}]);