最近在 X 上刷到 Million Lint 的消息，挺感兴趣，你可以在这里看到对它的介绍。

Million Lint 是一个 VSCode 扩展，可让您的 React 网站保持快速运行。我们识别缓慢的代码并提供修复建议。它就像 ESLint，但是是为了性能！

先说说它和 Million 的关系，如果你有关注过 react 社区，Million 在 2023 年横空出世，以一句 slogan：Make React 70% faster 赚足了眼球。风头甚至超过了 Vue.js。

图片来源于：risingstars.js.org/2023/zh

Million 是一个极其快速且轻量级的优化编译器。恰逢 react 这两年被广为诟病的性能问题，曾经 react 推出虚拟 DOM 概念的时候给人的印象还是虚拟 DOM 足够快，所以要用虚拟DOM。但是前端变化日新月异，这些年人们又开始重新审视虚拟DOM，比如 svelte 作者的这篇文章: 虚拟DOM是纯粹的开销。

Million 诞生于这样的背景下，Million 可以静态分析您的 React 代码并自动分析将 React 组件编译为紧密优化的高阶组件，然后由 Million 渲染。

抛去 Million 的营销噱头不谈，Million 的作者在发布 Million 的时候还是个高中生，真是后生可畏啊。

Million Lint

说回到我们的主题：Million Lint。 使用: npx @million/lint@latest 一行代码即可安装（包括 npm 依赖 / vscode 插件 / 项目配置的自动修改）。

理论上这一行代码就可以搞定，但是我在安装时卡在了安装依赖的部分，不知道是不是因为网络的原因，不过文档里也提到了如果安装失败如何手动安装，详情请看文档。

安装完成后，启动项目试试，我们来写一个简单的计数器：

import { useState } from 'react'

export default function App() {
  const [count, setCount] = useState(0)
  return (
    <>
        <div>{count}</div>
        <button
          onClick={() => {
            setCount(count + 1)
          }}
        >click</button>
    </>
  )
}

不断点击 click，如果 Million lint 认为代码可能会有性能问题，会出现下面这样的提示：

点击后，会定位到可能有问题的代码：

在 vscode 中，会显示这样：

• x9 为代码重复渲染次数（我不太清楚这里的 x9 是怎么统计出来的，从上面的截图中可以看到，我重复点击了20次，但是只显示了 x9）
• lint++ 为 Million Lint 的 AI 识别功能，可以利用 AI 给出代码建议。需要注意的是，Lint++ 是服务需要登录，后续将会是一个付费功能，按官网的说法一个月 20 美刀。有点小贵。

点击 Lint++ 试一试，由于是连接的 AI 服务，这个过程大概会花费几秒钟，几秒过后，显示没什么优化建议😯：

好吧！这段代码好像确实没什么可优化的地方。我拿实际生产项目试一试，看看他能帮到我点什么。

实际生产项目中，在一次交互行为中，我看到了大量组件被渲染，这个功能还挺直观的，比起在 react devtools 里看复杂的火焰图，Million Lint 可以清晰地看到什么组件渲染了多少次，渲染花了多长时间： 找到其中一个组件运行 Lint++ 看看，这一次 AI 给了提示，提醒我这段代码可以用 useMemo 优化，遗憾的是，虽然 AI 告诉了可以这样优化，但是 AI 没有帮我把优化的代码写出来。

其他的组件我也试了一下，基本上都是提醒我试用 useMemo 进行优化，或者像上面那样的 No issue found。

可能是我的项目太简单了，没有遇到一些别的优化建议，在文档中，还提到了下面这些可能的优化点：

• 不稳定的引用 props 传值
• 缓存昂贵的组件
• 缓存内联函数
• 建议虚拟化（可能是指虚拟列表之类的技术？）
• 用 use-context-selector 代替 useContext
• 将 context providers 移至树上（不带明白这个什么意思）

上面这些优化点很容易让人想到 react 19 即将推出的 React Compiler。React Compiler 的目标是实现React应用的自动优化，通过智能编译技术，精确控制UI的渲染，无需牺牲React核心的思维模式。

不知道当 React Compiler 发布后，Million Lint 会如何和 React Compiler 差异化竞争呢？

总结

Million Lint 是 Million 团队的一次大胆的商业化尝试，在我的试用过程中，确实对 Million 团队这些开创性的的想法感到啧啧称奇。但是体验下来过后，还是缺少一些让人非用不可的令人惊艳的地方，现在 Million Lint 还处于 Beta 版，让我们一起期待 Million Lint 更多的表现吧！

Million 和 Million Lint 的诞生也彰显出了社区对于 react 在性能表现上的不满，正如在 Million Lint 相关视频下的评论所说：

学习使用 Million / Million Lint 这种工具来优化 react，我为什么不干脆把时间花在学习 solid 和 svelte 上呢？

希望 Million 团队所做的努力能够倒逼 raect 团队能够在性能上更进一步吧～

感谢阅读。