<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>Rsbuild Blogs</title>
        <link>https://rsbuild.rs</link>
        <description>Rsbuild is a high-performance build tool powered by Rspack.</description>
        <lastBuildDate>Tue, 12 May 2026 13:13:42 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>zh-CN</language>
        <item>
            <title><![CDATA[Rsbuild 2.0 发布]]></title>
            <link>https://rsbuild.rs/zh/blog/v2-0</link>
            <guid isPermaLink="false">/zh/blog/v2-0</guid>
            <pubDate>Wed, 22 Apr 2026 12:00:00 GMT</pubDate>
            <description><![CDATA[Rsbuild 2.0 正式发布，升级 Rspack 2.0，引入 RSC 支持和更现代的默认行为。]]></description>
            <content:encoded><![CDATA[<!--$--><p><em>2026 年 4 月 22 日</em></p>
<h1 class="rp-toc-include" id="rsbuild-20-发布"><a href="#rsbuild-20-发布" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Rsbuild 2.0 发布<!-- --> </h1><div class="rp-not-doc rp-llms-container"><button class="rp-not-doc rp-llms-button rp-llms-copy-button"><div class="rp-llms-copy-button__icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg></div><span>复制 Markdown</span></button><button class="rp-llms-button rp-llms-view-options__trigger "><svg width="1em" height="1em" viewBox="0 0 32 32" class="rp-llms-view-options__arrow "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button></div>
<p><img src="https://assets.rspack.rs/rsbuild/rsbuild-banner-v2.0.png" alt=""/></p>
<p>我们很高兴地宣布 Rsbuild 2.0 已经正式发布！</p>
<p>Rsbuild 是一个由 Rspack 驱动的现代 Web 应用构建工具，也是 Rstack 生态的重要基础设施。围绕 Rsbuild，我们陆续打造了一系列上层工具，包括 <a href="https://github.com/web-infra-dev/rspress" target="_blank" rel="noopener noreferrer" class="rp-link">Rspress</a>、<a href="https://github.com/web-infra-dev/rslib" target="_blank" rel="noopener noreferrer" class="rp-link">Rslib</a>、<a href="https://github.com/web-infra-dev/rstest" target="_blank" rel="noopener noreferrer" class="rp-link">Rstest</a>、<a href="https://github.com/rstackjs/storybook-rsbuild" target="_blank" rel="noopener noreferrer" class="rp-link">Storybook Rsbuild</a> 等。这些工具通过 Rsbuild 共享统一的构建能力与插件体系，在应用开发、库构建、文档站点以及测试等场景中提供一致的开发体验。</p>
<p>自 1.0 发布以来，Rsbuild 的 npm 周下载量已增长超过 <strong>15 倍</strong>，并成为 Rspack 新项目的首选构建工具。与此同时，越来越多团队从 webpack、Create React App 等工具迁移至 Rsbuild，并在构建效率和开发体验上获得了提升。</p>
<p><img src="https://assets.rspack.rs/rsbuild/assets/rsbuild-2-0-downloads.png" alt=""/></p>
<p>为了帮助生态平稳升级到 2.0，我们投入了三个月进行验证与打磨，期间发布了 20 多个预览版本。目前，Rslib、Rstest、Rspress、Storybook Rsbuild 和 Modern.js 均已完成升级，并在生产环境中稳定运行。</p>
<p>2.0 版本的主要改进包括：</p>
<ul>
<li>新特性：<!-- -->
<ul>
<li><a href="#%E5%8D%87%E7%BA%A7-rspack-20" class="rp-link">升级 Rspack 2.0</a></li>
<li><a href="#react-server-components-%E6%94%AF%E6%8C%81" class="rp-link">React Server Components 支持</a></li>
<li><a href="#%E5%BC%80%E5%8F%91%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%8E%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%80%9A%E4%BF%A1" class="rp-link">开发服务器与客户端通信</a></li>
<li><a href="#%E6%89%A9%E5%B1%95%E5%86%85%E7%BD%AE-server" class="rp-link">支持扩展内置 Server</a></li>
<li><a href="#%E6%94%AF%E6%8C%81%E8%87%AA%E5%AE%9A%E4%B9%89-logger" class="rp-link">支持自定义 logger</a></li>
<li><a href="#%E6%9B%B4%E6%98%93%E7%94%A8%E7%9A%84%E6%8B%86%E5%8C%85%E9%85%8D%E7%BD%AE" class="rp-link">更易用的拆包配置</a></li>
<li><a href="#create-rsbuild-%E6%A8%A1%E6%9D%BF%E6%9B%B4%E6%96%B0" class="rp-link">create-rsbuild 模板更新</a></li>
</ul>
</li>
<li>更轻量：<!-- -->
<ul>
<li><a href="#%E7%B2%BE%E7%AE%80%E4%BE%9D%E8%B5%96" class="rp-link">默认依赖从 13 个减少到 4 个</a></li>
</ul>
</li>
<li>更安全：<!-- -->
<ul>
<li><a href="#%E9%BB%98%E8%AE%A4-host-%E5%8F%98%E5%8C%96" class="rp-link">默认仅监听 &#x27;localhost&#x27;</a></li>
<li><a href="#proxy-%E4%B8%AD%E9%97%B4%E4%BB%B6%E5%8D%87%E7%BA%A7" class="rp-link">Proxy 中间件升级，支持 HTTP/2 代理</a></li>
</ul>
</li>
<li>更现代：<!-- -->
<ul>
<li><a href="#pure-esm-%E5%8C%85" class="rp-link">Pure ESM 包</a></li>
<li><a href="#nodejs-%E6%94%AF%E6%8C%81" class="rp-link">不再支持 Node.js 18</a></li>
<li><a href="#%E9%BB%98%E8%AE%A4%E7%9B%AE%E6%A0%87%E7%8E%AF%E5%A2%83%E6%9B%B4%E6%96%B0" class="rp-link">默认目标环境更新</a></li>
<li><a href="#esm-nodejs-%E4%BA%A7%E7%89%A9" class="rp-link">默认输出 ESM Node.js 产物</a></li>
<li><a href="#%E8%A3%85%E9%A5%B0%E5%99%A8%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0" class="rp-link">默认使用 &#x27;2023-11&#x27; 装饰器版本</a></li>
</ul>
</li>
</ul>
<h2 class="rp-toc-include" id="升级-rspack-20"><a href="#升级-rspack-20" class="rp-header-anchor rp-link" aria-hidden="true">#</a>升级 Rspack 2.0</h2>
<p>Rsbuild 2.0 基于 Rspack 2.0 实现，因此也继承了 Rspack 2.0 在构建性能、产物优化和底层能力上的一系列改进。</p>
<p>参考 <a href="https://rspack.rs/zh/blog/announcing-2-0" target="_blank" rel="noopener noreferrer" class="rp-link">Rspack 2.0 博客</a> 了解这部分变更。</p>
<h2 class="rp-toc-include" id="react-server-components-支持"><a href="#react-server-components-支持" class="rp-header-anchor rp-link" aria-hidden="true">#</a>React Server Components 支持</h2>
<p><a href="https://react.dev/reference/rsc/server-components" target="_blank" rel="noopener noreferrer" class="rp-link">React Server Components</a> (RSC) 是一种预先渲染的 React 组件类型，它将数据获取与组件逻辑结合起来，并减少发送到客户端的 JavaScript。</p>
<p>为了帮助基于 Rsbuild 的 Web 应用或框架更便捷地使用 RSC，我们提供了 <a href="https://github.com/rstackjs/rsbuild-plugin-rsc" target="_blank" rel="noopener noreferrer" class="rp-link">rsbuild-plugin-rsc</a> 插件。该插件基于 Rspack 内置的 RSC 能力实现，并借助 Rsbuild 的 <a href="/zh/guide/advanced/environments" class="rp-link">Environments API</a> 对 client 与 server 等多环境进行统一组织，降低了接入与配置成本。</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { defineConfig } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;@rsbuild/core&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { pluginReact } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;@rsbuild/plugin-react&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { pluginRSC } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;rsbuild-plugin-rsc&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-token-function)"> defineConfig</span><span style="color:var(--shiki-foreground)">({</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  plugins</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> [</span></span>
<span class="line"><span style="color:var(--shiki-token-function)">    pluginReact</span><span style="color:var(--shiki-foreground)">()</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-token-function)">    pluginRSC</span><span style="color:var(--shiki-foreground)">({</span></span>
<span class="line"><span style="color:var(--shiki-token-comment)">      // Plugin options</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    })</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  ]</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  environments</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    server</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-token-comment)">      // Server config...</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    client</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-token-comment)">      // Client config...</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">});</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p>目前该插件仍处于实验阶段。它已经能够运行 React Router 的 <a href="https://github.com/rstackjs/rsbuild-plugin-rsc/tree/main/examples/react-router" target="_blank" rel="noopener noreferrer" class="rp-link">RSC 示例</a>，也已经在 <a href="https://modernjs.dev/guides/basic-features/render/rsc" target="_blank" rel="noopener noreferrer" class="rp-link">Modern.js 框架</a> 中落地使用。</p>
<p>另外，我们也在与 <a href="https://tanstack.com/" target="_blank" rel="noopener noreferrer" class="rp-link">TanStack</a> 团队展开合作，计划在后续版本中提供对 <a href="https://tanstack.com/start" target="_blank" rel="noopener noreferrer" class="rp-link">TanStack Start</a> 和 <a href="https://tanstack.com/blog/react-server-components" target="_blank" rel="noopener noreferrer" class="rp-link">TanStack 的 RSC</a> 的支持。TanStack Start 是一个基于 TanStack Router 构建的全栈框架，我们非常期待结合双方的能力，共同探索 RSC 在不同场景下的更多可能性。</p>
<h2 class="rp-toc-include" id="开发服务器与客户端通信"><a href="#开发服务器与客户端通信" class="rp-header-anchor rp-link" aria-hidden="true">#</a>开发服务器与客户端通信</h2>
<p>在支持 React Server Components 的过程中，我们发现一些场景需要在开发服务器与浏览器之间进行通信。例如，服务端完成某些操作后，需要主动通知客户端执行对应逻辑。</p>
<p>为此，Rsbuild 2.0 提供了一组通信 API：</p>
<ul>
<li>服务端可通过 <a href="/zh/api/javascript-api/environment-api#hotsend" class="rp-link">hot.send</a> 向当前 environment 对应的客户端发送消息</li>
<li>客户端可通过 <code>import.meta.webpackHot.on</code> 监听这些自定义事件</li>
</ul>
<p>这些 API 复用了现有的 HMR 通道，无需额外创建 WebSocket 连接。同时，消息仅会发送到匹配的 environment，避免不必要的广播。</p>
<p>例如，当服务端状态发生变化时，通知客户端更新，而不是触发整页刷新：</p>
<ul>
<li>在服务端触发消息：</li>
</ul>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-constant)">server</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">environments</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">web</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">hot</span><span style="color:var(--shiki-token-function)">.send</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">&#x27;data-change&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  count</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> 1</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">});</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<ul>
<li>在客户端监听消息：</li>
</ul>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">src/dev-sync.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="src/dev-sync.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">if</span><span style="color:var(--shiki-foreground)"> (</span><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)">.</span><span style="color:var(--shiki-token-constant)">meta</span><span style="color:var(--shiki-foreground)">.webpackHot) {</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">  import</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">meta</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">webpackHot</span><span style="color:var(--shiki-token-function)">.on</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">&#x27;data-change&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> ({ count }) </span><span style="color:var(--shiki-token-keyword)">=&gt;</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-token-constant)">    console</span><span style="color:var(--shiki-token-function)">.log</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">&#x27;data updated:&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> count);</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  });</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">}</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<h2 class="rp-toc-include" id="扩展内置-server"><a href="#扩展内置-server" class="rp-header-anchor rp-link" aria-hidden="true">#</a>扩展内置 Server</h2>
<p>Rsbuild 2.0 新增了 <a href="/zh/config/server/setup" class="rp-link">server.setup</a> 选项，用于在开发服务器或预览服务器启动时执行初始化逻辑。</p>
<p>该选项相较于原有的 <code>server.setupMiddlewares</code> 更为强大，用于对 Rsbuild 内置服务器进行定制，例如注册中间件、执行启动前任务，或根据 dev / preview 模式注入不同逻辑。通过 <code>server.setup</code>，这些能力可以直接在 Rsbuild 配置中完成。</p>
<p>例如，为本地开发和预览环境添加一个简单的接口：</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  server</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-token-function)">    setup</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> ({ server }) </span><span style="color:var(--shiki-token-keyword)">=&gt;</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-token-constant)">      server</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">middlewares</span><span style="color:var(--shiki-token-function)">.use</span><span style="color:var(--shiki-foreground)">((req</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> res</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> next) </span><span style="color:var(--shiki-token-keyword)">=&gt;</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">        if</span><span style="color:var(--shiki-foreground)"> (</span><span style="color:var(--shiki-token-constant)">req</span><span style="color:var(--shiki-foreground)">.url </span><span style="color:var(--shiki-token-keyword)">===</span><span style="color:var(--shiki-token-string-expression)"> &#x27;/api/health&#x27;</span><span style="color:var(--shiki-foreground)">) {</span></span>
<span class="line"><span style="color:var(--shiki-token-constant)">          res</span><span style="color:var(--shiki-token-function)">.end</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">&#x27;ok&#x27;</span><span style="color:var(--shiki-foreground)">);</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">          return</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">        }</span></span>
<span class="line"><span style="color:var(--shiki-token-function)">        next</span><span style="color:var(--shiki-foreground)">();</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      });</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<h2 class="rp-toc-include" id="支持自定义-logger"><a href="#支持自定义-logger" class="rp-header-anchor rp-link" aria-hidden="true">#</a>支持自定义 logger</h2>
<p>通过新增的 <a href="/zh/config/custom-logger" class="rp-link">customLogger</a> 选项，你可以为多个 Rsbuild 实例自定义不同的 logger。</p>
<p>这允许你为不同 Rsbuild 实例设置不同的日志级别、输出前缀，或者接入自定义的日志系统，而无需修改 <a href="/zh/api/javascript-api/core#logger" class="rp-link">全局 logger 实例</a>。</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { createLogger</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> defineConfig } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;@rsbuild/core&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-token-constant)"> customLogger</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-token-function)"> createLogger</span><span style="color:var(--shiki-foreground)">({</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  level</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;warn&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  prefix</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;[web]&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">});</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-token-function)"> defineConfig</span><span style="color:var(--shiki-foreground)">({</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  customLogger</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">});</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<blockquote>
<p>查看 <a href="/zh/guide/advanced/logging" class="rp-link">日志指南</a> 了解更多。</p>
</blockquote>
<h2 class="rp-toc-include" id="更易用的拆包配置"><a href="#更易用的拆包配置" class="rp-header-anchor rp-link" aria-hidden="true">#</a>更易用的拆包配置</h2>
<p>在 1.x 中，Rsbuild 通过 <a href="https://v1.rsbuild.rs/config/performance/chunk-split" target="_blank" rel="noopener noreferrer" class="rp-link">performance.chunkSplit</a> 封装了常见的拆包策略，但它的设计与 Rspack 的 <code>splitChunks</code> 差异较大，开发者需要额外理解 <code>strategy</code>、<code>forceSplitting</code> 等概念。对于 coding agent 来说，也难以直接生成符合社区习惯的 <code>splitChunks</code> 配置，通常还需要进行额外转换。</p>
<p>因此，Rsbuild 2.0 提供了新的 <a href="/zh/config/split-chunks" class="rp-link">splitChunks</a> 选项。它的行为与 Rspack 的 <code>splitChunks</code> 完全对齐，并通过额外的 <code>preset</code> 选项来提供预设配置。</p>
<p>例如，使用 <code>per-package</code> 预设将每个 package 拆分成一个独立的 chunk：</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  splitChunks</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    preset</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;per-package&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    chunks</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;all&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<blockquote>
<p><code>performance.chunkSplit</code> 已在 2.0 中废弃，但现有配置仍可继续使用。建议参考 <a href="/zh/guide/upgrade/v1-to-v2#迁移-performancechunksplit" class="rp-link">迁移 performance.chunkSplit</a> 进行迁移。</p>
</blockquote>
<h2 class="rp-toc-include" id="create-rsbuild-模板更新"><a href="#create-rsbuild-模板更新" class="rp-header-anchor rp-link" aria-hidden="true">#</a>create-rsbuild 模板更新</h2>
<p>在核心能力升级的同时，我们也更新了 <code>create-rsbuild</code> 中的模板，使新项目的初始化流程更加贴近当前的开发实践：</p>
<ul>
<li>默认生成 <code>AGENTS.md</code> 文件，并支持在初始化时安装 <a href="https://github.com/rstackjs/agent-skills?tab=readme-ov-file#rsbuild-skills" target="_blank" rel="noopener noreferrer" class="rp-link">rsbuild-best-practices</a> 等 Agent Skills。</li>
<li>创建 React 项目时，可以选择 <a href="/zh/guide/framework/react#react-compiler" class="rp-link">React Compiler</a> 作为可选工具。</li>
<li>新增对 <a href="https://github.com/web-infra-dev/rslint" target="_blank" rel="noopener noreferrer" class="rp-link">Rslint</a> 的实验性支持，Rslint 是基于 <code>typescript-go</code> 的高性能代码检查工具。</li>
<li>移除过时的 React 18 和 Vue 2 模板。</li>
</ul>
<h2 class="rp-toc-include" id="精简依赖"><a href="#精简依赖" class="rp-header-anchor rp-link" aria-hidden="true">#</a>精简依赖</h2>
<p>Rsbuild 2.0 对默认依赖进行了精简，将仅在特定场景下使用的包移出默认依赖，使默认依赖的数量从 13 个减少到 4 个，安装体积约减少 2 MB。</p>
<p>本次调整主要涉及：</p>
<ul>
<li>不再默认安装 <a href="https://www.npmjs.com/package/core-js" target="_blank" rel="noopener noreferrer" class="rp-link">core-js</a>，在使用 <a href="/zh/config/output/polyfill" class="rp-link">output.polyfill</a> 时需要手动安装。</li>
<li>不再默认安装 <a href="https://www.npmjs.com/package/@module-federation/runtime-tools" target="_blank" rel="noopener noreferrer" class="rp-link">@module-federation/runtime-tools</a>，在使用 <a href="/zh/config/module-federation/options" class="rp-link">moduleFederation.options</a> 时需要手动安装，Module Federation 2.0 不受影响。</li>
<li>移除 <a href="https://www.npmjs.com/package/webpack-bundle-analyzer" target="_blank" rel="noopener noreferrer" class="rp-link">webpack-bundle-analyzer</a> 依赖，推荐使用 <a href="/zh/guide/debug/rsdoctor" class="rp-link">Rsdoctor</a> 进行产物分析，或自行安装和注册 <code>webpack-bundle-analyzer</code>。</li>
</ul>
<h2 class="rp-toc-include" id="默认-host-变化"><a href="#默认-host-变化" class="rp-header-anchor rp-link" aria-hidden="true">#</a>默认 host 变化</h2>
<p><a href="/zh/config/server/host" class="rp-link">server.host</a> 的默认值从 <code>&#x27;0.0.0.0&#x27;</code> 调整为 <code>&#x27;localhost&#x27;</code>。开发和预览服务器默认仅监听本机，不再对局域网内的其他设备开放。</p>
<p>这一调整遵循「默认安全」的原则。在大多数本地开发场景中，开发服务器无需对外暴露。仅监听本机地址可以减少意外暴露，降低在共享网络环境中被扫描或攻击的风险。</p>
<p>如果你需要在局域网设备上访问页面，可以显式开启网络访问：</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  server</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    host</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;0.0.0.0&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p>也可以通过 CLI 的 <code>--host</code> 参数快速开启：</p>
<div class="rp-codeblock language-bash"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="bash"><code><span class="line"><span style="color:var(--shiki-token-function)">rsbuild</span><span style="color:var(--shiki-token-string)"> --host</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<h2 class="rp-toc-include" id="proxy-中间件升级"><a href="#proxy-中间件升级" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Proxy 中间件升级</h2>
<p>开发服务器使用的 <a href="https://github.com/chimurai/http-proxy-middleware" target="_blank" rel="noopener noreferrer" class="rp-link">http-proxy-middleware</a> 已经从 v2 升级至最新的 v4 版本，同时其底层依赖从已经停止维护的 <a href="https://www.npmjs.com/package/http-proxy" target="_blank" rel="noopener noreferrer" class="rp-link">http-proxy</a> 切换为由 <a href="https://github.com/unjs" target="_blank" rel="noopener noreferrer" class="rp-link">unjs 社区</a> 积极维护的 <a href="https://npmx.dev/package/httpxy" target="_blank" rel="noopener noreferrer" class="rp-link">httpxy</a>。</p>
<p>这主要带来几点改进：</p>
<ul>
<li>支持 HTTP/2 代理</li>
<li>解决已知的安全问题</li>
<li>不再依赖 Node.js 已废弃的 <code>url.parse()</code> API</li>
</ul>
<blockquote>
<p><code>server.proxy</code> 的部分字段已发生变更，升级时请参考 <a href="/zh/guide/upgrade/v1-to-v2#proxy-中间件升级" class="rp-link">从 v1 升级到 v2</a>。</p>
</blockquote>
<h2 class="rp-toc-include" id="pure-esm-包"><a href="#pure-esm-包" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Pure ESM 包</h2>
<p><a href="https://www.npmjs.com/package/@rsbuild/core" target="_blank" rel="noopener noreferrer" class="rp-link">@rsbuild/core</a> 现在以 pure ESM 包的形式发布，并移除了自身的 CommonJS 构建产物。这一调整仅影响 Rsbuild 本身的发布形式，使安装体积减少了约 500KB。</p>
<p>在 Node.js 20 及以上版本中，运行时已原生支持通过 <a href="https://nodejs.org/api/modules.html#loading-ecmascript-modules-using-require" target="_blank" rel="noopener noreferrer" class="rp-link">require(esm)</a> 加载 ESM 模块。因此，对大多数仍通过 JavaScript API 使用 Rsbuild 的项目来说，这一变更通常不会带来实际影响，也无需额外修改现有代码。</p>
<h2 class="rp-toc-include" id="nodejs-支持"><a href="#nodejs-支持" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Node.js 支持</h2>
<p>从 2.0 开始，Rsbuild 最低支持的 Node.js 版本为 <code>20.19+</code> 或 <code>22.12+</code>。由于 Node.js 18 已于 2025 年 4 月底结束维护，2.0 也不再继续支持该版本。</p>
<blockquote>
<p>我们通常会在某个 Node.js 版本进入 EOL 约一年后再移除支持，以为社区和用户预留更充足的升级时间。</p>
</blockquote>
<h2 class="rp-toc-include" id="默认目标环境更新"><a href="#默认目标环境更新" class="rp-header-anchor rp-link" aria-hidden="true">#</a>默认目标环境更新</h2>
<p>Rsbuild 2.0 调整了默认的目标环境，使产物面向更现代的浏览器和 Node.js 版本。</p>
<p>对于 Web 产物，默认的 browserslist 现在对齐到 <a href="https://web-platform-dx.github.io/web-features/" target="_blank" rel="noopener noreferrer" class="rp-link">Baseline</a> 的广泛可用范围。这里选取的是 <a href="https://browsersl.ist/#q=baseline+widely+available+on+2025-05-01" target="_blank" rel="noopener noreferrer" class="rp-link">2025-05-01</a> 对应的目标集，表示截至该时间点已被主流浏览器广泛支持的 Web 平台能力。</p>
<p>默认值变化如下：</p>
<ul>
<li>Chrome 87 → 107</li>
<li>Edge 88 → 107</li>
<li>Firefox 78 → 104</li>
<li>Safari 14 → 16</li>
</ul>
<p>这意味着在未显式配置 browserslist 的情况下，Rsbuild 会默认输出更现代的 JavaScript 和 CSS，同时减少语法降级和 polyfill 的引入。</p>
<p>对于 Node.js 产物，默认目标版本也从 Node.js 16 提升至 Node.js 20。</p>
<p>如果你已经通过 <code>.browserslistrc</code>、<code>package.json#browserslist</code> 或 <a href="/zh/config/output/override-browserslist" class="rp-link">output.overrideBrowserslist</a> 显式配置了目标环境，则不会受到上述调整的影响。</p>
<h2 class="rp-toc-include" id="esm-nodejs-产物"><a href="#esm-nodejs-产物" class="rp-header-anchor rp-link" aria-hidden="true">#</a>ESM Node.js 产物</h2>
<p>在构建 Node.js 产物时，相比 Rsbuild v1 默认输出压缩后的 CommonJS 代码，Rsbuild 2.0 现在会默认输出未压缩的 ES modules 代码。</p>
<p>这一调整更符合现代 Node 应用的主流实践。同时，服务端代码默认不压缩，有助于保留清晰的调试堆栈，提升问题排查效率。</p>
<p>需要注意的是，运行时需要具备加载 ESM 的能力。例如在 <code>package.json</code> 中设置 <code>&quot;type&quot;: &quot;module&quot;</code>，或者使用 <code>.mjs</code> 作为输出文件扩展名。如果你的项目仍依赖 CommonJS，可以显式切回原有行为：</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  output</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    target</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;node&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    module</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> false</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    minify</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> true</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<h2 class="rp-toc-include" id="装饰器版本更新"><a href="#装饰器版本更新" class="rp-header-anchor rp-link" aria-hidden="true">#</a>装饰器版本更新</h2>
<p>随着底层 SWC 支持 <code>2023-11</code> 装饰器版本，Rsbuild 将 <a href="/zh/config/source/decorators#decoratorsversion" class="rp-link">decorators.version</a> 默认值从 <code>2022-03</code> 调整为 <code>2023-11</code>。</p>
<p><code>2023-11</code> 是当前最新的提案版本，对应 2023 年 11 月 TC39 会议后的规范，同时也是 Babel 8 的默认行为。如果你需要保留旧行为，可以显式指定版本：</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  source</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    decorators</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      version</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;2022-03&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<h2 class="rp-toc-include" id="升级至-rsbuild-20"><a href="#升级至-rsbuild-20" class="rp-header-anchor rp-link" aria-hidden="true">#</a>升级至 Rsbuild 2.0</h2>
<p>对于大多数项目来说，升级到 Rsbuild 2.0 是一个相对平滑的过程。尽管 2.0 引入了一些默认行为调整和不兼容变更，但大多数变更都提供了清晰的迁移路径，通常无需修改业务代码。</p>
<p>如果你正在使用支持 skills 的 coding agent，可以安装 <a href="https://github.com/rstackjs/agent-skills#rsbuild-v2-upgrade" target="_blank" rel="noopener noreferrer" class="rp-link">rsbuild-v2-upgrade</a> skill，由 agent 自动协助完成依赖升级、配置调整和迁移检查，减少手动操作成本。</p>
<div class="rp-codeblock language-bash"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="bash"><code><span class="line"><span style="color:var(--shiki-token-function)">npx</span><span style="color:var(--shiki-token-string)"> skills</span><span style="color:var(--shiki-token-string)"> add</span><span style="color:var(--shiki-token-string)"> rstackjs/agent-skills</span><span style="color:var(--shiki-token-string)"> --skill</span><span style="color:var(--shiki-token-string)"> rsbuild-v2-upgrade</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p>完整的升级指南及所有不兼容变更，请参考 <a href="/zh/guide/upgrade/v1-to-v2" class="rp-link">从 v1 升级到 v2</a>。</p>
<h2 class="rp-toc-include" id="致谢"><a href="#致谢" class="rp-header-anchor rp-link" aria-hidden="true">#</a>致谢</h2>
<p>Rsbuild 由 Rstack 团队主导开发，同时也离不开社区贡献者与所有用户的共同参与。自 1.0 发布以来，许多开发者通过贡献推动了 Rsbuild 的演进，在此感谢所有参与其中的朋友：</p>
<!-- -->
<p><a href="https://github.com/9aoy" target="_blank" rel="noopener noreferrer" class="rp-link">@9aoy</a>、<a href="https://github.com/adammark" target="_blank" rel="noopener noreferrer" class="rp-link">@adammark</a>、<a href="https://github.com/ahabhgk" target="_blank" rel="noopener noreferrer" class="rp-link">@ahabhgk</a>、<a href="https://github.com/alexUXUI" target="_blank" rel="noopener noreferrer" class="rp-link">@alexUXUI</a>、<a href="https://github.com/bodia-uz" target="_blank" rel="noopener noreferrer" class="rp-link">@bodia-uz</a>、<a href="https://github.com/Brennvo" target="_blank" rel="noopener noreferrer" class="rp-link">@Brennvo</a>、<a href="https://github.com/caohuilin" target="_blank" rel="noopener noreferrer" class="rp-link">@caohuilin</a>、<a href="https://github.com/Cheese-Yu" target="_blank" rel="noopener noreferrer" class="rp-link">@Cheese-Yu</a>、<a href="https://github.com/chenjiahan" target="_blank" rel="noopener noreferrer" class="rp-link">@chenjiahan</a>、<a href="https://github.com/Chevindu" target="_blank" rel="noopener noreferrer" class="rp-link">@Chevindu</a>、<a href="https://github.com/Colin3191" target="_blank" rel="noopener noreferrer" class="rp-link">@Colin3191</a>、<a href="https://github.com/colinaaa" target="_blank" rel="noopener noreferrer" class="rp-link">@colinaaa</a>、
<a href="https://github.com/CPunisher" target="_blank" rel="noopener noreferrer" class="rp-link">@CPunisher</a>、<a href="https://github.com/davide97g" target="_blank" rel="noopener noreferrer" class="rp-link">@davide97g</a>、<a href="https://github.com/Deku-nattsu" target="_blank" rel="noopener noreferrer" class="rp-link">@Deku-nattsu</a>、<a href="https://github.com/DeveshSapkale" target="_blank" rel="noopener noreferrer" class="rp-link">@DeveshSapkale</a>、<a href="https://github.com/dovigod" target="_blank" rel="noopener noreferrer" class="rp-link">@dovigod</a>、<a href="https://github.com/Draculabo" target="_blank" rel="noopener noreferrer" class="rp-link">@Draculabo</a>、<a href="https://github.com/easy1090" target="_blank" rel="noopener noreferrer" class="rp-link">@easy1090</a>、<a href="https://github.com/escaton" target="_blank" rel="noopener noreferrer" class="rp-link">@escaton</a>、<a href="https://github.com/fansenze" target="_blank" rel="noopener noreferrer" class="rp-link">@fansenze</a>、<a href="https://github.com/fi3ework" target="_blank" rel="noopener noreferrer" class="rp-link">@fi3ework</a>、<a href="https://github.com/gaoachao" target="_blank" rel="noopener noreferrer" class="rp-link">@gaoachao</a>、<a href="https://github.com/GiveMe-A-Name" target="_blank" rel="noopener noreferrer" class="rp-link">@GiveMe-A-Name</a>、
<a href="https://github.com/GRAMMAC1" target="_blank" rel="noopener noreferrer" class="rp-link">@GRAMMAC1</a>、<a href="https://github.com/hai-x" target="_blank" rel="noopener noreferrer" class="rp-link">@hai-x</a>、<a href="https://github.com/hangCode2001" target="_blank" rel="noopener noreferrer" class="rp-link">@hangCode2001</a>、<a href="https://github.com/hardfist" target="_blank" rel="noopener noreferrer" class="rp-link">@hardfist</a>、<a href="https://github.com/hasnum-stack" target="_blank" rel="noopener noreferrer" class="rp-link">@hasnum-stack</a>、<a href="https://github.com/htoooth" target="_blank" rel="noopener noreferrer" class="rp-link">@htoooth</a>、<a href="https://github.com/Huxpro" target="_blank" rel="noopener noreferrer" class="rp-link">@Huxpro</a>、<a href="https://github.com/ianzone" target="_blank" rel="noopener noreferrer" class="rp-link">@ianzone</a>、<a href="https://github.com/iceprosurface" target="_blank" rel="noopener noreferrer" class="rp-link">@iceprosurface</a>、<a href="https://github.com/inottn" target="_blank" rel="noopener noreferrer" class="rp-link">@inottn</a>、<a href="https://github.com/jerrykingxyz" target="_blank" rel="noopener noreferrer" class="rp-link">@jerrykingxyz</a>、<a href="https://github.com/jkzing" target="_blank" rel="noopener noreferrer" class="rp-link">@jkzing</a>、
<a href="https://github.com/JounQin" target="_blank" rel="noopener noreferrer" class="rp-link">@JounQin</a>、<a href="https://github.com/JSerFeng" target="_blank" rel="noopener noreferrer" class="rp-link">@JSerFeng</a>、<a href="https://github.com/JSH-data" target="_blank" rel="noopener noreferrer" class="rp-link">@JSH-data</a>、<a href="https://github.com/junhea" target="_blank" rel="noopener noreferrer" class="rp-link">@junhea</a>、<a href="https://github.com/junxiongchu" target="_blank" rel="noopener noreferrer" class="rp-link">@junxiongchu</a>、<a href="https://github.com/lguzzon" target="_blank" rel="noopener noreferrer" class="rp-link">@lguzzon</a>、<a href="https://github.com/LingyuCoder" target="_blank" rel="noopener noreferrer" class="rp-link">@LingyuCoder</a>、<a href="https://github.com/lluisemper" target="_blank" rel="noopener noreferrer" class="rp-link">@lluisemper</a>、<a href="https://github.com/lxKylin" target="_blank" rel="noopener noreferrer" class="rp-link">@lxKylin</a>、<a href="https://github.com/mhutter" target="_blank" rel="noopener noreferrer" class="rp-link">@mhutter</a>、<a href="https://github.com/miownag" target="_blank" rel="noopener noreferrer" class="rp-link">@miownag</a>、<a href="https://github.com/mycoin" target="_blank" rel="noopener noreferrer" class="rp-link">@mycoin</a>、
<a href="https://github.com/nikhilsnayak" target="_blank" rel="noopener noreferrer" class="rp-link">@nikhilsnayak</a>、<a href="https://github.com/notzheng" target="_blank" rel="noopener noreferrer" class="rp-link">@notzheng</a>、<a href="https://github.com/Nsttt" target="_blank" rel="noopener noreferrer" class="rp-link">@Nsttt</a>、<a href="https://github.com/nyqykk" target="_blank" rel="noopener noreferrer" class="rp-link">@nyqykk</a>、<a href="https://github.com/puxiao" target="_blank" rel="noopener noreferrer" class="rp-link">@puxiao</a>、<a href="https://github.com/qmakani" target="_blank" rel="noopener noreferrer" class="rp-link">@qmakani</a>、<a href="https://github.com/quininer" target="_blank" rel="noopener noreferrer" class="rp-link">@quininer</a>、<a href="https://github.com/RobHannay" target="_blank" rel="noopener noreferrer" class="rp-link">@RobHannay</a>、<a href="https://github.com/roli-lpci" target="_blank" rel="noopener noreferrer" class="rp-link">@roli-lpci</a>、<a href="https://github.com/s-chance" target="_blank" rel="noopener noreferrer" class="rp-link">@s-chance</a>、<a href="https://github.com/s-r-x" target="_blank" rel="noopener noreferrer" class="rp-link">@s-r-x</a>、<a href="https://github.com/sagar-dwivedi" target="_blank" rel="noopener noreferrer" class="rp-link">@sagar-dwivedi</a>、
<a href="https://github.com/Sang-Sang33" target="_blank" rel="noopener noreferrer" class="rp-link">@Sang-Sang33</a>、<a href="https://github.com/schu34" target="_blank" rel="noopener noreferrer" class="rp-link">@schu34</a>、<a href="https://github.com/ScriptedAlchemy" target="_blank" rel="noopener noreferrer" class="rp-link">@ScriptedAlchemy</a>、<a href="https://github.com/Shucei" target="_blank" rel="noopener noreferrer" class="rp-link">@Shucei</a>、<a href="https://github.com/shulaoda" target="_blank" rel="noopener noreferrer" class="rp-link">@shulaoda</a>、<a href="https://github.com/Simon-He95" target="_blank" rel="noopener noreferrer" class="rp-link">@Simon-He95</a>、<a href="https://github.com/slobo" target="_blank" rel="noopener noreferrer" class="rp-link">@slobo</a>、<a href="https://github.com/snatvb" target="_blank" rel="noopener noreferrer" class="rp-link">@snatvb</a>、<a href="https://github.com/SoonIter" target="_blank" rel="noopener noreferrer" class="rp-link">@SoonIter</a>、<a href="https://github.com/stormslowly" target="_blank" rel="noopener noreferrer" class="rp-link">@stormslowly</a>、<a href="https://github.com/SyMind" target="_blank" rel="noopener noreferrer" class="rp-link">@SyMind</a>、<a href="https://github.com/T9-Forever" target="_blank" rel="noopener noreferrer" class="rp-link">@T9-Forever</a>、
<a href="https://github.com/thinkasany" target="_blank" rel="noopener noreferrer" class="rp-link">@thinkasany</a>、<a href="https://github.com/Timeless0911" target="_blank" rel="noopener noreferrer" class="rp-link">@Timeless0911</a>、<a href="https://github.com/TinsFox" target="_blank" rel="noopener noreferrer" class="rp-link">@TinsFox</a>、<a href="https://github.com/valorkin" target="_blank" rel="noopener noreferrer" class="rp-link">@valorkin</a>、<a href="https://github.com/vegerot" target="_blank" rel="noopener noreferrer" class="rp-link">@vegerot</a>、<a href="https://github.com/VenDream" target="_blank" rel="noopener noreferrer" class="rp-link">@VenDream</a>、<a href="https://github.com/wangi4myself" target="_blank" rel="noopener noreferrer" class="rp-link">@wangi4myself</a>、<a href="https://github.com/wChenonly" target="_blank" rel="noopener noreferrer" class="rp-link">@wChenonly</a>、<a href="https://github.com/wjw99830" target="_blank" rel="noopener noreferrer" class="rp-link">@wjw99830</a>、<a href="https://github.com/wralith" target="_blank" rel="noopener noreferrer" class="rp-link">@wralith</a>、<a href="https://github.com/wxiaoyun" target="_blank" rel="noopener noreferrer" class="rp-link">@wxiaoyun</a>、<a href="https://github.com/xbzhang2020" target="_blank" rel="noopener noreferrer" class="rp-link">@xbzhang2020</a>、
<a href="https://github.com/xc2" target="_blank" rel="noopener noreferrer" class="rp-link">@xc2</a>、<a href="https://github.com/xettri" target="_blank" rel="noopener noreferrer" class="rp-link">@xettri</a>、<a href="https://github.com/xiaohp" target="_blank" rel="noopener noreferrer" class="rp-link">@xiaohp</a>、<a href="https://github.com/xuexb" target="_blank" rel="noopener noreferrer" class="rp-link">@xuexb</a>、<a href="https://github.com/xun082" target="_blank" rel="noopener noreferrer" class="rp-link">@xun082</a>、<a href="https://github.com/yifancong" target="_blank" rel="noopener noreferrer" class="rp-link">@yifancong</a>、<a href="https://github.com/ymq001" target="_blank" rel="noopener noreferrer" class="rp-link">@ymq001</a>、<a href="https://github.com/zackarychapple" target="_blank" rel="noopener noreferrer" class="rp-link">@zackarychapple</a>、<a href="https://github.com/zalishchuk" target="_blank" rel="noopener noreferrer" class="rp-link">@zalishchuk</a>、<a href="https://github.com/zoolsher" target="_blank" rel="noopener noreferrer" class="rp-link">@zoolsher</a></p>
<!--/$-->]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Rsbuild 1.0 发布]]></title>
            <link>https://rsbuild.rs/zh/blog/v1-0</link>
            <guid isPermaLink="false">/zh/blog/v1-0</guid>
            <pubDate>Tue, 10 Sep 2024 18:00:00 GMT</pubDate>
            <description><![CDATA[Rsbuild 1.0 正式发布，围绕更快构建、更易配置和插件生态展开，并介绍性能表现、社区采用与后续规划。]]></description>
            <content:encoded><![CDATA[<!--$--><p><em>September 10, 2024</em></p>
<h1 class="rp-toc-include" id="rsbuild-10-发布"><a href="#rsbuild-10-发布" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Rsbuild 1.0 发布<!-- --> </h1><div class="rp-not-doc rp-llms-container"><button class="rp-not-doc rp-llms-button rp-llms-copy-button"><div class="rp-llms-copy-button__icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg></div><span>复制 Markdown</span></button><button class="rp-llms-button rp-llms-view-options__trigger "><svg width="1em" height="1em" viewBox="0 0 32 32" class="rp-llms-view-options__arrow "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button></div>
<p><img src="https://assets.rspack.rs/rsbuild/assets/rsbuild-1-0-banner.png" alt=""/></p>
<p>我们很高兴地宣布 Rsbuild 1.0 已经正式发布！</p>
<h2 class="rp-toc-include" id="为什么是-rsbuild"><a href="#为什么是-rsbuild" class="rp-header-anchor rp-link" aria-hidden="true">#</a>为什么是 Rsbuild</h2>
<p>长期以来，使用 webpack 的开发者饱受两个问题的困扰：<strong>构建慢和配置复杂</strong>。</p>
<p>我们使用 Rust 将 webpack 重写为 <a href="https://github.com/web-infra-dev/rspack" target="_blank" rel="noopener noreferrer" class="rp-link">Rspack</a>，解决了构建慢的问题。但为了兼容 webpack 生态，Rspack 保留了 webpack 的配置和 API，这意味着它依然存在一定的复杂度和学习成本。</p>
<h3 class="rp-toc-include" id="生态的发展"><a href="#生态的发展" class="rp-header-anchor rp-link" aria-hidden="true">#</a>生态的发展</h3>
<p>在早期，webpack 生态中出现了一些优秀的工具，比如 Create React App（简称 CRA）和 Vue CLI，它们为 React 或 Vue 应用提供最佳实践，隐藏了复杂的 webpack 配置。因此，许多 React 和 Vue 用户使用这些工具来创建应用，不需要从零开始配置 webpack。</p>
<p>随着生态的发展，Next.js、Nuxt 和 Remix 等全栈 web 框架变得流行；Vite 推出后，作为一个轻量化的构建工具，也受到了众多开发者的青睐。而 CRA、Vue CLI 则是逐渐停止了维护。</p>
<p>当我们查看 webpack、CRA 和 Vue CLI 的 npm 下载量时，会发现仍然有大量项目在使用这些工具。例如，webpack 有约 2500 万的周下载量，CRA 有近 300 万的周下载量。这些项目有很多是 CSR 应用，不需要使用全栈框架的 SSR 等特性；Vite 看起来是一个不错的选择，但我们在字节跳动的项目中实践后发现，从 webpack 迁移到 Vite 存在很高的成本，并且迁移带来了一些新问题，例如开发环境与生产环境的构建产物不一致、大型应用在开发过程中页面刷新缓慢等问题。</p>
<p>对于 webpack 生态，我们发现了一个让人遗憾的事实：<strong>webpack 生态缺少一个易于使用且维护良好的构建工具</strong>，它既要像 CRA 和 Vue CLI 一样对用户友好，能够很好地满足 CSR 应用开发的需求，又需要像 Vite 一样具备快速启动、插件化等特性。</p>
<h3 class="rp-toc-include" id="rsbuild-的诞生"><a href="#rsbuild-的诞生" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Rsbuild 的诞生</h3>
<p>在开发 Rspack 的过程中，我们意识到了上述问题，并决定在 Rspack 的基础上开发一个现代的构建工具 —— <strong>Rsbuild</strong>。</p>
<p><img src="https://assets.rspack.rs/rsbuild/assets/rsbuild-1-0-build-tools.png" alt=""/></p>
<p>Rsbuild 是以 Rspack 为核心实现的，我们为 Rsbuild 设计了易于使用、TypeScript 友好的 API，并内置一套精心设计的构建配置，使它既能充分发挥出 Rspack 的性能优势，也能解决配置复杂、上手成本高的问题。</p>
<p>在实现 Rsbuild 的过程中，我们向社区中优秀的工具学习最佳实践，并聚焦于两个使用场景来设计 Rsbuild：</p>
<ul>
<li>作为一个轻量的构建工具：帮助开发者快速搭建 Web 应用，为 CSR 应用提供开箱即用的支持。</li>
<li>作为一个共享的基础设施：为上层工具和框架提供 <a href="/zh/api/start/" class="rp-link">JavaScript API</a> 和 <a href="/zh/plugins/dev/" class="rp-link">插件 API</a>，允许开发者基于 Rsbuild 来开发属于自己的工具或框架，轻松实现 SSR、SSG 等特性。</li>
</ul>
<h2 class="rp-toc-include" id="性能"><a href="#性能" class="rp-header-anchor rp-link" aria-hidden="true">#</a>性能</h2>
<p><strong>Rsbuild 是目前 webpack 和 Rspack 生态中最快的构建工具</strong>，下面是 Rsbuild 与 Create React App、Vite、Rspack CLI 的对比：</p>
<div class="rp-table-scroll-container rp-scrollbar"><table><thead><tr><th>指标</th><th>Create React App</th><th>Vite (with SWC)</th><th>Rspack CLI</th><th>Rsbuild</th><th>Rsbuild vs CRA</th></tr></thead><tbody><tr><td>dev 启动时间（1000 个模块）</td><td>5.47s</td><td>1.29s</td><td>0.66s</td><td>0.39s</td><td><strong>快 14 倍</strong></td></tr><tr><td>build 构建时间（1000 个模块）</td><td>5.69s</td><td>1.39s</td><td>0.51s</td><td>0.27s</td><td><strong>快 20 倍</strong></td></tr><tr><td>npm 依赖数量</td><td>1241</td><td>15</td><td>283</td><td>14</td><td><strong>减少 99%</strong></td></tr><tr><td>npm 安装体积</td><td>146.6MB</td><td>56.3MB</td><td>75.1MB</td><td>59.1MB</td><td><strong>减少 60%</strong></td></tr></tbody></table></div>
<p>与 <a href="https://npmjs.com/package/@rspack/cli" target="_blank" rel="noopener noreferrer" class="rp-link">Rspack CLI</a> 相比，Rsbuild 内置了更丰富的功能，同时具备更好的性能表现。</p>
<p>这是因为 Rspack CLI 需要保持对 <a href="https://npmjs.com/package/webpack-cli" target="_blank" rel="noopener noreferrer" class="rp-link">webpack-cli</a> 的兼容性，它依赖了 <code>webpack-dev-server</code>，并提供与 webpack 一致的默认行为，因此性能受到了一定限制。而 Rsbuild 是面向现代 web 开发设计的，我们为 Rsbuild 重新实现了更轻量的 CLI、开发服务器和构建流程，使其具备更快的启动速度和更少的 npm 依赖。</p>
<blockquote>
<p>参考 <a href="/zh/guide/start/" class="rp-link">Rsbuild 介绍</a> 了解 Rsbuild 与 webpack、Vue CLI、Vite 的对比。</p>
</blockquote>
<h2 class="rp-toc-include" id="谁在使用"><a href="#谁在使用" class="rp-header-anchor rp-link" aria-hidden="true">#</a>谁在使用</h2>
<p>在 <a href="https://rspack.rs/zh/blog/announcing-1-0" target="_blank" rel="noopener noreferrer" class="rp-link">Rspack 1.0 发布公告</a> 中，我们介绍了 Rspack 正在取得快速增长，这其中约有一半的 Rspack 用户已经在使用 Rsbuild，并给予我们很多正向的反馈。</p>
<p>在字节跳动，我们将 Rsbuild 作为内部研发框架的基石，支持了数千个 web 项目，这些项目涵盖了不同的使用场景，包括 desktop Web 应用、mobile Web 应用、跨平台 Web 应用、文档站等。</p>
<p>在社区中，我们开源了基于 Rsbuild 的高性能工具链，包括静态站点生成器 <a href="https://github.com/web-infra-dev/rspress" target="_blank" rel="noopener noreferrer" class="rp-link">Rspress</a>，library 开发工具 <a href="https://github.com/web-infra-dev/rslib" target="_blank" rel="noopener noreferrer" class="rp-link">Rslib</a>，React 全栈框架 <a href="https://github.com/web-infra-dev/modern.js" target="_blank" rel="noopener noreferrer" class="rp-link">Modern.js</a>，<a href="https://github.com/rstackjs/storybook-rsbuild" target="_blank" rel="noopener noreferrer" class="rp-link">Storybook Rsbuild</a>。得益于 Rsbuild 的可扩展性，这些工具能够灵活地集成 Rsbuild，并与它共享插件生态。</p>
<p>在 Rsbuild 1.0 发布后，我们也计划与 <a href="https://github.com/remix-run/remix" target="_blank" rel="noopener noreferrer" class="rp-link">Remix</a> 等优秀的团队一起探索，使 Rsbuild 能够与更多 web 框架集成。</p>
<h2 class="rp-toc-include" id="插件生态"><a href="#插件生态" class="rp-header-anchor rp-link" aria-hidden="true">#</a>插件生态</h2>
<p>Rsbuild 的插件生态正在不断发展，目前社区中已经有超过 50 个 <a href="https://github.com/rstackjs/awesome-rstack#rsbuild-plugins" target="_blank" rel="noopener noreferrer" class="rp-link">Rsbuild 插件</a>。我们通过插件提供了一些高级特性，以支持生产级应用的开发，例如 <a href="https://github.com/rstackjs/rsbuild-plugin-type-check" target="_blank" rel="noopener noreferrer" class="rp-link">类型检查</a>、<a href="https://github.com/rstackjs/rsbuild-plugin-check-syntax" target="_blank" rel="noopener noreferrer" class="rp-link">产物语法检查</a>、<a href="https://github.com/rstackjs/rsbuild-plugin-assets-retry" target="_blank" rel="noopener noreferrer" class="rp-link">静态资源重试</a>。此外，受益于 Rspack 对 webpack 的兼容性，Rsbuild 也支持使用大部分 webpack 插件。</p>
<p>与 webpack 或 Rspack 相比，Rsbuild 的插件 API 更加简洁和容易上手，使开发者能够轻松地开发插件来满足自己的需求。</p>
<p>例如，我们来实现一个插件，它的功能是输出一个文件到产物目录，在 Rspack 和 Rsbuild 中的实现对比如下：</p>
<p><img src="https://assets.rspack.rs/rsbuild/assets/rsbuild-1-0-plugin-compare.png" alt=""/></p>
<p>可以看到，Rsbuild 插件的 API 风格与 esbuild 类似，可以通过一个函数来定义。插件的 hooks 经过简化，避免了冗长的 API，使插件的编写更符合直觉。</p>
<h2 class="rp-toc-include" id="如何使用-10"><a href="#如何使用-10" class="rp-header-anchor rp-link" aria-hidden="true">#</a>如何使用 1.0</h2>
<ul>
<li>如果你还未使用过 Rsbuild，可以通过 <a href="https://codesandbox.io/p/github/rstackjs/rsbuild-codesandbox-example" target="_blank" rel="noopener noreferrer" class="rp-link">CodeSandbox 示例</a> 来体验，也可以参考 <a href="/zh/guide/start/quick-start" class="rp-link">快速上手</a> 来接入 Rsbuild。</li>
<li>如果你正在使用 Rsbuild 0.7 或更早的版本，请留意 1.0 版本包含一些不兼容更新，可参考 <a href="/zh/guide/upgrade/v0-to-v1" class="rp-link">从 Rsbuild 0.x 迁移</a> 文档进行升级。</li>
<li>Rsbuild 也提供了 webpack、CRA、Vue CLI 等项目的迁移指南，详见 <a href="/zh/guide/start/quick-start#从现有项目迁移" class="rp-link">从现有项目迁移</a>。</li>
</ul>
<blockquote>
<p>欢迎为 <a href="https://github.com/web-infra-dev/rsbuild" target="_blank" rel="noopener noreferrer" class="rp-link">Rsbuild GitHub 仓库</a> 点亮一颗 Star 🌟。</p>
</blockquote>
<h2 class="rp-toc-include" id="下一步"><a href="#下一步" class="rp-header-anchor rp-link" aria-hidden="true">#</a>下一步</h2>
<p>Rsbuild 1.0 为企业级应用和上层工具开发提供了一些高级特性，例如 <a href="/zh/guide/advanced/environments" class="rp-link">多环境构建 API</a>、<a href="/zh/guide/advanced/ssr" class="rp-link">服务端渲染 API</a>、<a href="/zh/plugins/dev/" class="rp-link">插件 API</a>、<a href="/zh/guide/advanced/module-federation" class="rp-link">模块联邦支持</a> 和 <a href="https://github.com/web-infra-dev/rslib" target="_blank" rel="noopener noreferrer" class="rp-link">Library 构建（Rslib）</a>，我们计划继续完善这些特性，更好地支持 Rsbuild 生态发展。</p>
<p>在接下来的 12～18 个月里，Rsbuild 将与 Rspack 共同演进，在第一时间应用 Rspack 的新特性，例如持久化缓存、更快的 HMR、基于 TypeScript 的优化等。请参考 <a href="https://rspack.rs/zh/blog/announcing-1-0#%E4%B8%8B%E4%B8%80%E6%AD%A5" target="_blank" rel="noopener noreferrer" class="rp-link">Rspack - 下一步</a> 了解更多。</p>
<p>最后，感谢所有为 Rsbuild 贡献过的开发者 ❤️：</p>
<p><img src="https://assets.rspack.rs/rsbuild/assets/rsbuild-1-0-contributors.png" alt=""/></p><!--/$-->]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Rsbuild 0.7 发布]]></title>
            <link>https://rsbuild.rs/zh/blog/v0-7</link>
            <guid isPermaLink="false">/zh/blog/v0-7</guid>
            <pubDate>Tue, 28 May 2024 18:00:00 GMT</pubDate>
            <description><![CDATA[Rsbuild 0.7 发布，支持 Storybook、更快的 Sass 编译和 CSS Modules 类型生成。]]></description>
            <content:encoded><![CDATA[<!--$--><p><em>May 28, 2024</em></p>
<h1 class="rp-toc-include" id="rsbuild-07-发布"><a href="#rsbuild-07-发布" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Rsbuild 0.7 发布<!-- --> </h1><div class="rp-not-doc rp-llms-container"><button class="rp-not-doc rp-llms-button rp-llms-copy-button"><div class="rp-llms-copy-button__icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg></div><span>复制 Markdown</span></button><button class="rp-llms-button rp-llms-view-options__trigger "><svg width="1em" height="1em" viewBox="0 0 32 32" class="rp-llms-view-options__arrow "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button></div>
<p><img src="https://assets.rspack.rs/rsbuild/rsbuild-banner-v0-7.png" alt=""/></p>
<p>Rsbuild 0.7 已与 Rspack 0.7 同步发布！</p>
<p>这是 Rsbuild 1.0 版本发布前的最后一个 minor 版本，此后 Rspack 团队将投入到 1.0 版本的开发中，并致力于尽快推出 Rspack / Rsbuild 1.0 alpha 版本。</p>
<p>在 Rsbuild 0.7 中，值得关注的变更有：</p>
<ul>
<li><a href="#%E6%94%AF%E6%8C%81-storybook" class="rp-link">支持 Storybook</a></li>
<li><a href="#%E6%9B%B4%E5%BF%AB%E7%9A%84-sass-%E7%BC%96%E8%AF%91" class="rp-link">更快的 Sass 编译</a></li>
<li><a href="#%E6%9B%B4%E5%A5%BD%E7%9A%84-css-%E6%94%AF%E6%8C%81" class="rp-link">更好的 CSS 支持</a></li>
<li><a href="#css-modules-%E7%B1%BB%E5%9E%8B%E7%94%9F%E6%88%90" class="rp-link">CSS Modules 类型生成</a></li>
<li><a href="#esmcjs-%E5%AF%BC%E5%87%BA" class="rp-link">ESM/CJS 导出</a></li>
<li><a href="#%E4%B8%8D%E5%85%BC%E5%AE%B9%E6%9B%B4%E6%96%B0" class="rp-link">不兼容更新</a></li>
</ul>
<h2 class="rp-toc-include" id="支持-storybook"><a href="#支持-storybook" class="rp-header-anchor rp-link" aria-hidden="true">#</a>支持 Storybook</h2>
<p>Rsbuild 现已支持 Storybook！</p>
<p><a href="https://github.com/rstackjs/storybook-rsbuild" target="_blank" rel="noopener noreferrer" class="rp-link">storybook-builder-rsbuild</a> 是基于 Storybook v8 和 Rsbuild 实现的 Storybook builder，能够快速构建你的 components 和 stories。</p>
<p><img src="https://assets.rspack.rs/rsbuild/rsbuild-banner-with-storybook.png" alt=""/></p>
<ul>
<li>对于使用 Rsbuild 的项目，现在你可以快速集成 Storybook，并复用已有的 Rsbuild 配置。</li>
<li>对于使用 Storybook webpack builder 的项目，现在即可升级到 Rsbuild，<strong>并获得约 5 倍的构建性能提升</strong>。</li>
</ul>
<p>我们还提供了 <code>storybook-react-rsbuild</code> 和 <code>storybook-vue3-rsbuild</code>，用于支持 React 和 Vue 3。比如集成 React：</p>
<div class="rp-codeblock language-js"><div class="rp-codeblock__title">.storybook/main.js</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="js" data-title=".storybook/main.js"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { StorybookConfig } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;storybook-react-rsbuild&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-token-constant)"> config</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> StorybookConfig</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  framework</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;storybook-react-rsbuild&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> config;</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p><img src="https://assets.rspack.rs/rsbuild/assets/storybook-rsbuild-preview.png" alt=""/></p>
<blockquote>
<p>更多用法请参考 <a href="https://github.com/rstackjs/storybook-rsbuild" target="_blank" rel="noopener noreferrer" class="rp-link">storybook-rsbuild 仓库</a>。</p>
</blockquote>
<h2 class="rp-toc-include" id="更快的-sass-编译"><a href="#更快的-sass-编译" class="rp-header-anchor rp-link" aria-hidden="true">#</a>更快的 Sass 编译</h2>
<p>在 Rsbuild 0.7 中，<strong>Sass 编译速度提高了 3~10 倍</strong>，在大型项目项目中的性能提升尤为显著。</p>
<p>以编译 Bootstrap 的 Sass 代码为例，Rsbuild 0.6 和 0.7 的构建时间对比：</p>
<p><img src="https://assets.rspack.rs/rsbuild/assets/sass-embedded-compare.jpeg" alt=""/></p>
<p>这得益于 Rsbuild 默认启用了 <a href="https://npmjs.com/package/sass-embedded" target="_blank" rel="noopener noreferrer" class="rp-link">sass-embedded</a>，sass-embedded 是一个围绕原生 Dart Sass 可执行文件的 JavaScript wrapper，具备一致的 API 和更优秀的性能。</p>
<p>此外，Rsbuild 还启用了 <code>sass-loader</code> 最新的 <a href="https://github.com/webpack/sass-loader/releases/tag/v14.2.0" target="_blank" rel="noopener noreferrer" class="rp-link">modern-compiler</a> API，这能够开启 Sass 的 shared resources 能力，在编译多个文件时重复利用相同的 compiler 进程，从而提升构建速度。</p>
<h2 class="rp-toc-include" id="更好的-css-支持"><a href="#更好的-css-支持" class="rp-header-anchor rp-link" aria-hidden="true">#</a>更好的 CSS 支持</h2>
<p>Rsbuild 现在使用 <a href="https://rspack.rs/zh/plugins/rspack/css-extract-rspack-plugin" target="_blank" rel="noopener noreferrer" class="rp-link">CssExtractRspackPlugin</a> 来提取 CSS 到单独的文件中，而不是使用 <a href="https://rspack.rs/zh/config/experiments#experimentscss" target="_blank" rel="noopener noreferrer" class="rp-link">experiments.css</a> 配置来实现。</p>
<p>这允许 Rsbuild 支持更多 CSS 特性，包括：</p>
<ul>
<li>支持在 Vue SFC 中使用 <code>&lt;style module&gt;</code>：</li>
</ul>
<div class="rp-codeblock language-html"><div class="rp-codeblock__title">index.vue</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="html" data-title="index.vue"><code><span class="line"><span style="color:var(--shiki-foreground)">&lt;</span><span style="color:var(--shiki-token-string-expression)">template</span><span style="color:var(--shiki-foreground)">&gt;</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  &lt;</span><span style="color:var(--shiki-token-string-expression)">p</span><span style="color:var(--shiki-token-function)"> :class</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">&quot;$style.red&quot;</span><span style="color:var(--shiki-foreground)">&gt;Red&lt;/</span><span style="color:var(--shiki-token-string-expression)">p</span><span style="color:var(--shiki-foreground)">&gt;</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">&lt;/</span><span style="color:var(--shiki-token-string-expression)">template</span><span style="color:var(--shiki-foreground)">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-foreground)">&lt;</span><span style="color:var(--shiki-token-string-expression)">style</span><span style="color:var(--shiki-token-function)"> module</span><span style="color:var(--shiki-foreground)">&gt;</span></span>
<span class="line"><span style="color:var(--shiki-token-function)">  .red</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-token-constant)">    color</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> red</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">&lt;/</span><span style="color:var(--shiki-token-string-expression)">style</span><span style="color:var(--shiki-foreground)">&gt;</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<ul>
<li>支持复杂的 CSS Modules <code>:global()</code> 语法</li>
</ul>
<div class="rp-codeblock language-css"><div class="rp-codeblock__title">style.module.css</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="css" data-title="style.module.css"><code><span class="line"><span style="color:var(--shiki-foreground)">:local(</span><span style="color:var(--shiki-token-function)">.parent</span><span style="color:var(--shiki-foreground)">):global(</span><span style="color:var(--shiki-token-function)">.child</span><span style="color:var(--shiki-foreground)">) </span><span style="color:var(--shiki-token-keyword)">&gt;</span><span style="color:var(--shiki-token-string-expression)"> ul</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-token-constant)">  color</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> red</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">}</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<ul>
<li>支持更多的 CSS Modules 选项，如 <a href="/zh/config/output/css-modules#cssmodulesexportglobals" class="rp-link">cssModules.exportGlobals</a></li>
<li>现在你可以使用 <a href="/zh/config/tools/css-extract" class="rp-link">tools.cssExtract</a> 来配置 CssExtractRspackPlugin。</li>
</ul>
<h2 class="rp-toc-include" id="css-modules-类型生成"><a href="#css-modules-类型生成" class="rp-header-anchor rp-link" aria-hidden="true">#</a>CSS Modules 类型生成</h2>
<p>Rsbuild 0.7 新增了 <a href="https://github.com/rstackjs/rsbuild-plugin-typed-css-modules" target="_blank" rel="noopener noreferrer" class="rp-link">Typed CSS Modules 插件</a>，用于为项目中的 CSS Modules 文件生成类型声明文件。</p>
<p>当你在 TypeScript 项目里使用 CSS Modules 时，默认的类型定义如下。它只能提供基本的类型支持，无法准确地提示出 CSS Modules 导出了哪些类名。</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">src/env.d.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="src/env.d.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">declare</span><span style="color:var(--shiki-token-keyword)"> module</span><span style="color:var(--shiki-token-string-expression)"> &#x27;*.module.css&#x27;</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">  const</span><span style="color:var(--shiki-token-constant)"> classes</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> { </span><span style="color:var(--shiki-token-keyword)">readonly</span><span style="color:var(--shiki-foreground)"> [key</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> string</span><span style="color:var(--shiki-foreground)">]</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> string</span><span style="color:var(--shiki-foreground)"> };</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">  export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> classes;</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">}</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p>在使用 Typed CSS Modules 插件后，Rsbuild 会为项目中所有的 CSS Modules 生成类型声明文件，提供准确的类型提示。</p>
<p>例如，创建 <code>src/index.ts</code> 和 <code>src/index.module.css</code> 两个文件：</p>
<div class="rp-codeblock language-tsx"><div class="rp-codeblock__title">src/index.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="tsx" data-title="src/index.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> styles </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;./index.module.css&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-constant)">console</span><span style="color:var(--shiki-token-function)">.log</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">styles</span><span style="color:var(--shiki-foreground)">.pageHeader);</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<div class="rp-codeblock language-css"><div class="rp-codeblock__title">index.module.css</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="css" data-title="index.module.css"><code><span class="line"><span style="color:var(--shiki-token-function)">.page-header</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-token-constant)">  color</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> black</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">}</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p>构建后，Rsbuild 会自动生成 <code>src/index.module.css.d.ts</code> 类型声明文件：</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">src/index.module.css.d.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="src/index.module.css.d.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">interface</span><span style="color:var(--shiki-token-function)"> CssExports</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-token-string-expression)">  &#x27;page-header&#x27;</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> string</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  pageHeader</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> string</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">}</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">declare</span><span style="color:var(--shiki-token-keyword)"> const</span><span style="color:var(--shiki-token-constant)"> cssExports</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> CssExports</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> cssExports;</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p>此时再打开 <code>src/index.ts</code> 文件，可以看到 <code>styles</code> 对象已经具备了准确的类型。</p>
<h2 class="rp-toc-include" id="esmcjs-导出"><a href="#esmcjs-导出" class="rp-header-anchor rp-link" aria-hidden="true">#</a>ESM/CJS 导出</h2>
<p>现在，Rsbuild 的所有包均提供了 ES modules 和 CommonJS 两种格式的导出，并在 package.json 中声明了 <a href="https://nodejs.org/api/packages.html#type" target="_blank" rel="noopener noreferrer" class="rp-link">&quot;type&quot;=&quot;module&quot;`</a>。</p>
<p><img src="https://assets.rspack.rs/rsbuild/assets/rsbuild-dual-package-example.png" alt=""/></p>
<p>这使你能够使用 <code>import</code> 或 <code>require</code> 来调用 Rsbuild 的 JavaScript API：</p>
<div class="rp-codeblock language-js"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="js"><code><span class="line"><span style="color:var(--shiki-token-comment)">// ES Modules</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { createRsbuild } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;@rsbuild/core&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-comment)">// CommonJS</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-foreground)"> { </span><span style="color:var(--shiki-token-constant)">createRsbuild</span><span style="color:var(--shiki-foreground)"> } </span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-function)"> require</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">&#x27;@rsbuild/core&#x27;</span><span style="color:var(--shiki-foreground)">);</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p>ESM/CJS 互操作是一个棘手的问题，因此我们计划长期提供这两种格式，以便于更多用户使用。</p>
<h2 class="rp-toc-include" id="不兼容更新"><a href="#不兼容更新" class="rp-header-anchor rp-link" aria-hidden="true">#</a>不兼容更新</h2>
<h3 class="rp-toc-include" id="升级-rspack-07"><a href="#升级-rspack-07" class="rp-header-anchor rp-link" aria-hidden="true">#</a>升级 Rspack 0.7</h3>
<p>Rsbuild 已将依赖的 Rspack 升级至 0.7 版本，并适配了其中包含的不兼容更新，通常你不会受到这些不兼容更新的影响。</p>
<p>在新版本中，Rspack 支持了 lazy compilation，可以显著提升大型项目的 dev 启动速度。请参考 <a href="https://rspack.rs/zh/blog/announcing-0-7" target="_blank" rel="noopener noreferrer" class="rp-link">Rspack 0.7 发布公告</a> 了解更多。</p>
<p>在 Rsbuild 中，你可以使用 <a href="/zh/config/dev/lazy-compilation" class="rp-link">dev.lazyCompilation</a> 来启用 lazy compilation。</p>
<h3 class="rp-toc-include" id="sass-和-less-插件"><a href="#sass-和-less-插件" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Sass 和 Less 插件</h3>
<p>Rsbuild 的 Sass 和 Less 插件现在是两个独立的 npm 包，而不是像之前一样内置在 <code>@rsbuild/core</code> 中，这允许用户可以按需启用 Sass 和 Less 编译能力。</p>
<p>比如，对于使用 Tailwind CSS、CSS-in-JS 等 CSS 方案的项目，现在不再需要安装 Sass 和 Less 所需的依赖，<strong>这可以节省约 7MB 的磁盘空间</strong>。</p>
<ul>
<li>如果你的项目需要编译 <code>.scss</code> 或 <code>.sass</code> 文件，请安装并注册 <a href="/zh/plugins/list/plugin-sass" class="rp-link">@rsbuild/plugin-sass</a> 插件：</li>
</ul>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { pluginSass } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;@rsbuild/plugin-sass&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  plugins</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> [</span><span style="color:var(--shiki-token-function)">pluginSass</span><span style="color:var(--shiki-foreground)">()]</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<ul>
<li>如果你的项目需要编译 <code>.less</code> 文件，请安装并注册 <a href="/zh/plugins/list/plugin-less" class="rp-link">@rsbuild/plugin-less</a> 插件：</li>
</ul>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { pluginLess } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;@rsbuild/plugin-less&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  plugins</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> [</span><span style="color:var(--shiki-token-function)">pluginLess</span><span style="color:var(--shiki-foreground)">()]</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<h3 class="rp-toc-include" id="dataurilimit-默认值"><a href="#dataurilimit-默认值" class="rp-header-anchor rp-link" aria-hidden="true">#</a>dataUriLimit 默认值</h3>
<p><a href="/zh/config/output/data-uri-limit" class="rp-link">output.dataUriLimit</a> 的默认值从 <code>10000 (10kB)</code> 调整为 <code>4096 (4KiB)</code>.</p>
<p>这是因为目前更多的应用正在使用 HTTP 2.0，所以将资源分割成单独的文件会表现得更好。而且将超过 4KiB 的资源内联可能会使 JS 包体积过大，不利于缓存。</p>
<p>如果你倾向于之前的默认设置，可以添加以下配置：</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  output</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    dataUriLimit</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> 10000</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div><!--/$-->]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Rsbuild 0.6 发布]]></title>
            <link>https://rsbuild.rs/zh/blog/v0-6</link>
            <guid isPermaLink="false">/zh/blog/v0-6</guid>
            <pubDate>Wed, 10 Apr 2024 18:00:00 GMT</pubDate>
            <description><![CDATA[Rsbuild 0.6 发布，默认启用 error overlay，支持 Vue JSX HMR，并引入全新的 transform API。]]></description>
            <content:encoded><![CDATA[<!--$--><p><em>April 10, 2024</em></p>
<h1 class="rp-toc-include" id="rsbuild-06-发布"><a href="#rsbuild-06-发布" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Rsbuild 0.6 发布<!-- --> </h1><div class="rp-not-doc rp-llms-container"><button class="rp-not-doc rp-llms-button rp-llms-copy-button"><div class="rp-llms-copy-button__icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg></div><span>复制 Markdown</span></button><button class="rp-llms-button rp-llms-view-options__trigger "><svg width="1em" height="1em" viewBox="0 0 32 32" class="rp-llms-view-options__arrow "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button></div>
<p><img src="https://assets.rspack.rs/rsbuild/rsbuild-banner-v0-6.png" alt=""/></p>
<p>Rsbuild 0.6 已与 Rspack 0.6 同步发布！</p>
<p>主要变更：</p>
<ul>
<li>升级 Rspack 0.6</li>
<li>默认启用 error overlay</li>
<li>支持 Vue JSX HMR</li>
<li>全新的 transform 插件 API</li>
<li>默认端口调整为 3000</li>
</ul>
<h2 class="rp-toc-include" id="升级-rspack-06"><a href="#升级-rspack-06" class="rp-header-anchor rp-link" aria-hidden="true">#</a>升级 Rspack 0.6</h2>
<p>Rsbuild 已将依赖的 Rspack 升级至 0.6 版本，并适配了 Rspack 0.6 包含的 CSS Modules 不兼容更新。</p>
<p>在新版本中，Rspack 默认开启了新版 tree shaking 算法，使产物体积和产物稳定性得到显著提升。请参考 <a href="https://rspack.rs/zh/blog/announcing-0-6" target="_blank" rel="noopener noreferrer" class="rp-link">Rspack 0.6 发布公告</a> 了解更多。</p>
<h2 class="rp-toc-include" id="默认启用-error-overlay"><a href="#默认启用-error-overlay" class="rp-header-anchor rp-link" aria-hidden="true">#</a>默认启用 error overlay</h2>
<p>从 Rsbuild 0.6 开始，<a href="/zh/config/dev/client" class="rp-link">dev.client.overlay</a> 的默认值调整为 <code>true</code>。这意味着当出现编译错误时，Rsbuild 将默认弹出 error overlay 来展示错误信息：</p>
<p><img src="https://assets.rspack.rs/rsbuild/assets/rsbuild-error-overlay.png" alt=""/></p>
<p>如果你不需要此功能，可以将 <code>dev.client.overlay</code> 设置为 <code>false</code> 来禁用：</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-token-function)"> defineConfig</span><span style="color:var(--shiki-foreground)">({</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  dev</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    client</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      overlay</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> false</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">});</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<h2 class="rp-toc-include" id="支持-vue-jsx-hmr"><a href="#支持-vue-jsx-hmr" class="rp-header-anchor rp-link" aria-hidden="true">#</a>支持 Vue JSX HMR</h2>
<p><code>@rsbuild/plugin-vue-jsx</code> 现已支持 JSX HMR，当你在 Vue 3 应用中修改 JSX 代码时，会自动触发模块热替换，并保留当前页面的状态。</p>
<p>该功能由社区贡献者 <a href="https://github.com/liyincode" target="_blank" rel="noopener noreferrer" class="rp-link">@liyincode</a> 实现 ❤️，并且发布为独立的 <a href="https://github.com/liyincode/babel-plugin-vue-jsx-hmr" target="_blank" rel="noopener noreferrer" class="rp-link">babel-plugin-vue-jsx-hmr</a> 包，以便在 Rsbuild 以外的项目中使用。</p>
<h2 class="rp-toc-include" id="全新的-transform-api"><a href="#全新的-transform-api" class="rp-header-anchor rp-link" aria-hidden="true">#</a>全新的 transform API</h2>
<p>Rsbuild 插件现已支持 <a href="/zh/plugins/dev/core#apitransform" class="rp-link">transform API</a>，这可以理解为 Rspack loader 的一个轻量化实现，它提供了简单易用的 API，并在底层自动调用 Rspack loader 进行代码转换。</p>
<p>在 Rsbuild 插件中，你可以通过 <code>api.transform</code> 快速实现代码转换功能，能够满足大部分常见场景，而无须学习 Rspack loader 的编写方法。</p>
<p>比如匹配以 .pug 为后缀的模块，并转换为 JavaScript 代码：</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> pug </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;pug&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-token-function)"> pluginPug</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-foreground)"> () </span><span style="color:var(--shiki-token-keyword)">=&gt;</span><span style="color:var(--shiki-foreground)"> ({</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  name</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;my-pug-plugin&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-token-function)">  setup</span><span style="color:var(--shiki-foreground)">(api) {</span></span>
<span class="line"><span style="color:var(--shiki-token-constant)">    api</span><span style="color:var(--shiki-token-function)">.transform</span><span style="color:var(--shiki-foreground)">({ test</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> /\.pug</span><span style="color:var(--shiki-token-keyword)">$</span><span style="color:var(--shiki-token-string-expression)">/</span><span style="color:var(--shiki-foreground)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> ({ code }) </span><span style="color:var(--shiki-token-keyword)">=&gt;</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">      const</span><span style="color:var(--shiki-token-constant)"> templateCode</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-token-constant)"> pug</span><span style="color:var(--shiki-token-function)">.compileClient</span><span style="color:var(--shiki-foreground)">(code</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> {});</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">      return</span><span style="color:var(--shiki-token-string-expression)"> `</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-foreground)">templateCode</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">; module.exports = template;`</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    });</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">});</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p>对于一些复杂的代码转换场景，<code>api.transform</code> 可能无法满足，此时你可以使用 Rspack loader 进行实现。</p>
<h2 class="rp-toc-include" id="默认端口调整为-3000"><a href="#默认端口调整为-3000" class="rp-header-anchor rp-link" aria-hidden="true">#</a>默认端口调整为 3000</h2>
<p>Rsbuild 已将 <a href="/zh/config/server/port" class="rp-link">server.port</a> 的默认值从 <code>8080</code> 调整到 <code>3000</code>。</p>
<p>端口 3000 通常用于 web 开发领域，也是 create-react-app 等工具默认使用的端口。通过更改默认端口为 3000，可以避免在使用 8080 时可能遇到的端口冲突问题。</p>
<p>如果你需要使用 8080 端口，可以手动设置：</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-token-function)"> defineConfig</span><span style="color:var(--shiki-foreground)">({</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  server</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    port</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> 8080</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">});</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div><!--/$-->]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Rsbuild 0.5 发布]]></title>
            <link>https://rsbuild.rs/zh/blog/v0-5</link>
            <guid isPermaLink="false">/zh/blog/v0-5</guid>
            <pubDate>Tue, 19 Mar 2024 08:00:00 GMT</pubDate>
            <description><![CDATA[Rsbuild 0.5 发布，支持 Lightning CSS、自定义 Server 和更灵活的压缩配置。]]></description>
            <content:encoded><![CDATA[<!--$--><p><em>March 19, 2024</em></p>
<h1 class="rp-toc-include" id="rsbuild-05-发布"><a href="#rsbuild-05-发布" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Rsbuild 0.5 发布<!-- --> </h1><div class="rp-not-doc rp-llms-container"><button class="rp-not-doc rp-llms-button rp-llms-copy-button"><div class="rp-llms-copy-button__icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg></div><span>复制 Markdown</span></button><button class="rp-llms-button rp-llms-view-options__trigger "><svg width="1em" height="1em" viewBox="0 0 32 32" class="rp-llms-view-options__arrow "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button></div>
<p><img src="https://assets.rspack.rs/rsbuild/rsbuild-banner-v0-5.png" alt=""/></p>
<p>Rsbuild 0.5 是一个重要的里程碑，从该版本开始，Rsbuild 的绝大部分 API 已经达到稳定状态，我们预计在 2024 年 Q3 发布 Rsbuild v1.0。</p>
<p>主要变更：</p>
<ul>
<li>⚡️ 支持启用 <a href="https://lightningcss.dev/" target="_blank" rel="noopener noreferrer" class="rp-link">Lightning CSS</a> 以加速 CSS 编译。</li>
<li>🌟 支持基于新的 JavaScript API 实现自定义 server。</li>
<li>🍭 重构 SVGR 插件以支持更丰富的用法。</li>
<li>📍 支持自定义压缩选项。</li>
</ul>
<h2 class="rp-toc-include" id="️-支持-lightning-css"><a href="#️-支持-lightning-css" class="rp-header-anchor rp-link" aria-hidden="true">#</a>⚡️ 支持 Lightning CSS</h2>
<p>Lightning CSS 是一个基于 Rust 编写的高性能 CSS 解析、转译和压缩工具。它支持将许多现代的 CSS 特性解析并转化为指定浏览器支持的语法，并提供更好的压缩比例。</p>
<p>Rsbuild 提供了 Lightning CSS 插件，用于按需开启 Lightning CSS 能力，并替代 Rsbuild 内置的 PostCSS、autoprefixer 和 SWC CSS minimizer。</p>
<p>只需要在 Rsbuild 配置中注册 Lightning CSS 插件，即可完成切换：</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { pluginLightningcss } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;@rsbuild/plugin-lightningcss&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  plugins</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> [</span><span style="color:var(--shiki-token-function)">pluginLightningcss</span><span style="color:var(--shiki-foreground)">()]</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p>在一个真实的大型 Web 应用中，我们接入了 Rsbuild Lightning CSS 插件，并使用 <a href="https://rsdoctor.rs/" target="_blank" rel="noopener noreferrer" class="rp-link">Rsdoctor</a> 分析构建耗时的变化：</p>
<ul>
<li>CSS 编译耗时由 8.4s 降低到 0.12s，提升 70 倍。</li>
<li>整体构建耗时由 33.1s 降低到 25.4s，提升 30%。</li>
</ul>
<h2 class="rp-toc-include" id="-支持自定义-server"><a href="#-支持自定义-server" class="rp-header-anchor rp-link" aria-hidden="true">#</a>🌟 支持自定义 Server</h2>
<p>Rsbuild 现在支持将 dev server 替换为自定义的 server，并复用 Rsbuild 提供的页面预览、路由、模块热更新等功能。这将使得 Rsbuild 与其他 Node.js 框架结合使用变得更加容易。</p>
<p>比如基于 express 实现自定义 server：</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> express </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;express&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { createRsbuild } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;@rsbuild/core&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">async</span><span style="color:var(--shiki-token-keyword)"> function</span><span style="color:var(--shiki-token-function)"> startCustomServer</span><span style="color:var(--shiki-foreground)">() {</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">  const</span><span style="color:var(--shiki-token-constant)"> app</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-token-function)"> express</span><span style="color:var(--shiki-foreground)">();</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">  const</span><span style="color:var(--shiki-token-constant)"> rsbuild</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> createRsbuild</span><span style="color:var(--shiki-foreground)">({</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    config</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      server</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">        middlewareMode</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> true</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  });</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">  const</span><span style="color:var(--shiki-foreground)"> { </span><span style="color:var(--shiki-token-constant)">port</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-constant)"> middlewares</span><span style="color:var(--shiki-foreground)"> } </span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-constant)"> rsbuild</span><span style="color:var(--shiki-token-function)">.createDevServer</span><span style="color:var(--shiki-foreground)">();</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-constant)">  app</span><span style="color:var(--shiki-token-function)">.use</span><span style="color:var(--shiki-foreground)">(middlewares);</span></span>
<span class="line"><span style="color:var(--shiki-token-constant)">  app</span><span style="color:var(--shiki-token-function)">.listen</span><span style="color:var(--shiki-foreground)">(port);</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">}</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p>详情可参考 <a href="/zh/api/javascript-api/instance#rsbuildcreatedevserver" class="rp-link">Rsbuild - createDevServer</a>。</p>
<h2 class="rp-toc-include" id="-重构-svgr-插件"><a href="#-重构-svgr-插件" class="rp-header-anchor rp-link" aria-hidden="true">#</a>🍭 重构 SVGR 插件</h2>
<p>在 0.5.0 之前的版本中，SVGR 插件的默认用法与 create-react-app 保持一致，允许以混合导入的形式使用 SVG：</p>
<div class="rp-codeblock language-js"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="js"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> logoUrl</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> { ReactComponent </span><span style="color:var(--shiki-token-keyword)">as</span><span style="color:var(--shiki-foreground)"> Logo } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;./logo.svg&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-constant)">console</span><span style="color:var(--shiki-token-function)">.log</span><span style="color:var(--shiki-foreground)">(logoUrl); </span><span style="color:var(--shiki-token-comment)">// -&gt; string</span></span>
<span class="line"><span style="color:var(--shiki-token-constant)">console</span><span style="color:var(--shiki-token-function)">.log</span><span style="color:var(--shiki-foreground)">(Logo); </span><span style="color:var(--shiki-token-comment)">// -&gt; React component</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p>但这种做法存在两个问题：</p>
<ol>
<li><strong>包体积增加</strong>：混合导入会导致单个 SVG 模块被编译为两种代码（即使部分导出没有被使用），这会增加产物的包体积。</li>
<li><strong>编译速度下降</strong>：混合导入会产生额外的编译开销。即使代码中未使用到 ReactComponent 导出，SVG 文件仍然会被 SVGR 编译。而 SVGR 是基于 Babel 实现的，性能开销较大。</li>
</ol>
<p>因此，我们重构了 <code>@rsbuild/plugin-svgr</code> 插件，支持通过 <code>?react</code> query 来将 SVG 转换为 React 组件，这种用法能够解决以上问题，且更符合当前社区的最佳实践。</p>
<div class="rp-codeblock language-jsx"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="jsx"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> logoUrl </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;./logo.svg&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> Logo </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;./logo.svg?react&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-constant)">console</span><span style="color:var(--shiki-token-function)">.log</span><span style="color:var(--shiki-foreground)">(logoUrl); </span><span style="color:var(--shiki-token-comment)">// -&gt; string</span></span>
<span class="line"><span style="color:var(--shiki-token-constant)">console</span><span style="color:var(--shiki-token-function)">.log</span><span style="color:var(--shiki-foreground)">(Logo); </span><span style="color:var(--shiki-token-comment)">// -&gt; React component</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p>SVGR 插件现在支持在多种 SVGR 用法之间切换，如果项目需要使用之前的混合导入用法，可以手动开启 <a href="/zh/plugins/list/plugin-svgr#mixedimport" class="rp-link">mixedImport</a> 选项：</p>
<div class="rp-codeblock language-js"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="js"><code><span class="line"><span style="color:var(--shiki-token-function)">pluginSvgr</span><span style="color:var(--shiki-foreground)">({</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  mixedImport</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> true</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">});</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<h2 class="rp-toc-include" id="-自定义压缩选项"><a href="#-自定义压缩选项" class="rp-header-anchor rp-link" aria-hidden="true">#</a>📍 自定义压缩选项</h2>
<p><code>output.disableMinimize</code> 选项已经被重命名为 <a href="/zh/config/output/minify" class="rp-link">output.minify</a>，并允许自定义 JS 和 HTML 的压缩选项。</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  output</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    minify</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      jsOptions</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">        minimizerOptions</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">          mangle</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> false</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">        }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p>使用 <code>output.disableMinimize</code> 的项目可以参考以下示例：</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables has-diff" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  output</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line diff remove"><span style="color:var(--shiki-foreground)">    disableMinimize</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> true</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line diff add"><span style="color:var(--shiki-foreground)">    minify</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> false</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<blockquote>
<p>详见 <a href="https://github.com/web-infra-dev/rsbuild/issues/1681" target="_blank" rel="noopener noreferrer" class="rp-link">&quot;allow customize minify options&quot;</a>。</p>
</blockquote>
<hr/>
<p>更多内容请参考：</p>
<ul>
<li><a href="https://github.com/web-infra-dev/rsbuild/releases/tag/v0.5.0" target="_blank" rel="noopener noreferrer" class="rp-link">Rsbuild 0.5.0 更新日志</a></li>
<li><a href="https://github.com/web-infra-dev/rsbuild/discussions/1732" target="_blank" rel="noopener noreferrer" class="rp-link">Rsbuild 0.5.0 不兼容更新</a></li>
</ul><!--/$-->]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Rsbuild 0.4 发布]]></title>
            <link>https://rsbuild.rs/zh/blog/v0-4</link>
            <guid isPermaLink="false">/zh/blog/v0-4</guid>
            <pubDate>Tue, 06 Feb 2024 08:00:00 GMT</pubDate>
            <description><![CDATA[Rsbuild 0.4 发布，提供内置模块联邦配置，并更新插件 Hook 顺序与多项默认行为。]]></description>
            <content:encoded><![CDATA[<!--$--><p><em>February 06, 2024</em></p>
<h1 class="rp-toc-include" id="rsbuild-04-发布"><a href="#rsbuild-04-发布" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Rsbuild 0.4 发布<!-- --> </h1><div class="rp-not-doc rp-llms-container"><button class="rp-not-doc rp-llms-button rp-llms-copy-button"><div class="rp-llms-copy-button__icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg></div><span>复制 Markdown</span></button><button class="rp-llms-button rp-llms-view-options__trigger "><svg width="1em" height="1em" viewBox="0 0 32 32" class="rp-llms-view-options__arrow "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button></div>
<p><img src="https://assets.rspack.rs/rsbuild/rsbuild-banner-v0-4.png" alt=""/></p>
<p>Rsbuild 0.4 版本提供内置的模块联邦支持。此外，还包含一些 API 的不兼容更新，请参考当前文档进行升级。</p>
<h3 class="rp-toc-include" id="模块联邦配置"><a href="#模块联邦配置" class="rp-header-anchor rp-link" aria-hidden="true">#</a>模块联邦配置</h3>
<p>Rsbuild 现在提供一个内置的 <a href="/zh/config/module-federation/options" class="rp-link">moduleFederation</a> 选项，这将使得在 Rsbuild 中配置模块联邦变得更加容易。</p>
<ul>
<li><strong>示例：</strong></li>
</ul>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-token-function)"> defineConfig</span><span style="color:var(--shiki-foreground)">({</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  moduleFederation</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    options</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-token-comment)">      // ModuleFederationPluginOptions</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">});</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p>当你使用该选项时，Rsbuild 会自动修改默认的 <code>publicPath</code> 和 <code>splitChunks</code> 配置，使模块联邦可以开箱即用。</p>
<blockquote>
<p>详见 <a href="https://github.com/web-infra-dev/rsbuild/discussions/1461" target="_blank" rel="noopener noreferrer" class="rp-link">RFC - Provide first-class support for Module Federation</a>。</p>
</blockquote>
<h3 class="rp-toc-include" id="插件-hook-顺序"><a href="#插件-hook-顺序" class="rp-header-anchor rp-link" aria-hidden="true">#</a>插件 Hook 顺序</h3>
<p>在 Rsbuild 插件中使用 hook 时，现在可以通过 <code>order</code> 字段来声明 hook 的顺序：</p>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-token-function)"> myPlugin</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-foreground)"> () </span><span style="color:var(--shiki-token-keyword)">=&gt;</span><span style="color:var(--shiki-foreground)"> ({</span></span>
<span class="line"><span style="color:var(--shiki-token-function)">  setup</span><span style="color:var(--shiki-foreground)">(api) {</span></span>
<span class="line"><span style="color:var(--shiki-token-constant)">    api</span><span style="color:var(--shiki-token-function)">.modifyRsbuildConfig</span><span style="color:var(--shiki-foreground)">({</span></span>
<span class="line"><span style="color:var(--shiki-token-function)">      handler</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> () </span><span style="color:var(--shiki-token-keyword)">=&gt;</span><span style="color:var(--shiki-token-constant)"> console</span><span style="color:var(--shiki-token-function)">.log</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">&#x27;hello&#x27;</span><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      order</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;pre&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    });</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">});</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<blockquote>
<p>详见 <a href="/zh/plugins/dev/hooks" class="rp-link">Plugin Hooks</a>。</p>
</blockquote>
<h3 class="rp-toc-include" id="重命名-disablefilenamehash"><a href="#重命名-disablefilenamehash" class="rp-header-anchor rp-link" aria-hidden="true">#</a>重命名 disableFilenameHash</h3>
<p><code>output.disableFilenameHash</code> 配置已被重命名为 <a href="/zh/config/output/filename-hash" class="rp-link">output.filenameHash</a>。</p>
<ul>
<li>更改前：</li>
</ul>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  output</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    disableFilenameHash</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> true</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<ul>
<li>更改后：</li>
</ul>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  output</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    filenameHash</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> false</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<h2 class="rp-toc-include" id="移除-postcss-flexbugs-fixes"><a href="#移除-postcss-flexbugs-fixes" class="rp-header-anchor rp-link" aria-hidden="true">#</a>移除 postcss-flexbugs-fixes</h2>
<p>Rsbuild 0.4 移除了内置的 <a href="https://github.com/luisrudge/postcss-flexbugs-fixes" target="_blank" rel="noopener noreferrer" class="rp-link">postcss-flexbugs-fixes</a> 插件。</p>
<p>该插件用于修复 IE 10 / 11 中的一些 flex bug。考虑到现代浏览器已经不再存在这些 flex 问题，我们移除了这个插件以提高构建性能。</p>
<p>如果你的项目需要兼容 IE 10 / 11 ，并且遇到了这些 flex 问题，你可以在 Rsbuild 中手动添加这个插件：</p>
<ul>
<li>安装插件：</li>
</ul>
<div class="rp-codeblock language-bash"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="bash"><code><span class="line"><span style="color:var(--shiki-token-function)">npm</span><span style="color:var(--shiki-token-string)"> add</span><span style="color:var(--shiki-token-string)"> postcss-flexbugs-fixes</span><span style="color:var(--shiki-token-string)"> -D</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<ul>
<li>在 <code>postcss.config.cjs</code> 中注册插件：</li>
</ul>
<div class="rp-codeblock language-js"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="js"><code><span class="line"><span style="color:var(--shiki-token-constant)">module</span><span style="color:var(--shiki-foreground)">.</span><span style="color:var(--shiki-token-constant)">exports</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-token-string-expression)">  &#x27;postcss-flexbugs-fixes&#x27;</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {}</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<h2 class="rp-toc-include" id="pure-react-插件"><a href="#pure-react-插件" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Pure React 插件</h2>
<p>React 插件已移除对 <a href="https://npmjs.com/package/antd" target="_blank" rel="noopener noreferrer" class="rp-link">antd</a> v4 和 <a href="https://npmjs.com/package/@arco-design/web-react" target="_blank" rel="noopener noreferrer" class="rp-link">@arco-design/web-react</a> 的默认 <a href="/zh/config/source/transform-import" class="rp-link">source.transformImport</a> 配置。</p>
<p>与组件库相关的配置应该在组件库相关的插件中提供，如 <code>rsbuild-plugin-antd</code> 或 <code>rsbuild-plugin-arco</code>，而 React 插件会专注于提供 React 基础的能力。</p>
<ul>
<li>如果你的项目正在使用 <code>antd</code> v3 或 v4，你可以手动添加以下配置：</li>
</ul>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  source</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    transformImport</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> [</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">        libraryName</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;antd&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">        libraryDirectory</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;es&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">        style</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;css&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    ]</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<ul>
<li>如果你的项目正在使用 <code>@arco-design/web-react</code> v3 或 v4，你可以手动添加以下配置：</li>
</ul>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__title">rsbuild.config.ts</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts" data-title="rsbuild.config.ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  source</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    transformImport</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> [</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">        libraryName</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;@arco-design/web-react&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">        libraryDirectory</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;es&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">        camelToDashComponentName</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> false</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">        style</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;css&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">        libraryName</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;@arco-design/web-react/icon&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">        libraryDirectory</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> &#x27;react-icon&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">        camelToDashComponentName</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> false</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    ]</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<h2 class="rp-toc-include" id="javascript-api"><a href="#javascript-api" class="rp-header-anchor rp-link" aria-hidden="true">#</a>JavaScript API</h2>
<p><code>loadConfig</code> 方法现在会返回配置内容和配置文件的路径：</p>
<div class="rp-codeblock language-js"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="js"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { loadConfig } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;@rsbuild/core&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-comment)">// 0.3</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-token-constant)"> config</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> loadConfig</span><span style="color:var(--shiki-foreground)">();</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-comment)">// 0.4</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-foreground)"> { </span><span style="color:var(--shiki-token-constant)">content</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-constant)"> filePath</span><span style="color:var(--shiki-foreground)"> } </span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> loadConfig</span><span style="color:var(--shiki-foreground)">();</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div><!--/$-->]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Rsbuild 0.3 发布]]></title>
            <link>https://rsbuild.rs/zh/blog/v0-3</link>
            <guid isPermaLink="false">/zh/blog/v0-3</guid>
            <pubDate>Wed, 10 Jan 2024 08:00:00 GMT</pubDate>
            <description><![CDATA[Rsbuild 0.3 发布，支持模块联邦，并调整 TOML/YAML 插件、JavaScript API 与 Node 产物配置。]]></description>
            <content:encoded><![CDATA[<!--$--><p><em>January 10, 2024</em></p>
<h1 class="rp-toc-include" id="rsbuild-03-发布"><a href="#rsbuild-03-发布" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Rsbuild 0.3 发布<!-- --> </h1><div class="rp-not-doc rp-llms-container"><button class="rp-not-doc rp-llms-button rp-llms-copy-button"><div class="rp-llms-copy-button__icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg></div><span>复制 Markdown</span></button><button class="rp-llms-button rp-llms-view-options__trigger "><svg width="1em" height="1em" viewBox="0 0 32 32" class="rp-llms-view-options__arrow "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button></div>
<p><img src="https://assets.rspack.rs/rsbuild/rsbuild-banner-v0-3.png" alt=""/></p>
<p>Rsbuild 0.3 版本升级 Rspack 到 0.5 并支持了模块联邦。此外，还包含一些 API 的不兼容更新，请参考当前文档进行升级。</p>
<h2 class="rp-toc-include" id="rspack-05"><a href="#rspack-05" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Rspack 0.5</h2>
<p>将 Rspack 升级到 v0.5.0，详情见：<a href="https://rspack.rs/zh/blog/announcing-0-5" target="_blank" rel="noopener noreferrer" class="rp-link">Rspack 0.5 发布公告</a></p>
<p>主要变动：</p>
<ul>
<li><a href="https://rspack.rs/zh/blog/module-federation-added-to-rspack" target="_blank" rel="noopener noreferrer" class="rp-link">支持 Module Federation</a></li>
<li><a href="https://rspack.rs/zh/blog/announcing-0-5#%E7%A7%BB%E9%99%A4%E5%B7%B2%E5%BC%83%E7%94%A8%E7%9A%84-builtins-options" target="_blank" rel="noopener noreferrer" class="rp-link">移除已弃用的 builtins 选项</a></li>
</ul>
<h2 class="rp-toc-include" id="toml--yaml-插件"><a href="#toml--yaml-插件" class="rp-header-anchor rp-link" aria-hidden="true">#</a>TOML / YAML 插件</h2>
<p>在 JS 中导入 TOML 和 YAML 的需求并不常见，所以从 v0.3.0 开始，Rsbuild 核心将不再默认支持导入 TOML 和 YAML。</p>
<p>TOML 和 YAML 将变成独立的插件：</p>
<ul>
<li>TOML:</li>
</ul>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-comment)">// rsbuild.config.ts</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { pluginToml } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;@rsbuild/plugin-toml&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  plugins</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> [</span><span style="color:var(--shiki-token-function)">pluginToml</span><span style="color:var(--shiki-foreground)">()]</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<ul>
<li>YAML:</li>
</ul>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-comment)">// rsbuild.config.ts</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { pluginYaml } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> &#x27;@rsbuild/plugin-yaml&#x27;</span><span style="color:var(--shiki-foreground)">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  plugins</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> [</span><span style="color:var(--shiki-token-function)">pluginYaml</span><span style="color:var(--shiki-foreground)">()]</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<h2 class="rp-toc-include" id="javascript-api"><a href="#javascript-api" class="rp-header-anchor rp-link" aria-hidden="true">#</a>JavaScript API</h2>
<p>包含一些 JavaScript API 的参数变更：</p>
<ul>
<li><code>rsbuild.startDevServer</code> 的 <code>printURLs</code> 选项已被弃用，改用 <a href="/zh/config/server/print-urls" class="rp-link">server.printUrls</a> 代替。</li>
<li><code>rsbuild.startDevServer</code> 的 <code>logger</code> 选项已被弃用，改用 <a href="/zh/api/javascript-api/core#logger" class="rp-link">logger.override()</a> 代替。</li>
</ul>
<h2 class="rp-toc-include" id="node-产物"><a href="#node-产物" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Node 产物</h2>
<ul>
<li>调整针对 Node.js 的默认 browserslist，从 <code>node &gt;= 14</code> 变为 <code>node &gt;= 16</code>。</li>
<li><code>output.distPath.server</code> 的默认值从 <code>&#x27;bundles&#x27;</code> 改为 <code>&#x27;server&#x27;</code>。</li>
</ul><!--/$-->]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Rsbuild 0.2 发布]]></title>
            <link>https://rsbuild.rs/zh/blog/v0-2</link>
            <guid isPermaLink="false">/zh/blog/v0-2</guid>
            <pubDate>Mon, 11 Dec 2023 08:00:00 GMT</pubDate>
            <description><![CDATA[Rsbuild 0.2 发布，调整 targets、entry 等核心配置，并重构 Babel 插件选项。]]></description>
            <content:encoded><![CDATA[<!--$--><p><em>December 11, 2023</em></p>
<h1 class="rp-toc-include" id="rsbuild-02-发布"><a href="#rsbuild-02-发布" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Rsbuild 0.2 发布<!-- --> </h1><div class="rp-not-doc rp-llms-container"><button class="rp-not-doc rp-llms-button rp-llms-copy-button"><div class="rp-llms-copy-button__icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg></div><span>复制 Markdown</span></button><button class="rp-llms-button rp-llms-view-options__trigger "><svg width="1em" height="1em" viewBox="0 0 32 32" class="rp-llms-view-options__arrow "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button></div>
<p><img src="https://assets.rspack.rs/rsbuild/rsbuild-banner-v0-2.png" alt=""/></p>
<p>Rsbuild 0.2 版本包含一些 API 的不兼容更新，请参考当前文档进行升级。</p>
<h2 class="rp-toc-include" id="targets"><a href="#targets" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Targets</h2>
<p>我们将 <code>createRsbuild</code> 方法的 <code>target</code> 移动至 rsbuild 配置对象中，这个改动使用户可以在 Rsbuild 配置文件中配置 targets。</p>
<ul>
<li>before:</li>
</ul>
<div class="rp-codeblock language-js"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="js"><code><span class="line"><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-token-constant)"> rsbuild</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> createRsbuild</span><span style="color:var(--shiki-foreground)">({</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  target</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> [</span><span style="color:var(--shiki-token-string-expression)">&#x27;web&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-string-expression)"> &#x27;node&#x27;</span><span style="color:var(--shiki-foreground)">]</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">});</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<ul>
<li>after:</li>
</ul>
<div class="rp-codeblock language-js"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="js"><code><span class="line"><span style="color:var(--shiki-token-comment)">// rsbuild.config.ts</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  output</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    targets</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> [</span><span style="color:var(--shiki-token-string-expression)">&#x27;web&#x27;</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-string-expression)"> &#x27;node&#x27;</span><span style="color:var(--shiki-foreground)">]</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<blockquote>
<p>仅影响 JavaScript API。使用 Rsbuild CLI 的用户不需要做任何改变。</p>
</blockquote>
<h2 class="rp-toc-include" id="entry"><a href="#entry" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Entry</h2>
<p>删除已弃用的 <code>source.entries</code> 配置。</p>
<p>自 Rsbuild 0.1.0 起，<code>source.entries</code> 已更名为 <code>source.entry</code>，我们在 Rsbuild v0.2.0<code>中删除了</code>source.entries` 配置。</p>
<ul>
<li>before:</li>
</ul>
<div class="rp-codeblock language-js"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="js"><code><span class="line"><span style="color:var(--shiki-token-comment)">// rsbuild.config.ts</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  source</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    entries</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {}</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<ul>
<li>after:</li>
</ul>
<div class="rp-codeblock language-js"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="js"><code><span class="line"><span style="color:var(--shiki-token-comment)">// rsbuild.config.ts</span></span>
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  source</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    entry</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {}</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<h2 class="rp-toc-include" id="write-to-disk"><a href="#write-to-disk" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Write to disk</h2>
<p><code>dev.writeToDisk</code> 的默认值变更为 <code>false</code>.</p>
<p>原因：</p>
<ul>
<li>减少文件系统开销，提升开发服务器性能。</li>
<li>避免触发 UnoCSS 和其他工具的监听器。参考：<a href="https://github.com/web-infra-dev/rsbuild/issues/654" target="_blank" rel="noopener noreferrer" class="rp-link">#654</a>。</li>
<li>使默认行为与 webpack-dev-middleware 及其他社区开发服务器保持一致。</li>
</ul>
<p>用户可以手动开启写入磁盘：</p>
<div class="rp-codeblock language-js"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="js"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  dev</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    writeToDisk</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> true</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<h2 class="rp-toc-include" id="babel-插件"><a href="#babel-插件" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Babel 插件</h2>
<p><code>@rsbuild/plugin-babel</code> 将所有的 babel-loader 选项移动到 <code>babelLoaderOptions</code>:</p>
<ul>
<li>before:</li>
</ul>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-function)">pluginBabel</span><span style="color:var(--shiki-foreground)">({</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  plugins</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> []</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  presets</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> []</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">});</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<ul>
<li>after:</li>
</ul>
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-function)">pluginBabel</span><span style="color:var(--shiki-foreground)">([</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  babelLoaderOptions: {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    plugins</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> []</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    presets</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> []</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">]);</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p>这种改变使我们能为 <code>pluginBabel</code> 添加更多选项，如 <code>include</code> 和 <code>exclude</code>。</p>
<h2 class="rp-toc-include" id="source-map"><a href="#source-map" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Source map</h2>
<p><code>output.disableSourceMap</code> 已经更名为 <code>output.sourceMap</code>.</p>
<ul>
<li>before:</li>
</ul>
<div class="rp-codeblock language-js"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="js"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  output</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    disableSourceMap</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      js</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> true</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      css</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> true</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<ul>
<li>after:</li>
</ul>
<div class="rp-codeblock language-js"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="js"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  output</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    sourceMap</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      js</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> false</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">      css</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> false</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<p>source map 的默认值已更新，以提升构建性能。</p>
<ul>
<li>之前：在开发阶段生成 JS / CSS 的 source map，在生产阶段生成 JS 的 source map。</li>
<li>之后：在开发阶段生成 JS 的 source map，在生产阶段不生成 source map。</li>
</ul>
<h2 class="rp-toc-include" id="inject-styles"><a href="#inject-styles" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Inject styles</h2>
<p>将 <code>output.disableCssExtract</code> 更名为 <code>output.injectStyles</code> 以更加直观：</p>
<ul>
<li>before:</li>
</ul>
<div class="rp-codeblock language-js"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="js"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  output</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    disableCssExtract</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> true</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div>
<ul>
<li>after:</li>
</ul>
<div class="rp-codeblock language-js"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="js"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> default</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  output</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> {</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">    injectStyles</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> true</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">  }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="复制代码"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg></button></div></div></div><!--/$-->]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Rsbuild 0.1 发布]]></title>
            <link>https://rsbuild.rs/zh/blog/v0-1</link>
            <guid isPermaLink="false">/zh/blog/v0-1</guid>
            <pubDate>Wed, 22 Nov 2023 08:00:00 GMT</pubDate>
            <description><![CDATA[Rsbuild 0.1 首次发布，带来基于 Rspack 的高性能构建、开箱即用配置和多框架支持。]]></description>
            <content:encoded><![CDATA[<!--$--><p><em>November 22, 2023</em></p>
<h1 class="rp-toc-include" id="rsbuild-01-发布"><a href="#rsbuild-01-发布" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Rsbuild 0.1 发布<!-- --> </h1><div class="rp-not-doc rp-llms-container"><button class="rp-not-doc rp-llms-button rp-llms-copy-button"><div class="rp-llms-copy-button__icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-success"><path fill="currentColor" d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-llms-copy-button__icon-copy"><path fill="currentColor" d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path></svg></div><span>复制 Markdown</span></button><button class="rp-llms-button rp-llms-view-options__trigger "><svg width="1em" height="1em" viewBox="0 0 32 32" class="rp-llms-view-options__arrow "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button></div>
<p><img src="https://assets.rspack.rs/rsbuild/rsbuild-banner-v0-1.png" alt=""/></p>
<p>我们很高兴地宣布 <strong><a href="https://github.com/web-infra-dev/rsbuild" target="_blank" rel="noopener noreferrer" class="rp-link">Rsbuild</a></strong> <strong>0.1</strong> 的发布！</p>
<p>Rsbuild 是基于 Rspack 的构建工具，旨在成为<strong>增强版的 Rspack CLI</strong>，更加容易上手和开箱即用。Rsbuild 是 webpack 应用迁移到 Rspack 的最佳方案，他能帮助你减少 90% 配置并获得 10 倍构建速度。</p>
<h3 class="rp-toc-include" id="-性能"><a href="#-性能" class="rp-header-anchor rp-link" aria-hidden="true">#</a>🚀 性能</h3>
<p>Rsbuild 能够充分发挥 Rspack 的性能优势。由于 Rsbuild 内置了更多开箱即用的功能，因此性能数据会略微低于 Rspack。</p>
<p>构建一个大型 Web 应用的时间：</p>
<!-- -->
<div class="root-Ollge_"><div class="item-sOpi_3"><p class="progressName-Ke8hc2">Rsbuild</p><div class="metricItem-YxRN9U"><div class="container-FuNiZu"><div class="innerContainer-Fc0J9Z"><div class="bar-WHFMsk" style="width:4.839857651245551%"></div></div><div class="desc-lTD7cf"><span class="time-JXJR1M">1.36s</span> <!-- -->dev</div></div><div class="container-FuNiZu"><div class="innerContainer-Fc0J9Z"><div class="bar-WHFMsk" style="width:11.92170818505338%"></div></div><div class="desc-lTD7cf"><span class="time-JXJR1M">3.35s</span> <!-- -->build</div></div><div class="container-FuNiZu"><div class="innerContainer-Fc0J9Z"><div class="bar-WHFMsk" style="width:0.5693950177935942%"></div></div><div class="desc-lTD7cf"><span class="time-JXJR1M">160ms</span> <!-- -->hmr</div></div></div></div><div class="item-sOpi_3"><p class="progressName-Ke8hc2">Vite</p><div class="metricItem-YxRN9U"><div class="container-FuNiZu"><div class="innerContainer-Fc0J9Z"><div class="bar-WHFMsk" style="width:23.131672597864767%"></div></div><div class="desc-lTD7cf"><span class="time-JXJR1M">6.50s</span> <!-- -->dev</div></div><div class="container-FuNiZu"><div class="innerContainer-Fc0J9Z"><div class="bar-WHFMsk" style="width:7.046263345195729%"></div></div><div class="desc-lTD7cf"><span class="time-JXJR1M">1.98s</span> <!-- -->build</div></div><div class="container-FuNiZu"><div class="innerContainer-Fc0J9Z"><div class="bar-WHFMsk" style="width:0.4626334519572953%"></div></div><div class="desc-lTD7cf"><span class="time-JXJR1M">130ms</span> <!-- -->hmr</div></div></div></div><div class="item-sOpi_3"><p class="progressName-Ke8hc2">webpack</p><div class="metricItem-YxRN9U"><div class="container-FuNiZu"><div class="innerContainer-Fc0J9Z"><div class="bar-WHFMsk" style="width:76.15658362989322%"></div></div><div class="desc-lTD7cf"><span class="time-JXJR1M">21.40s</span> <!-- -->dev</div></div><div class="container-FuNiZu"><div class="innerContainer-Fc0J9Z"><div class="bar-WHFMsk" style="width:100%"></div></div><div class="desc-lTD7cf"><span class="time-JXJR1M">28.10s</span> <!-- -->build</div></div><div class="container-FuNiZu"><div class="innerContainer-Fc0J9Z"><div class="bar-WHFMsk" style="width:9.893238434163699%"></div></div><div class="desc-lTD7cf"><span class="time-JXJR1M">2.78s</span> <!-- -->hmr</div></div></div></div></div>
<blockquote>
<p>以上数据基于 Farm 团队搭建的 benchmark，更多信息请参考 <a href="https://github.com/rstackjs/build-tools-performance" target="_blank" rel="noopener noreferrer" class="rp-link">build-tools-performance</a>。</p>
</blockquote>
<h3 class="rp-toc-include" id="-特性"><a href="#-特性" class="rp-header-anchor rp-link" aria-hidden="true">#</a>🔥 特性</h3>
<p>Rsbuild 具备以下特性：</p>
<ul>
<li>
<p><strong>易于配置</strong>：Rsbuild 的目标之一，是为 Rspack 用户提供开箱即用的构建能力，使开发者能够在零配置的情况下开发 web 项目。同时，Rsbuild 提供一套语义化的构建配置，以降低 Rspack 配置的学习成本。</p>
</li>
<li>
<p><strong>性能优先</strong>：Rsbuild 集成了社区中基于 Rust 的高性能工具，包括 <a href="https://github.com/web-infra-dev/rspack" target="_blank" rel="noopener noreferrer" class="rp-link">Rspack</a>，<a href="https://swc.rs/" target="_blank" rel="noopener noreferrer" class="rp-link">SWC</a> 和 <a href="https://lightningcss.dev/" target="_blank" rel="noopener noreferrer" class="rp-link">Lightning CSS</a>，以提供一流的构建速度和开发体验。与基于 webpack 的 Create React App 和 Vue CLI 等工具相比，Rsbuild 提供了 5 ~ 10 倍的构建性能，以及更轻量的依赖体积。</p>
</li>
<li>
<p><strong>插件生态</strong>：Rsbuild 内置一个轻量级的插件系统，提供一系列高质量的官方插件。此外，Rsbuild 兼容大部分的 webpack 插件和所有的 Rspack 插件，这意味着你可以在 Rsbuild 中使用社区或公司内沉淀的现有插件，而无须重写相关代码。</p>
</li>
<li>
<p><strong>产物稳定</strong>：Rsbuild 设计时充分考虑了构建产物的稳定性，它的开发和生产构建产物具备较强的一致性，并自动完成语法降级和 polyfill 注入。Rsbuild 也提供插件来进行 TypeScript 类型检查和产物语法检查，以避免线上代码的质量问题和兼容性问题。</p>
</li>
<li>
<p><strong>框架无关</strong>：Rsbuild 不与前端 UI 框架耦合，并通过插件来支持 React、Vue、Svelte、Solid、Preact 等框架，未来也计划支持社区中更多的 UI 框架。</p>
</li>
</ul>
<h3 class="rp-toc-include" id="-下一步"><a href="#-下一步" class="rp-header-anchor rp-link" aria-hidden="true">#</a>💡 下一步</h3>
<p>目前 Rsbuild 仍在快速迭代中，并计划引入更多强大的新特性。</p>
<p>比如，我们正在开发 <strong>Rsdoctor</strong>，这是一个强大的构建分析工具，可以用于所有 Rspack 和 webpack 项目。它提供可视化 UI，来帮助开发者分析项目中的构建耗时、重复依赖、代码转换过程等，使构建问题更加容易被定位和解决。</p>
<p><img src="https://assets.rspack.rs/rsbuild/assets/rsdoctor-preview.jpg" alt="Rsdoctor preview"/></p>
<p>我们将在近期发布 Rsdoctor 的第一个可用版本，后续 Rsbuild 会与 Rspack 同步迭代，并计划于 2024 年上半年发布 1.0 版本。</p><!--/$-->]]></content:encoded>
        </item>
    </channel>
</rss>