官网上四个产品的动效演示——那个会自己切换场景的白色面板—— 最初是按标准做法用 React 组件实现的。写完能跑，也好看。
然后我们量了一下它的代价：
| 项目 | 压缩后体积 |
|---|---|
| React 运行时 | 58.7 KB |
| 演示本身的代码 | 2.2 KB |
| 合计 | 60.9 KB |
96% 的重量是框架本身。
这些面板到底在做什么
值得为它付这个代价吗？看一下这些场景实际做的事：
- 画面是静态的 HTML
- 动画全部由 CSS 关键帧驱动
- 交互只有一件——记住「现在显示第几个场景」，到点切换
一个三态开关。为了这个背上一整套框架运行时， 等于让每一位访客先下载 58.7 KB，才能看到一个每两秒换一次的画面。
换成原生 JavaScript
我们把它重写成了一段原生 JS 控制器，功能一模一样：按时长轮播、 点标签切换、切换时重播入场动画（用「克隆整棵子树替换自己」一次性重启 几十个各带延迟的 CSS 动画），并把 React 及相关依赖从项目里整个卸载。
重写后，全站的 JavaScript 只剩一个文件、压缩后 1.1 KB， 其中还包含了导航菜单和移动端抽屉的逻辑。
| React 方案 | 现在 | |
|---|---|---|
| 动效相关的 JS | 60.9 KB | 1.1 KB（含导航等全部交互） |
| 运行依赖 | 5 个 | 2 个 |
| 连开发依赖一起算 | 9 个 | 4 个 |
首屏体积（压缩后，本文写作时的实测值）：
| 页面 | 体积 |
|---|---|
| 关于我们等普通页面 | 12.2 KB |
| 新闻列表 / 新闻正文 | 13.4–13.6 KB |
| 产品详情（一组动效演示） | 19.4 KB |
| 首页（八组动效面板 + 四条动态） | 35.0 KB |
| 首次访问另加标题字体 | 32.9 KB（此后长期缓存） |
页面体积会随内容增减而变化，上表是本文发布时的实测数字。 JavaScript 那一项不会——它与内容无关。
首页之所以比普通页重不少，是因为「首页版位可以在后台调整」： 四个主推块和四张产品卡全部渲染进 HTML，由一小段 JS 决定显示哪个， 而不是等配置回来再渲染——那样访客会先看到一条空白。 这是为「可配置」付的钱，我们认为值，也把账算在这里。
不是反对框架，是反对不假思索
框架解决的是复杂状态管理的问题。这个官网没有这类问题： 它没有登录、没有购物车、没有需要在多个组件之间同步的状态。 一个介绍公司、把访客送去产品站点的站点，本来就该是几页静态 HTML。
所以我们给自己留了一条规矩写在项目里：要加交互时，先问一句「这真的需要框架吗」。 到目前为止，导航菜单、移动端抽屉、演示轮播、常见问题展开——全部用原生 JS 或纯 CSS 解决了。
需要这类技术判断的团队，可以看看我们的技术咨询服务。