Semi Design v2.98.0：Vite 插件来了，中后台项目搭建再快一步

预计阅读时间：7 分钟

字节跳动抖音前端与 UED 团队维护的 Semi Design 又往前推了一版。v2.98.0 的核心变化不是某个组件的微调，而是新增了 @douyinfe/semi-vite-plugin——一个专门为 Vite 构建场景打造的插件包。对于已经在用 Vite 搭建 React 中后台的团队来说，这意味着 Semi 的主题定制、样式按需加载等能力可以更自然地融入 Vite 工作流，不再需要手动拼凑 Webpack 那套配置。

Semi Design 定位回顾

Semi Design 是面向中后台场景的设计系统，覆盖设计语言、React 组件库、主题引擎三层。开箱即用、支持深度主题定制是它和 Ant Design、Arco Design 同台竞技时的主要卖点。组件覆盖表格、表单、导航、弹窗等中后台高频需求，风格偏现代简洁，和抖音系产品的视觉语言一致。

v2.98.0 的关键更新

根据发布说明，此版本的 Feature 项集中在新增 @douyinfe/semi-vite-plugin 包。这个插件解决的是 Vite 项目接入 Semi 时的几个典型痛点：

样式按需引入——Semi 组件的 CSS 默认全量打包，Vite 项目里如果不做处理，首屏会加载整份样式文件。插件可以自动识别你实际用到的组件，只注入对应样式。
主题编译集成——Semi 的主题定制依赖 Design Token 体系，需要把自定义 Token 编译成 CSS 变量并替换默认样式。在 Webpack 里这靠 semi-webpack-plugin 完成，Vite 侧之前缺少官方方案，现在有了对等支持。
构建提速——Vite 本身以快著称，但 Semi 的主题编译如果靠 PostCSS 插件手动串联，容易拖慢 HMR。官方插件把这一步内聚，减少配置摩擦。

实战：Vite + Semi Design 项目搭建

下面给出一个最小可运行的 Vite + React + Semi Design 项目配置，重点演示 semi-vite-plugin 的接入方式。

1. 初始化项目

npm create vite@latest semi-vite-demo -- --template react
cd semi-vite-demo
npm install @douyinfe/semi-ui @douyinfe/semi-icons @douyinfe/semi-vite-plugin

2. 配置 vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import semiVitePlugin from '@douyinfe/semi-vite-plugin';

export default defineConfig({
  plugins: [
    react(),
    semiVitePlugin({
      // 开启主题编译，传入自定义 Token 可覆盖默认设计变量
      theme: {
        // 示例：把主色换成抖音品牌橙
        '--semi-color-primary': '#FE2C55',
      },
    }),
  ],
});

theme 字段是可选的。不传则使用 Semi 默认主题；传入 Token 对象后，插件会在构建时把 Token 编译为 CSS 变量，自动替换组件样式中的对应值。Token 名称参考 Semi 官方 Design Token 文档。

3. 写一个简单页面验证效果

把 src/App.jsx 替换为：

import { Button, Input, Space, Typography } from '@douyinfe/semi-ui';
import { IconSearch } from '@douyinfe/semi-icons';

function App() {
  return (
    <div style={{ padding: 32 }}>
      <Typography.Title heading={3}>Semi + Vite Demo</Typography.Title>
      <Space>
        <Input prefix={<IconSearch />} placeholder="搜索内容" />
        <Button theme="solid">确认</Button>
      </Space>
    </div>
  );
}

export default App;

4. 启动开发服务器

npm run dev

打开浏览器后，你应该能看到按钮主色变成了 #FE2C55（抖音橙），而不是 Semi 默认的蓝色。如果颜色没变，检查 semi-vite-plugin 版本是否 ≥ v2.98.0 对应的发布版本，以及 theme 配置是否被正确传入。

主题定制的边界与取舍

Semi 的 Token 体系覆盖了颜色、字号、圆角、间距等几十个变量，理论上可以做出完全不同于默认风格的产品界面。但实际落地时有几点需要注意：

Token 粒度有限——部分组件的内部结构样式（比如 Table 的单元格边框细节）不一定都有对应 Token，深度定制仍可能需要 CSS 覆盖。
升级兼容性——Token 名称在跨版本间可能微调，升级 Semi 版本后建议跑一遍视觉回归测试。
多主题场景——如果产品需要暗色/亮色双主题切换，Semi 支持 body 级别的 CSS 变量切换，插件编译出的主题文件需要同时包含两套 Token，配置方式参考 Semi 官方多主题文档。

从 Webpack 迁移到 Vite 的检查清单

如果你现有项目用的是 semi-webpack-plugin，迁移到 Vite + semi-vite-plugin 时可以按这个清单逐项核对：

检查项	说明
按需加载是否生效	构建产物中不应出现未使用组件的 CSS，可用 `npm run build` 后检查产物体积
自定义 Token 是否编译	打开浏览器 DevTools，检查 `:root` 下是否有你定义的 CSS 变量
HMR 速度是否正常	修改 Token 后刷新应 < 1s，如果明显变慢说明插件可能未正确挂载
图标按需引入	`@douyinfe/semi-icons` 建议按组件名引入单个图标，避免全量打包
SSR 兼容性	如果项目有服务端渲染需求，确认插件在 SSR 构建模式下不报错

小结

Semi Design v2.98.0 最大的实际意义是补上了 Vite 生态的官方插件缺口。对于新项目，直接用 Vite + semi-vite-plugin 起步，配置量比 Webpack 方案少一截；对于存量项目，迁移成本主要在构建配置替换，组件代码本身不需要改动。如果你团队的中后台项目已经在 Vite 上跑，这个版本值得尽快升级尝试。