React应用安装million.js后增减组件消失问题求助

问题描述 #

在React + Vite项目中引入million.js编译器和MillionLint后，Counter组件里的增减按钮（IconButton）直接消失。但只要移除vite.config.js中的million相关配置，按钮就能正常显示。

涉及代码 #

vite.config.js

import million from "million/compiler";
import MillionLint from "@million/lint";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
const _plugins = [react()];
_plugins.unshift(
  million.vite({
    auto: true,
  }),
  MillionLint.vite()
);
export default defineConfig({
  plugins: _plugins,
});

Counter.jsx（部分代码）

// ... 前面代码省略

return (
  <section className="counter">
    <p className="counter-info">
      The initial counter value was <strong>{initialCount}</strong>. It{" "}
      <strong>is {initialCountIsPrime ? "a" : "not a"}</strong> prime number.
    </p>
    <p>
      <IconButton icon={MinusIcon} onClick={handleDecrement}>
        Decrement
      </IconButton>
      <CounterOutput value={currentCounter} />
      <IconButton icon={PlusIcon} onClick={handleIncrement}>
        Increment
      </IconButton>
    </p>
    <CounterHistory history={counterChanges} />
  </section>
);
});

export default Counter;

效果对比 #

• 异常状态：
• 预期效果：

可能原因及解决办法 #

1. Million自动优化误处理了IconButton组件 #

Million的auto: true模式会自动检测并优化组件，但可能把IconButton识别为静态组件，或者优化逻辑和组件的动态特性（比如onClick事件）冲突，导致渲染异常。

解决办法：关闭自动优化，手动指定需要优化的组件
修改vite.config.js：

import million from "million/compiler";
import MillionLint from "@million/lint";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    million.vite({
      auto: false, // 关闭自动优化
      // 仅对需要性能优化的组件手动配置
      components: [{ name: "Counter", mode: "memo" }],
    }),
    MillionLint.vite(),
    react(),
  ],
});

2. 插件加载顺序冲突 #

原配置将million插件放在react插件之前，可能干扰了React组件的正常编译流程。

解决办法：调整插件顺序，先加载react插件

import million from "million/compiler";
import MillionLint from "@million/lint";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react(), // 优先加载React插件
    million.vite({ auto: true }),
    MillionLint.vite(),
  ],
});

3. MillionLint规则与组件写法不兼容 #

MillionLint的lint规则可能和当前组件写法冲突，导致编译时错误移除了按钮组件。

解决办法：暂时禁用MillionLint验证问题

import million from "million/compiler";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    million.vite({ auto: true }),
    react(),
    // 注释掉MillionLint，验证是否是它的问题
  ],
});

如果按钮恢复显示，再去MillionLint配置中调整规则，排除IconButton相关检查。

4. 排除特定组件的自动优化 #

如果必须开启auto: true，可以将IconButton排除在优化范围外：

million.vite({
  auto: true,
  exclude: ["IconButton"], // 不让Million优化该组件
})

内容的提问来源于stack exchange，提问作者Aufa