https://rspack.rs/static/js/async/route-7f0419541e70.50e3ec1d39.js

1"use strict";(self.rspackChunkrspack_website=self.rspackChunkrspack_website||[]).push([["cm"],{oa(s,e,r){r.r(e);var n=r("i"),t=r("fj");function i(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,t.R)(),...s.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h1,{id:"产物分析",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#产物分析",children:"#"}),"产物分析"]}),"\n",(0,n.jsxs)(e.h2,{id:"rsdoctor-的产物分析",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rsdoctor-的产物分析",children:"#"}),"Rsdoctor 的产物分析"]}),"\n",(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.a,{href:"/zh/guide/diagnostics/use-rsdoctor.html",children:"Rsdoctor"})," 提供了 ",(0,n.jsx)(e.code,{children:"Bundle Size"})," 模块，该模块主要用于分析 Rspack 构建产物的信息，包括当前编译产物的资源大小、重复包、模块引用关系等："]}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"产物概览"}),"：展示产物总数、各类型文件数目、大小以及占比，以及重复包和重复包的引用链；"]}),"\n",(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:["产物分析（",(0,n.jsx)(e.code,{children:"Bundle Analysis"}),"）模块"]}),"：分析构建产物资源（",(0,n.jsx)(e.strong,{children:"Assets"}),"）以及所包含的 ",(0,n.jsx)(e.strong,{children:"Modules"})," 的大小和代码信息。在该模块中，可以查看 Assets 中 ",(0,n.jsx)(e.strong,{children:"Module 打包后的实际代码大小"}),"，以及模块的原始代码或",(0,n.jsx)(e.strong,{children:"打包后的代码段"}),"以及",(0,n.jsx)(e.strong,{children:"模块引用关系"}),"。"]}),"\n"]}),"\n",(0,n.jsx)("img",{src:"https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-overall.png",width:"700px",style:{margin:"auto"}}),"\n",(0,n.jsxs)(e.p,{children:["点击",(0,n.jsx)(e.strong,{children:"导航栏 「Bundle Size」-> 「Bundle Size」选项"}),"，即可查看 Bundle 分析报告。详细文档可查看",(0,n.jsx)(e.a,{href:"https://rsdoctor.rs/zh/guide/usage/bundle-size",rel:"noopener noreferrer",target:"_blank",children:"Bundle Size"})]}),"\n",(0,n.jsxs)(e.h3,{id:"重复包治理",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#重复包治理",children:"#"}),"重复包治理"]}),"\n",(0,n.jsx)(e.p,{children:"在生产构建中，优化包大小是一个重要环节，因为它直接影响到在线用户的使用体验。"}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsx)(e.li,{children:"检查重复包："}),"\n"]}),"\n",(0,n.jsx)(e.p,{children:"你可以使用 Rsdoctor 来检测项目中是否存在重复的第三方依赖包。Rsdoctor 在构建过程中进行分析，找到重复依赖包并以可视化方式显示出来："}),"\n",(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"https://assets.rspack.rs/others/assets/rsdoctor/overall-alerts.jpg",alt:""})}),"\n",(0,n.jsxs)(e.p,{children:["更多的细节, 可以查看 ",(0,n.jsx)(e.a,{href:"https://rsdoctor.rs/zh/blog/topic/duplicate-pkg-problem",rel:"noopener noreferrer",target:"_blank",children:"Rsdoctor - 重复包治理"}),"."]}),"\n",(0,n.jsxs)(e.h2,{id:"bundle-stats--statoscope",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#bundle-stats--statoscope",children:"#"}),"bundle-stats & statoscope"]}),"\n",(0,n.jsxs)(e.p,{children:["你也可以生成 stats.json 文件，用其他包解析工具进一步分析，如 ",(0,n.jsx)(e.a,{href:"https://github.com/relative-ci/bundle-stats",rel:"noopener noreferrer",target:"_blank",children:"bundle-stats"})," 或 ",(0,n.jsx)(e.a,{href:"https://github.com/statoscope/statoscope",rel:"noopener noreferrer",target:"_blank",children:"statoscope"}),"。"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"sh",children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"$"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" rspack"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" build"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" --json"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" stats.json"})]})})})})]})}function o(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,t.R)(),...s.components};return e?(0,n.jsx)(e,{...s,children:(0,n.jsx)(i,{...s})}):i(s)}o.__RSPRESS_PAGE_META={},o.__RSPRESS_PAGE_META["zh%2Fguide%2Fdiagnostics%2Fanalysis.mdx"]={toc:[{id:"r

1sdoctor-的产物分析",text:"Rsdoctor 的产物分析",depth:2},{id:"重复包治理",text:"重复包治理",depth:3},{id:"bundle-stats--statoscope",text:"bundle-stats & statoscope",depth:2}],title:"产物分析",headingTitle:"产物分析",frontmatter:{description:"使用 Rsdoctor 等工具分析 Rspack 构建产物、重复依赖和模块引用关系。"}},r.d(e,{default:()=>o})}}]);