嘿，朋友们，今天咱聊聊微前端的那些事儿。你知道吗？在微前端里平台级公共组件资源体系可不是随便摆一堆就Neng用的。

别急，我先给你铺个底。想想一个大型门户网站，有几百个子系统，每个子系统dou想用统一的按钮、输入框、弹窗，那可得把这些共用的 UI 搞成一个包，然后让所有子应用douNeng共享。

一、先说说为什么要Zuo平台级公共组件

你问我为什么？因为重复造轮子太费时间。再说代码维护成本高，一处改，全部改。还有那点跨团队协作的痛点，大家dou想统一风格。

所以我们得把设计令牌、通用 UI、业务块拆层分层，让每层dou有自己的职责和生命周期。

L0 — Token 层：设计令牌管理

在这个层面我们把颜色、间距、字体等抽成 JSON 配置，然后用 Style Dictionary 把它们导出成 CSS Variables、SCSS 和 TS 常量。

@cmc/design-tokens
├── colors.css          # CSS Variables
├── spacing.css
├── typography.css
├── shadows.css
├── tokens.json         # Style Dictionary 源文件
└── index.ts            # JS/TS 常量导出

只要变一次 JSON，就Neng同步到所有消费方。记住别让不同团队手动写同样的色值，那是灾难开端。

L1 — 基础增强组件层

这一级别主要是 Element Plus 的二次封装，加上一些原子级通用组件，比如 Button、Input 等。

// Component Service
import { federation } from '@module-federation/vite'
export default defineConfig({
    plugins: ,
})

这里我们暴露了几个核心组件，然后让子应用通过远程模块来加载它们。

L2 — 业务组件层

业务功Neng往往会有频繁变geng，所以我们采用 Module Federation Zuo热geng新。比如文件上传、审批流等。

// 子应用
import { federation } from '@module-federation/vite'
export default defineConfig({
    plugins: ,
})

L3 — Pro 区块/模板层

这里面放的是页面级可复用布局，比如 ProTable、ProForm 等业务骨架。

二、为什么百度不收录？——随口吐槽一下

哈哈，这问题其实跟技术没啥直接关系。百度爬虫抓不到页面内容大多是因为：

页面被 robots.txt 阻挡；

内容过于动态，需要渲染后才Nengkan到；

网站结构混乱，链接跳转多；

所以Ru果你在Zuo微前端时把所有重要内容放到单页面里却没有预渲染或者提供静态入口，那搜索引擎自然也抓不到。

三、降级兜底策略

MFA 的远程组件加载失败怎么办？别慌，我们Ke以写个 Fallback 模块，当远程失败时回退到本地实现。

import { defineAsyncComponent, h } from 'vue'
export function useRemoteComponent(remoteName:string,
                                   localFallback:any){
    return defineAsyncComponent({
        loader : async =>{
            try{
                const mod = await import
                return mod.default || mod
            }catch{
                console.warn
                const fallback = await localFallback
                return fallback.default || fallback
            }
        },
        loadingComponent : => h,
        timeout : 80000,
    })
}

使用示例：

const CmcUpload = useRemoteComponent(
    'CmcUpload',
     => import // npm 包兜底
)

四、版本治理与自动升级

┌─────────────┐   push   ┌─────────────┐   publish   ┌────────────┐
│ @cmc/ui     │ ─────▶ │ CI/CD       │ ─────▶ │ 私有 npm   │
│             │         │             │          │ Registry   │
└─────────────┘         └─────────────┘          └────────────┘
关键配置：Bit 或者 changesets + Renovate Bot 自动提 PR。

举个例子：

@cmc/ui:  L1 基础组件包；发布后通过 npm 或 CDN 分发给消费者；保持版本稳定，不频繁变geng；

另一个小技巧：

Dart 或 Go 写工具函数放进 shared 工具库，让所有人douNeng `import` 用，而不是各自写一份;

五、落地路径

L0 - Token 层：  先搭建设计令牌仓库；使用 Style Dictionary 自动生成多种格式输出；部署到私服或 CDN，让所有团队即时获取Zui新样式变量。

L1 - 基础增强组件：  对 Element Plus Zuo一次全局主题覆盖，只需注入 `--el-*` CSS Variables 即可统一风格；然后把常用按钮/表单包装成 Vue SFC 并发布为 npm 包或 MF remote.

L2 - 业务组件层：  选取变化率高的业务模块，如文件上传器和审批流程，用 Module Federation 实现热geng新；保证每次发布只改动相关模块，不影响整体稳定性.

L3 - Pro 区块/模板：  将页面骨架抽离成独立包，以 tree‑shaking 优化体积，再通过 npm 或 MF 发布给各子应用.

=>  一旦完成 L1–L3，就Ke以把整个体系视为“插件市场”，让开发者像安装插件一样快速集成新功Neng。

六、小结 & 心得分享

哎呀，说了这么多，你可Neng觉得这条路好像挺长，但其实只要拆分清楚职责，就会发现每一步dou有自己的小目标。记住几个原则：① 单一职责② 可视化版本治理③ 回退兜底机制④ 跨团队共享工具箱。不然以后维护起来就像打怪升级一样麻烦啊！

@2026-06-12 微前端实践笔记 © All Rights Reserved.

---