https://rsbuild.rs/static/js/async/route-1d95d608466a.3d86e694ff.js

1"use strict";(self.rspackChunkrsbuild_website=self.rspackChunkrsbuild_website||[]).push([[64],{yQn(e,r,s){s.r(r);var n=s("E"),i=s("HC");function l(e){let r={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(r.h1,{id:"performancednsprefetch",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#performancednsprefetch",children:"#"}),"performance.dnsPrefetch"]}),"\n",(0,n.jsxs)(r.ul,{children:["\n",(0,n.jsxs)(r.li,{children:[(0,n.jsx)(r.strong,{children:"Type:"})," ",(0,n.jsx)(r.code,{children:"string[] | undefined"})]}),"\n",(0,n.jsxs)(r.li,{children:[(0,n.jsx)(r.strong,{children:"默认值："})," ",(0,n.jsx)(r.code,{children:"undefined"})]}),"\n"]}),"\n",(0,n.jsxs)(r.p,{children:["注入 ",(0,n.jsx)(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/dns-prefetch",rel:"noopener noreferrer",target:"_blank",children:(0,n.jsx)(r.code,{children:'<link rel="dns-prefetch">'})})," 标签到 HTML 文件中。"]}),"\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:"当浏览器从（第三方）服务器请求资源时，必须先将该跨源域名解析为 IP 地址，然后浏览器才能发出请求。此过程称为 DNS 解析。虽然 DNS 缓存可以帮助减少此延迟，但 DNS 解析可能会给请求增加明显的延迟。"}),"\n",(0,n.jsxs)(r.p,{children:["配置 ",(0,n.jsx)(r.code,{children:"dns-prefetch"})," 可以在请求资源之前解析域名，降低请求延迟，提升加载性能。"]}),"\n",(0,n.jsxs)(r.p,{children:["更多信息请参考：",(0,n.jsx)(r.a,{href:"https://developer.mozilla.org/zh-CN/docs/Web/Performance/dns-prefetch",rel:"noopener noreferrer",target:"_blank",children:"使用 dns-prefetch"}),"。"]}),"\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)(n.Fragment,{children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"rsbuild.config.ts",lang:"ts",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:"  performance"}),(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:"    dnsPrefetch"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'https://example.com'"}),(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.jsx)(r.p,{children:"在 HTML 中生成的标签为："}),"\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:"html",children:(0,n.jsx)(r.code,{children:(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-string-expression)"},children:"link"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" rel"}),(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:'"dns-prefetch"'}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" href"}),(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:'"https://example.com"'}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" />"})]})})})}),"\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:"一般来说，网站不应该配置超过 10 个 DNS prefetch。"}),"\n",(0,n.jsx)(r.p,{children:"使用过多的 DNS prefetch 可能会导致性能问题，因为浏览器对维持的 DNS 请求数量有限制。进行过多的 DNS 预解析，或者对最终没有使用的 domain 进行 DNS 预解析，会造成资源争用，并可能使浏览器运行效率降低。"}),"\n",(0,n.jsxs)(r.p,{children:["详见 ",(0,n.jsx)(r.a,{href:"https://www.splunk.com/en_us/blog/learn/dns-prefetch.html",rel:"noopener noreferrer",target:"_blank",children:"What Is a DNS Prefetch?"}),"。"]})]})}function o(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:r}={...(0,i.R)(),...e.components};return r?(0,n.jsx)(r,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}o.__RSPRESS_PAGE_META={},o.__RSPRESS_PAGE_META["zh%2Fconfig%2Fperformance%2Fdns-prefetch.mdx"]={toc:[{id:"何时使用",text:"何时使用",depth:2},{id:"示例",text:"示例",depth:2},{id:"注意事项",text:"注意事项",depth:2}],title:"performance.dnsPrefetch",headingTitle:"performance.dnsPrefetch",frontmatter:{description:"当浏览器从（第三方）服务器请求资源时，必须先将该跨源域名解析为 IP 地址，然后浏览器才能发出请求。此过程称为 DNS 解析。虽然 DNS 缓存可以帮助减少此延迟，但 DNS 解析可能会给请求增加明显的延迟。"}},s.d(r,{default:()=>o})}}]);