嘿，老铁们，Zui近听说 Rsbuild 2.0 要跟 TanStack Start 合体了？是不是有点像《英雄联盟》里的神级组合？别急，咱先聊聊这两位新手。

Rsbuild 基于 Rspack 打造的现代构建工具。它把 webpack 的核心Neng力搬进 Rust，再加上 JavaScript 接口，速度快、体积小。

TanStack Start 则是基于 TanStack Router 打造的全栈框架。它把路由、状态管理、服务器组件整合在一起，让你Neng一站搞定前后端。

二者本质上dou想让开发geng高效、geng快。谁说前端只Neng跑浏览器？谁说后端只Neng跑 Node？这两家正在合力打破传统。

从 v1 到 v2，Rsbuild Zuo了大改。比如：

NoEsm 改动：默认输出 ES modules，不再压缩 CommonJS；这样调试geng清晰。

服务器配置简化：server.setup 替代 server.setupMiddlewares，让你直接在 config 写中间件。

Nginx 与 Proxy 升级：AWS http-proxy-middleware 换成 unjs 社区维护的 httpxy，安全性geng高。

Browserslist 默认目标：跟 Baseline 对齐，无需手动写 browserslist，省事又省时间。

Eslint & TypeScript 集成提升：SWR 支持 TypeScript 辅助，geng少运行时错误。

TanStack Router 原本是路由库，但它深度集成了数据加载、分页、缓存等特性。Start 把这些功Neng提升到全栈层面：路由 + API + SSR/SSG 一站搞定。

Damn！用 React Server Components Zuo动态渲染，也Neng轻松切换到静态生成。对你说实话，这种“一键切换”真的hen爽。

Main selling point：Vite7 为打包工具，告别 webpack 的痛点；热重载即时生效；文件系统驱动路由，路径自然匹配。

A1：性Neng优化。RSPack 在构建速度上比 webpack 提升十倍甚至百倍；而 RSC 减少客户端 JS Ke以直接降低 bundle 大小。两者组合可谓“速度+大小”双降。

A2：生态互补。现在hen多团队从 CRA 或 Vite 跳槽到 Rsbuild，因为它兼容插件体系，又有geng好的缓存和增量编译体验；而 TanStack 团队正好需要一个稳定、高性Neng的构建器来实现全栈特性，所以自然搭配起来啦！

A3：社区热度。各大框架和库dou在谈 RSPack、TanStack Router 等技术，未来Ru果官方给出完整插件链，就Neng让整个前端生态走向统一标准——那就太酷了！你懂的，我也想当那个先入门的人。哈哈～

// 假设我们在 rsbuild.config.ts 写的插件链
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginRSC } from 'rsbuild-plugin-rsc';
export default defineConfig({
  plugins: ,
});

- 在下一版本里这个插件会支持直接写@tanstack/react-router-start/server-only // 用来标记服务器专属代码；当前仍处实验阶段，但YiNeng跑基本例子。

NoEsm 默认输出 ES Modules：If your project still uses CommonJS，需要显式设置"type":"module", 或在 tsconfig 中启用 module:"ESNext" 来避免运行时错误。不对不对，应该是这样子哦~.

Browserslist 默认目标变geng：# Ru果你Yi经手动写过 browserslist，那么新版本不会影响你。但Ru果没写，那就默认使用 Baseline —— 简单又靠谱.

Caching 与增量编译改进：# 开启 persistentCache 后构建速度明显提升，Ru果你还没开启，Ke以在 config 加"cache": {"persistent":true}.

⚠️ 小提醒：Node.js>=16 是Zui低要求，现在也不再支持旧版 Node 。所以别忘了升级 Node 环境哟!

⚠️ Ru果你用的是旧版 Yarn 或 pnpm，请检查锁文件是否兼容Zui新依赖，否则可Neng报错.

// rsbuild.config.ts 快速起步
import { createRouteConfig } from '@tanstack/react-router';
const routeConfig = createRouteConfig
 .addChildren => );
export default {
 plugins:,
};

NoEsm 输出方式细节:

默认输出目录 dist/esm/；Ru果想保持 CommonJS，可在 output.module=false 设置为 CJS；但建议保留 ESM，以便未来使用 ESM native loader.

若想开启压缩，只需 minify:true 即可，无需额外配置 SWC 压缩器.

点击了解geng多← 可爱吗？😂 另一个虚拟链接 继续阅读