https://rspack.rs/static/js/async/route-4d53fedaf2a4.17b722476d.js

1"use strict";(self.rspackChunkrspack_website=self.rspackChunkrspack_website||[]).push([["1k"],{q9V(e,r,s){s.r(r);var n=s("i"),a=s("f"),l=s("No");function i(e){let r={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(r.h1,{id:"rspack-02-发布公告",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rspack-02-发布公告",children:"#"}),"Rspack 0.2 发布公告"]}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.em,{children:"2023 年 6 月 2 日"})}),"\n",(0,n.jsx)(l.d,{}),"\n",(0,n.jsx)(r.p,{children:"自 Rspack 0.1 版本发布的将近三个月以来，我们得到了非常多社区的关注和反馈，感谢大家对 Rspack 的支持。在 0.2 版本中，我们新增了诸多功能，如 realContentHash、DataURI、ESM format 的支持等，同时加强了与 webpack 的兼容性，并优化了诸多细节。"}),"\n",(0,n.jsx)(r.p,{children:"另外，得益于对 webpack API 良好的兼容性，我们对于周边生态也完成了进一步的兼容，例如，测试完成了对 vue-loader 17（对应 Vue 3）和 15（对应 Vue 2）版本的兼容，现在大家可以尝试在 Vue 2 / 3 项目中使用 Rspack 了。我们期待你在 0.2 版本中体验到这些全新的改进，并欢迎你随时给我们提供反馈。"}),"\n",(0,n.jsxs)(r.h2,{id:"主要功能更新",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#主要功能更新",children:"#"}),"主要功能更新"]}),"\n",(0,n.jsxs)(r.h3,{id:"loader",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#loader",children:"#"}),"Loader"]}),"\n",(0,n.jsxs)(r.p,{children:["0.2 版本完成了 loader 大部分 API 的兼容，其中包括了 inline match resource，pitching loader，inline loader 等。更多的 API 进一步提升了对 webpack loader 的兼容性，详情可以参考下方 webpack 兼容性更新。更多信息请参考 ",(0,n.jsx)(r.a,{href:"/zh/api/loader-api/index.html",children:"Loader API"})]}),"\n",(0,n.jsxs)(r.h3,{id:"plugin-hooks",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#plugin-hooks",children:"#"}),"Plugin hooks"]}),"\n",(0,n.jsx)(r.p,{children:"新增一些插件的的钩子"}),"\n",(0,n.jsx)(r.p,{children:"Compiler hooks"}),"\n",(0,n.jsxs)(r.ol,{children:["\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/zh/api/plugin-api/compiler-ho

1oks.html#beforecompile",children:"beforeCompile"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/zh/api/plugin-api/compiler-hooks.html#aftercompile",children:"afterCompile"})}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"Compilation hooks"}),"\n",(0,n.jsxs)(r.ol,{children:["\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/zh/api/plugin-api/compilation-hooks.html#optimizemodules",children:"optimizeModules"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/zh/api/plugin-api/compilation-hooks.html#optimizechunkmodules",children:"optimizeChunkModule"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/zh/api/plugin-api/compilation-hooks.html#finishmodules",children:"finishModules"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/zh/api/plugin-api/compilation-hooks.html#chunkasset",children:"chunkAsset"})}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"NormalModuleFactory hooks"}),"\n",(0,n.jsxs)(r.ol,{children:["\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/zh/api/plugin-api/normal-module-factory-hooks.html#beforeresolve",children:"beforeResolve"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/zh/api/plugin-api/normal-module-factory-hooks.html#afterresolve",children:"afterResolve"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/zh/api/plugin-api/normal-module-factory-hooks.html#resolveforscheme",children:"ResolveForScheme"})}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"ContextModuleFactory hooks"}),"\n",(0,n.jsxs)(r.ol,{children:["\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/zh/api/plugin-api/context-module-factory-hooks.html#beforeresolve",children:"beforeResolve"})}),"\n"]}),"\n",(0,n.jsxs)(r.h3,{id:"realcontenthash",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#realcontenthash",children:"#"}),"realContentHash"]}),"\n",(0,n.jsxs)(r.p,{children:["我们实现了 ",(0,n.jsx)(r.code,{children:"optimization.realContentHash"}),"，它会根据最终产物的文件内容进行 Hash 的计算，因此它所生成的 Hash 更为稳定，对缓存有更好的利用率，在 0.2 版本中，对于生产环境的构建会默认开启这一功能。"]}),"\n",(0,n.jsxs)(r.h3,{id:"esmsystem-format",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#esmsystem-format",children:"#"}),"ESM/System format"]}),"\n",(0,n.jsx)(r.p,{children:"在新版本中，支持了生成 System/ESM 产物，输出 ESM 的产物配置如下："}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"rspack.config.mjs",lang:"js",children:(0,n.jsxs)(r.code,{children:[(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"  output"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"    chunkFormat"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'module'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"    chunkLoading"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'import'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"    library"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"      type"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'module'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"    }"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"  }"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsxs)(r.h3,{id:"新的-splitchunksplugin-实现",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#新的-splitchunksplugin-实现",children:"#"}),"新的 ",(0,n.jsx)(r.code,{children:"SplitChunksPlugin"})," 实现"]}),"\n",(0,n.jsxs)(r.p,{children:["我们重构了 Rspack 现有的 ",(0,n.jsx)(r.code,{children:"SplitChunksPlugin"})," 实现，这次重构使得 ",(0,n.jsx)(r.code,{children:"SplitChunksPlugin"}

1)," 的行为更加易于预测，同时也减少了排查相关问题的成本。"]}),"\n",(0,n.jsxs)(r.p,{children:["在重构后，我们有信心在 ",(0,n.jsx)(r.code,{children:"SplitChunksPlugin"})," 上实现更多的新功能。我们很高兴地宣布，在 0.2 版本中，",(0,n.jsx)(r.code,{children:"SplitChunksPlugin"})," 支持了以下配置项："]}),"\n",(0,n.jsxs)(r.ul,{children:["\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.code,{children:"splitChunks.maxSize"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.code,{children:"splitChunks.maxAsyncSize"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.code,{children:"splitChunks.maxInitialSize"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.code,{children:"splitChunks.maxAsyncRequests"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.code,{children:"splitChunks.maxInitialRequests"})}),"\n"]}),"\n",(0,n.jsxs)(r.p,{children:["在 0.2 版本中，我们会默认使用新的 ",(0,n.jsx)(r.code,{children:"SplitChunksPlugin"}),"。如果你遇到问题，请及时反馈，我们会尽快修复。你可以通过 ",(0,n.jsx)(r.code,{children:"experiments.newSplitChunks: false"})," 来切换回旧版本的实现，但我们强烈建议你使用新版本。我们将在 0.3 版本中，移除掉旧有的实现。"]}),"\n",(0,n.jsxs)(r.h3,{id:"datauri-支持",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#datauri-支持",children:"#"}),"DataURI 支持"]}),"\n",(0,n.jsx)(r.p,{children:"我们实现了 DataURI 的支持，现在你可以编写以下代码以实现虚拟模块："}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,n.jsx)(r.code,{children:(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" x "}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'data:text/javascript,export default 42'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,n.jsxs)(r.p,{children:["除此之外我们还支持了 ",(0,n.jsx)(r.code,{children:"mimetype"})," 和 ",(0,n.jsx)(r.code,{children:"scheme"})," 这两种 module rule condition，比如，你可以通过以下方式让 ",(0,n.jsx)(r.code,{children:"scheme"})," 为 ",(0,n.jsx)(r.code,{children:"'data'"})," 的资源不再当作内联处理，而是作为单独的资源文件"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"rspack.config.mjs",lang:"js",children:(0,n.jsxs)(r.code,{children:[(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"  module"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"    rules"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"      {"})}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"        scheme"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'data'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"        type"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'asset/resource'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"      }"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"    ]"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"  }"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsxs)(r.h2,{id:"breaking-changes",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#breaking-changes",children:"#"}),"Breaking changes"]}),"\n",(0,n.jsxs)(r.ul,{children:["\n",(0,n.jsxs)(r.li,{children:["\n",(0,n.jsx)(r.p,{children:"文件名生成逻辑对齐"}),"\n",(0,n.jsxs)(r.p,{children:["在 0.1.12 版本我们为了进一步对齐 webpack 的文件名生成逻辑，重构了文件名生成的实现，但导致 [ext] 在 ",(0,n.jsx)(r.code,{children:"output.f

1ilename"}),"、",(0,n.jsx)(r.code,{children:"output.chunkFilename"}),"、",(0,n.jsx)(r.code,{children:"output.cssFilename"})," 和 ",(0,n.jsx)(r.code,{children:"output.cssChunkFilename"})," 中的 [ext] 不会再被替换，这一行为现在和 webpack 保持一致，但对于 Rspack 0.1.12 之前的版本造成了 breaking change，如果你在以上 4 个文件名配置中使用了 [ext]，你需要修改成对应的 ",(0,n.jsx)(r.code,{children:".js"})," 或 ",(0,n.jsx)(r.code,{children:".css"}),"，比如："]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"rspack.config.mjs",lang:"diff",children:(0,n.jsxs)(r.code,{children:[(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"export default {"})}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"  output: {"})}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-deleted)"},children:'-    filename: "[name][ext]",'})}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-inserted)"},children:'+    filename: "[name].js",'})}),"\n",(0,n.jsx)(r.span,{className:"line"}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-deleted)"},children:'-    chunkFilename: "async/[name][ext]",'})}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-inserted)"},children:'+    chunkFilename: "async/[name].js",'})}),"\n",(0,n.jsx)(r.span,{className:"line"}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-deleted)"},children:'-    cssFilename: "[name][ext]",'})}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-inserted)"},children:'+    cssFilename: "[name].css",'})}),"\n",(0,n.jsx)(r.span,{className:"line"}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-deleted)"},children:'-    cssChunkFilename: "async/[name][ext]",'})}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-inserted)"},children:'+    cssChunkFilename: "async/[name].css",'})}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"  }"})}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsxs)(r.p,{children:["详情：",(0,n.jsx)(r.a,{href:"https://github.com/web-infra-dev/rspack/issues/3270",rel:"noopener noreferrer",target:"_blank",children:"https://github.com/web-infra-dev/rspack/issues/3270"})]}),"\n"]}),"\n",(0,n.jsxs)(r.li,{children:["\n",(0,n.jsx)(r.p,{children:"生产环境下默认启用 realContentHash"}),"\n",(0,n.jsxs)(r.p,{children:["详情：",(0,n.jsx)(r.a,{href:"https://github.com/web-infra-dev/rspack/pull/3338",rel:"noopener noreferrer",target:"_blank",children:"https://github.com/web-infra-dev/rspack/pull/3338"})]}),"\n"]}),"\n",(0,n.jsxs)(r.li,{children:["\n",(0,n.jsx)(r.p,{children:"修改了 resolve 的 extensions"}),"\n",(0,n.jsxs)(r.p,{children:["详情：",(0,n.jsx)(r.a,{href:"https://github.com/web-infra-dev/rspack/pull/3242",rel:"noopener noreferrer",target:"_blank",children:"https://github.com/web-infra-dev/rspack/pull/3242"})]}),"\n"]}),"\n",(0,n.jsxs)(r.li,{children:["\n",(0,n.jsxs)(r.p,{children:["修改了 @rspack/dev-middleware 和 @rspack/html-plugin 的导出方式，并移除了@rspack/dev-middleware 导出的 ",(0,n.jsx)(r.code,{children:"getRspackMemoryAssets"})]}),"\n",(0,n.jsxs)(r.p,{children:["详情：",(0,n.jsx)(r.a,{href:"https://github.com/web-infra-dev/rspack/pull/3358",rel:"noopener noreferrer",target:"_blank",children:"https://github.com/web-infra-dev/rspack/pull/3358"})]}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(r.h2,{id:"webpack-兼容性更新",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#webpack-兼容性更新",children:"#"}),"webpack 兼容性更新"]}),"\n",(0,n.jsx)(r.p,{children:"随着我们支持了更多的 webpack API，我们也兼容了更多的社区的 Plugin 和 Loader。我们适配了一些社区呼声较高的 Plugin 和 Loader。"}),"\n",(0,n.jsxs)(r.h3,{id:"fork-ts-checker-webpack-plugin",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fork-ts-checker-webpack-plugin",children:"#"}),"fork-ts-checker-webpack-plugin"]}),"\n",(0,n.jsxs)(r.p,{children:["在 Rspack 里进行 TypeScript 的类型检查是一个广泛的需求，Rspack 已经完全适配了 ",(0,n.jsx)(r.a,{href:"https://github.com/TypeStrong/fork-ts-checker-webpack-plugin",rel:"noopener noreferrer",target:"_blank",children:"fork-ts-checker-webpack-plugin"}),"，你可以通过该插件在编译时进行 TypeScript 的类型检查，值得注意的是因为 TypeScript 的类型检查通常十分耗时，这使得在较大的项目上类型检查的耗时可能远超过 Rspack 本身的构建耗时。在 dev 模式下，该插件并不会阻塞构建，但是在 build 模式下该插件会阻塞构建，请根据你的实际需求选择是否启用该插件。"]}

1),"\n",(0,n.jsxs)(r.h3,{id:"license-webpack-plugin",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#license-webpack-plugin",children:"#"}),"license-webpack-plugin"]}),"\n",(0,n.jsxs)(r.p,{children:["一个广泛反馈的社区需求就是支持提取代码里的 license，Rspack 现在可以通过 ",(0,n.jsx)(r.a,{href:"https://github.com/xz64/license-webpack-plugin",rel:"noopener noreferrer",target:"_blank",children:"license-webpack-plugin"})," 实现提取代码里的 license 需求。"]}),"\n",(0,n.jsxs)(r.h3,{id:"style-loader--css-loader",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#style-loader--css-loader",children:"#"}),"style-loader & css-loader"]}),"\n",(0,n.jsxs)(r.p,{children:["虽然 Rspack 支持并默认开启了 webpack 的 ",(0,n.jsx)(r.code,{children:"experiments.css"})," 功能，但是社区上仍然有较多的生态强依赖 ",(0,n.jsx)(r.a,{href:"https://github.com/webpack/style-loader",rel:"noopener noreferrer",target:"_blank",children:"style-loader"})," & ",(0,n.jsx)(r.a,{href:"https://github.com/webpack/css-loader",rel:"noopener noreferrer",target:"_blank",children:"css-loader"}),"，我们在 0.2.0 完成了对 style-loader 和 css-loader 的支持，这也使得我们可以更好的适配 Svelte 和 Vue 等框架。"]}),"\n",(0,n.jsxs)(r.h3,{id:"node-loader",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#node-loader",children:"#"}),"node-loader"]}),"\n",(0,n.jsxs)(r.p,{children:["当使用 Rspack 打包如 NestJS 等 Node 应用时，一个常见的需求就是打包一些包含 addon 的库，这些库里的 native 依赖无法直接被打包进 JS 里，因此需要特殊处理，Rspack 适配了 ",(0,n.jsx)(r.a,{href:"https://github.com/webpack-contrib/node-loader",rel:"noopener noreferrer",target:"_blank",children:"node-loader"})," 所以你可以使用 Rspack 去构建 node 应用了。\nRspack 适配的 webpack 的 plugin 和 loader 远不仅此，我们在 ",(0,n.jsx)(r.a,{href:"https://github.com/rstackjs/rstack-examples/tree/main/rspack/loader-compat",rel:"noopener noreferrer",target:"_blank",children:"loader-compat"})," 和 ",(0,n.jsx)(r.a,{href:"https://github.com/rstackjs/rstack-examples/tree/main/rspack/plugin",rel:"noopener noreferrer",target:"_blank",children:"plugin-compat"})," 对已经适配的 plugin 和 loader 进行了追踪，如果你发现你使用的社区 plugin 和 loader 也已经兼容，欢迎提交给我们。"]}),"\n",(0,n.jsxs)(r.h2,{id:"框架生态更新",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#框架生态更新",children:"#"}),"框架生态更新"]}),"\n",(0,n.jsxs)(r.h3,{id:"modernjs-框架",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#modernjs-框架",children:"#"}),"Modern.js 框架"]}),"\n",(0,n.jsxs)(r.p,{children:["得益于 ",(0,n.jsx)(r.a,{href:"https://modernjs.dev/zh/",rel:"noopener noreferrer",target:"_blank",children:"Modern.js 框架"})," 与 Rspack 的紧密合作与并行迭代，",(0,n.jsx)(r.strong,{children:"Modern.js Rspack 模式已经覆盖了 85% 的框架能力"}),"，支持 SSR、BFF、微前端等场景，并对齐了 TypeScript 类型检查、代码兼容性检测等功能。"]}),"\n",(0,n.jsx)(r.p,{children:"在字节跳动内部，已有 80+ 个业务项目在使用 Modern.js Rspack 模式。其中一部分项目已经上线至生产环境，获得 10 倍左右的构建性能提升。"}),"\n",(0,n.jsxs)(r.h3,{id:"modernjs-doc",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#modernjs-doc",children:"#"}),"Modern.js Doc"]}),"\n",(0,n.jsx)(r.p,{children:"除了 Modern.js 框架，Modern.js 体系下的文档站开发方案 —— Modern.js Doc 也将构建工具从 webpack 切换到了 Rspack，并将 MDX 编译流程基于 Rust 重写。"}),"\n",(0,n.jsxs)(r.p,{children:["相较于早期使用 webpack 的版本，当前版本的文档构建速度可以缩短至秒级。以 Modern.js 官网文档为例，项目的启动和构建时间从 30s 缩短到 2s 以内。未来，我们计划将 Modern.js Doc 更名为 ",(0,n.jsx)(r.strong,{children:"Rspress"}),"，作为 Rspack 官方的文档站方案，并通过单独的仓库进行维护ã€

1‚"]}),"\n",(0,n.jsxs)(r.h3,{id:"vue",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#vue",children:"#"}),"Vue"]}),"\n",(0,n.jsxs)(r.p,{children:["Rspack 0.2 已经完成了对 vue-loader 的兼容。对于 Vue 3 项目，你可以使用 Rspack 原生的 CSS、TS 处理器提升 Vue 项目的编译速度，你仅需要将 vue-loader 升级到 17.2.2 以上的版本，并设置 ",(0,n.jsx)(r.code,{children:"experimentalInlineMatchResource: true"})," 即可。对于 Vue 3/Vue 2 支持的更多信息请参考 ",(0,n.jsx)(r.a,{href:"/zh/guide/integrations/vue.html",children:"Vue"}),"。"]}),"\n",(0,n.jsxs)(r.h3,{id:"svelte",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#svelte",children:"#"}),"Svelte"]}),"\n",(0,n.jsxs)(r.p,{children:["得益于 Rspack 对 Loader API 的良好支持和 ",(0,n.jsx)(r.a,{href:"https://github.com/sveltejs/svelte-loader",rel:"noopener noreferrer",target:"_blank",children:"svelte-loader"})," 的优良设计，Rspack 已经完全适配了 ",(0,n.jsx)(r.a,{href:"https://github.com/sveltejs/svelte-loader",rel:"noopener noreferrer",target:"_blank",children:"svelte-loader"}),"，因此你可以在 Rspack 直接使用 ",(0,n.jsx)(r.a,{href:"https://github.com/sveltejs/svelte-loader",rel:"noopener noreferrer",target:"_blank",children:"svelte-loader"})," 进行 svelte 应用的开发，你可以参考 ",(0,n.jsx)(r.a,{href:"https://github.com/rstackjs/rstack-examples/tree/main/rspack/svelte",rel:"noopener noreferrer",target:"_blank",children:"example-svelte"})," 完成 svelte-loader 相关配置。"]}),"\n",(0,n.jsxs)(r.h3,{id:"storybook",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#storybook",children:"#"}),"Storybook"]}),"\n",(0,n.jsxs)(r.p,{children:["在 Storybook 团队的帮助下，Rspack 完成了对 Storybook React 版本的支持，你可以按照 ",(0,n.jsx)(r.a,{href:"/zh/guide/migration/storybook.html",children:"迁移 Storybook"})," 的方式从 webpack 版本迁移到 Rspack 版本，在实际的项目中测试在不开启 docgen 功能的情况下，Rspack 版本比 webpack 版本快 5-10 倍，在开启了 docgen 的情况下，因为 Rspack 仍然依赖 babel 处理 docgen,因此性能受到影响，但也有 2-3 倍左右提升。"]}),"\n",(0,n.jsxs)(r.h3,{id:"angular",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#angular",children:"#"}),"Angular"]}),"\n",(0,n.jsx)(r.p,{children:"在 Valor 团队的帮助下，Rspack 完成了对 angular 的初步支持，你可以使用 Rspack 构建 angular 应用，但是目前对 dev 和 HMR 的支持还没适配完，我们将在 0.2.x 版本继续跟进 Angular 的支持。"}),"\n",(0,n.jsxs)(r.h3,{id:"nestjs",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#nestjs",children:"#"}),"NestJS"]}),"\n",(0,n.jsx)(r.p,{children:"在 Rosa、Nx 和 Valor 的帮助下，Rspack 完成了对 NestJS 的编译支持，你可以使用 Rspack 打包 NestJS 应用，在实际项目中进行测试，Rspack 相比 webpack 版本有 5-10 倍的构建性能提升。"}),"\n",(0,n.jsxs)(r.h2,{id:"开发指南",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#开发指南",children:"#"}),"开发指南"]}),"\n",(0,n.jsxs)(r.p,{children:["Rspack 团队非常重视开源社区做出的宝贵贡献。我们致力于保持开放的态度，努力在每一步都让开源社区参与进来。\n这就是为什么我们目前正在制作一份全面的",(0,n.jsx)(r.a,{href:"/zh/contribute/index.html",children:"开发指南"}),"，为贡献者提供 Rspack 所有的开发文档。\n当前版本的指南包含构建、测试、调试和分析 Rspack 的所有必要资料。此外，它还包括贡献流程，例如如何创建最小的",(0,n.jsx)(r.a,{href:"https://github.com/web-infra-dev/rspack-repro",rel:"noopener noreferrer",target:"_blank",children:"可重现示例"}),"。\n将来，该指南还会概述 Rspack 的整体架构，使贡献者能够深入了解该项目的内部工作原理。"]}

1),"\n",(0,n.jsxs)(r.h2,{id:"测试架构",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#测试架构",children:"#"}),"测试架构"]}),"\n",(0,n.jsx)(r.p,{children:"针对稳定发布，我们目前："}),"\n",(0,n.jsxs)(r.ul,{children:["\n",(0,n.jsx)(r.li,{children:"在 Rspack 仓库中集成各种示例（目前有 38 个示例）"}),"\n",(0,n.jsx)(r.li,{children:"正在从 webpack 仓库移植所有的 webpack 集成测试"}),"\n",(0,n.jsx)(r.li,{children:"在 Node.js 版本 14、16 和 18 上运行所有测试"}),"\n",(0,n.jsx)(r.li,{children:"搭建了独立的 ecosystem-ci 仓库用于集成社区的上层框架"}),"\n"]}),"\n",(0,n.jsxs)(r.h2,{id:"nightly-release",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#nightly-release",children:"#"}),"Nightly release"]}),"\n",(0,n.jsx)(r.p,{children:"为了加速迭代，Rspack 每天发布一次带有“@nightly” 标签的 npm 包。"}),"\n",(0,n.jsxs)(r.h2,{id:"致谢",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#致谢",children:"#"}),"致谢"]}),"\n",(0,n.jsx)(r.p,{children:"随着 Rspack 0.2 版本的发布，我们衷心感谢所有为这个版本付出努力的贡献者。"}),"\n",(0,n.jsx)(r.p,{children:"特别感谢"}),"\n",(0,n.jsxs)(r.ul,{children:["\n",(0,n.jsxs)(r.li,{children:[(0,n.jsx)(r.a,{href:"https://github.com/TheLarkInn",rel:"noopener noreferrer",target:"_blank",children:"@TheLarkInn"})," 和 ",(0,n.jsx)(r.a,{href:"https://github.com/alexander-akait",rel:"noopener noreferrer",target:"_blank",children:"@alexander-akait"})," ，回答和解决了很多 Rspack 团队关于 webpack 的疑问。"]}

1),"\n",(0,n.jsxs)(r.li,{children:[(0,n.jsx)(r.a,{href:"https://github.com/zackarychapple",rel:"noopener noreferrer",target:"_blank",children:"@zackarychapple"}),"、",(0,n.jsx)(r.a,{href:"https://github.com/valorkin",rel:"noopener noreferrer",target:"_blank",children:"@valorkin"}),"、",(0,n.jsx)(r.a,{href:"https://github.com/edusperoni",rel:"noopener noreferrer",target:"_blank",children:"@edusperoni"})," 以及 ",(0,n.jsx)(r.a,{href:"https://github.com/Coly010",rel:"noopener noreferrer",target:"_blank",children:"@Coly101"})," ，帮助 Rspack 对 Angular 做了基本支持，特别是 ",(0,n.jsx)(r.a,{href:"https://github.com/zackarychapple",rel:"noopener noreferrer",target:"_blank",children:"@zackarychapple"})," 帮助我们 review 这篇发布公告的英文版本。"]}),"\n",(0,n.jsxs)(r.li,{children:[(0,n.jsx)(r.a,{href:"https://github.com/xin2017338",rel:"noopener noreferrer",target:"_blank",children:"@xin2017338"}),"，在 Rspack 里支持了 System.js format，optional-dependency 等功能，并在 Windows 兼容方面做了很多贡献。"]}),"\n",(0,n.jsxs)(r.li,{children:[(0,n.jsx)(r.a,{href:"https://github.com/faga295",rel:"noopener noreferrer",target:"_blank",children:"@faga295"}),"，在 Rspack 里支持了解压代码注释功能和 ",(0,n.jsx)(r.code,{children:"rspack preview"})," 功能。"]}),"\n",(0,n.jsxs)(r.li,{children:[(0,n.jsx)(r.a,{href:"https://github.com/lippzhang",rel:"noopener noreferrer",target:"_blank",children:"@lippzhang"}),"，在对齐 webpack 行为方面做了很多贡献。"]}),"\n",(0,n.jsxs)(r.li,{children:[(0,n.jsx)(r.a,{href:"https://github.com/HerringtonDarkholme",rel:"noopener noreferrer",target:"_blank",children:"@HerringtonDarkholme"}),"，允许 Rspack 使用 rspack.config.ts 作为配置文件"]}),"\n",(0,n.jsxs)(r.li,{children:[(0,n.jsx)(r.a,{href:"https://github.com/dhruvkelawala",rel:"noopener noreferrer",target:"_blank",children:"@dhruvkelawala"}),", 在 Rspack 里实现了 builtins.provide 功能"]}),"\n",(0,n.jsxs)(r.li,{children:[(0,n.jsx)(r.a,{href:"https://github.com/magic-akari",rel:"noopener noreferrer",target:"_blank",children:"@magic-akari"}),"，在 Rspack 里支持了 ",(0,n.jsx)(r.code,{children:'new URL("./foo", import.meta.url)'})," 语法"]}),"\n",(0,n.jsxs)(r.li,{children:[(0,n.jsx)(r.a,{href:"https://github.com/tuchg",rel:"noopener noreferrer",target:"_blank",children:"@tuchg"}),"，在 Rspack 里支持了打包 .wasm 文件"]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"我们还要感谢所有使用 Rspack 的用户，对 Rspack 这样一个年轻的开源项目展现出信任，你们的宝贵反馈对我们项目的改进和优化起到了关键作用。你们的支持和信任是我们前进的动力。"}),"\n",(0,n.jsx)(r.p,{children:"最后，让我们共同庆祝 Rspack 0.2 版本的发布，并期待未来的发展和更多的合作机会。再次感谢所有支持和关注 Rspack 的朋友们！"})]})}function c(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:r}={...(0,a.R)(),...e.components};return r?(0,n.jsx)(r,{...e,children:(0,n.jsx)(i,{...e})}):i(e)}c.__RSPRESS_PAGE_META={},c.__RSPRESS_PAGE_META["zh%2Fblog%2Fannouncing-0-2.mdx"]={toc:[{id:"主要功能更新",text:"主要功能更新",depth:2},{id:"loader",text:"Loader",depth:3},{id:"plugin-hooks",text:"Plugin hooks",depth:3},{id:"realcontenthash",text:"realContentHash",depth:3},{id:"esmsystem-format",text:"ESM/System format",depth:3},{id:"新的-splitchunksplugin-实现",text:"新的 `SplitChunksPlugin` 实现",depth:3},{id:"datauri-支持",text:"DataURI 支持",depth:3},{id:"breaking-changes",text:"Breaking changes",depth:2},{id:"webpack-兼容性更新",text:"webpack 兼容性更新",depth:2},{id:"fork-ts-checker-webpack-plugin",text:"fork-ts-checker-webpack-plugin",depth:3},{id:"license-webpack-plugin",text:"license-webpack-plugin",depth:3},{id:"style-loader--css-loader",text:"style-loader & css-loader",depth:3},{id:"node-loader",text:"node-loader",depth:3},{id:"框架生态更新",text:"框架生态更新",depth:2},{id:"modernjs-框架",text:"Modern.js 框架",depth:3},{id:"modernjs-doc",text:"Modern.js Doc",depth:3},{id:"vue",text:"Vue",depth:3},{id:"svelte",text:"Svelte",depth:3},{id:"storybook",text:"Storybook",depth:3},{id:"angular",text:"Angular",depth:3},{id:"nestjs",text:"NestJS",depth:3},{id:"开发指南",text:"开发指南",depth:2},{id:"测试架构",text:"测试架构",depth:2},{id:"nightly-release",text:"Nightly release",depth:2},{id:"致谢",text:"致谢",depth:2}],title:"Rspack 0.2 发布公告",headingTitle:"Rspack 0.2 发布公告",frontmatter:{description:"Rspack 0.2 版本发布，新增了诸多功能，如 realContentHash、DataURI、ESM format 的支持等。",date:"2023-06-02T13:11:00.000Z",sidebar:!1,authors:[{name:"Rspack Team",avatar:"https://assets.rspack.rs/rspack/rspack-logo-with-background.png",title:"@rspack_dev",x:"https://x.com/rspack_dev"}]}},s.d(r,{default:()=>c})},No(e,r,s){s("oM");var n=s("i"),a=s("iO"),l=s("O"),i=s("CA");let c=e=>null!==e&&"object"==typeof e&&"string"==typeof e.name&&"string"==typeof e.avatar,h=e=>{var r;if(!e.github)return e;let s=e.github.startsWith("http")?e.github:`https://github.com/${e.github}`;return{...e,github:s,title:null!=(r=e.title)?r:`@${e.github}`}};function o({className:e}){var r;let{page:s}=(0,a.e)(),t=null!=(r=s.frontmatter)?r:{},d=(0,l.useMemo)(()=>Array.isArray(t.authors)?t.authors.filter(c).map(h):Array.isArray(t.author)?t.author.filter(c).map(h):c(t.author)?[h(t.author)]:[],[t]);return(0,n.jsx)(i.h,{authors:d,className:((...e)=>

1e.filter(Boolean).join(" "))("root-YZxMH8",e)})}s.d(r,{d:()=>o})},CA(e,r,s){s("Lb");var n=s("i");let a=(...e)=>e.filter(Boolean).join(" "),l=e=>{var r,s;return`${e.name}-${null!=(r=null!=(s=e.github)?s:e.x)?r:e.avatar}`},i=()=>(0,n.jsx)("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:(0,n.jsx)("path",{fill:"currentColor",d:"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"})}),c=()=>(0,n.jsx)("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:(0,n.jsx)("path",{fill:"currentColor",d:"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584l-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"})});function h({author:e,className:r}){let{avatar:s,name:l,title:o}=e,t=(({github:e,links:r,name:s,x:a})=>[...e?[{href:e,label:`${s}'s GitHub`,icon:(0,n.jsx)(i,{})}]:[],...a?[{href:a,label:`${s}'s X profile`,icon:(0,n.jsx)(c,{})}]:[],...null!=r?r:[]])(e);return(0,n.jsxs)("div",{className:a("root-Sr_5x3",r),children:[(0,n.jsx)("img",{src:s,alt:l,className:"avatar-XCZJhu",loading:"lazy",decoding:"async"}),(0,n.jsxs)("div",{className:"content-BhgM4E",children:[(0,n.jsxs)("div",{className:"nameRow-U9Q3S8",children:[(0,n.jsx)("div",{className:"name-k91bx6",children:l}),t.length>0?(0,n.jsx)("div",{className:"links-jK83Yg",children:t.map(e=>(0,n.jsx)("a",{href:e.href,target:"_blank",rel:"noopener noreferrer",className:"link-yDHY4Y","aria-label":e.label,children:e.icon},`${e.label}-${e.href}`))}):null]}),o?(0,n.jsx)("div",{className:"title-MMKZdf",children:o}):null]})]})}function o({authors:e,className:r,compact:s=!1}){if(0===e.length)return null;if(!s)return(0,n.jsx)("div",{className:a("group-n_jNI7",r),children:e.map(e=>(0,n.jsx)(h,{author:e,className:"groupItem-m5U5nn"},l(e)))});let i=e.slice(0,8),c=e.length-i.length,t=e.map(e=>e.name).join(", "),d=e.length<=2;return(0,n.jsxs)("div",{className:a("compactGroup-Ij3Cuk",r),title:t,children:[(0,n.jsxs)("div",{className:"compactAvatars-K_PsP6","aria-hidden":"true",children:[i.map(e=>(0,n.jsx)("img",{src:e.avatar,alt:"",className:"compactAvatar-VpXzKi",loading:"lazy",decoding:"async"},l(e))),c>0?(0,n.jsxs)("span",{className:"compactOverflow-PYOrvO",children:["+",c]}):null]}),d?(0,n.jsx)("div",{className:"compactNames-yJrKbP",children:t}):null]})}s.d(r,{h:()=>o})}}]);