acongm

摘要（Auto）

  • 生成时间：2025-12-20
  • 简历中出现的项目标题（提取）：大疆用户中心重构 / 大疆售后 RMS 系统重构 / 跨平台公告插件系统 / 大疆 DevOps 平台维护 / XDR 系统 - 魔方大屏 + 报表
  • 面试大纲关键词（提取 Top10）：1）大疆用户中心重构：性能优化 + HTTP 原理 + Webpack 架构 / 性能指标与方法论 / 简历可落地点（结合你的“优化四板斧”） / HTTP 常考点（从“为什么变快”倒推） / Webpack 架构（工程化面试常考） / 按优化顺序，把方案“串起来”（排查 → 定位 → 选择 → 验证） / 0. 排查与基线（先把问题“量化”） / 1. 先保“可见”——骨架屏预渲染（直接拉低 LCP） / 2. 再减“阻塞”——关键渲染路径（CRP）梳理：CSS/字体/首图优先级 / 3. 再降“下载与解析成本”——更小的包体与更少的无效代码

建议追问（Auto）

  • 你为什么在该项目/场景里选择这个方案？替代方案为何不选？
  • 最大一次事故/踩坑是什么？如何定位与回滚？
  • 如果重做：架构/边界/工程化会怎么调整？

关联卡片

在我项目中的角色与使用场景

核心开发者。面向多团队、多模块交付场景，通过微前端实现独立部署与统一治理，并通过 CI/CD 提升发布效率。

原理简述

核心目标：在组织层面需要“多团队自治发布”的前提下，做到独立部署同时又能统一治理（登录/权限/埋点/错误/性能）。

  • 微前端的主链路：
    • 主应用壳：负责路由、权限、菜单、全局样式基座、埋点/错误上报与子应用加载策略。
    • 子应用：只关心自己的业务域，遵循接入协议暴露生命周期。
  • 隔离策略：
    • JS：开启 sandbox，约束对子应用的全局写入；卸载回滚副作用。
    • CSS：前缀化或实验性样式隔离，减少互相污染。
    • 依赖：共享关键依赖要有“版本约束 + 单例策略”，否则会出现多份运行时冲突。
  • 通信策略：
    • props 注入（同步能力）+ 事件总线（异步广播）+ 共享存储（跨应用状态）。
    • 约束：协议化（schema），避免子应用直接引用主应用内部模块。
  • 性能策略：
    • 只加载当前路由需要的子应用；对高频子应用做预取；
    • 建立子应用维度的包体预算与 RUM 监控，避免“微前端把性能问题放大”。

对比表格

方案优点代价适用场景
qiankun上手快、治理能力较全runtime 复杂度多团队自治、渐进迁移
single-spa更底层、更灵活需要更多自建治理平台团队强、想深度定制
Module Federation共享依赖强、性能潜力大治理与契约复杂同栈、版本控制强
iframe强隔离通信成本高、体验一般安全/隔离优先

模拟问答

  • [ ] 为什么选 qiankun？哪些约束让它更合适？
  • [ ] 子应用资源如何加载与调度？沙箱怎么做？有哪些坑？
  • [ ] CI/CD 如何做门禁与回滚？如何保证可追溯（commit→ 构建 → 镜像 → 发布）？
  • [ ]（大纲维度）CI/CD 基础链路怎么讲？一条流水线从触发到发布都发生了什么？
    • 可复述要点：
      • 触发：push/PR/tag/定时，按分支策略映射环境（dev/staging/prod）。
      • 阶段：build → test → scan（SAST/依赖漏洞）→ package（artifact/镜像）→ deploy。
      • 产物：产物仓库/镜像仓库统一管理，带版本号与 buildMeta。
  • [ ]（大纲维度）你怎么做到“可追溯”？如何从线上版本定位到某次提交？
    • 可复述要点：
      • buildMeta：commit hash + build id 写入产物（页面注释/环境变量/接口 header）。
      • 发布记录：发布单关联 commit/tag、镜像 digest、环境、审批人。
      • 一键回滚：回滚到上一个稳定镜像/版本，并保留审计记录。
  • [ ]（大纲维度）Docker 镜像分层与缓存你怎么优化？pnpm/yarn cache 怎么做？
    • 可复述要点：
      • 分层：先复制 lockfile 再安装依赖，最大化缓存命中；业务代码放后面。
      • 缓存：开启依赖缓存（pnpm store/yarn cache），CI 内复用；必要时用远端缓存。
  • [ ]（大纲维度）发布策略你怎么选（蓝绿/金丝雀/滚动）？健康检查与回滚怎么设计？
    • 可复述要点：
      • 金丝雀：小流量验证，指标异常自动停止扩量并回滚。
      • 健康检查：readiness/liveness + 关键接口探活；失败自动回滚。
      • 回滚：镜像级回滚最快，配置与数据迁移要可逆/向后兼容。

补充可复述要点：

  • 选型口径：组织需要自治发布 + 多栈并存 + 存量迁移 → qiankun 综合成本最低。
  • 沙箱坑：
    • 子应用写全局变量/修改原型链 → 必须白名单与回滚；
    • 样式污染 → 前缀/隔离策略 + 规范；
    • 多份 React/Vue → 必须单例与版本约束。
  • CI/CD 可追溯：
    • 构建产物带 buildMeta（commit hash/build id）；
    • 发布记录关联工单/变更，支持一键回滚到上一个稳定版本。
    • 门禁：lint/typecheck/unit test/scan（按项目选择），确保“坏代码进不来”。

补充可复述要点：

  • 选型口径：组织需要自治发布 + 多栈并存 + 存量迁移 → qiankun 综合成本最低。
  • 沙箱坑：
    • 子应用写全局变量/修改原型链 → 必须白名单与回滚；
    • 样式污染 → 前缀/隔离策略 + 规范；
    • 多份 React/Vue → 必须单例与版本约束。
  • CI/CD 可追溯：
    • 构建产物带 buildMeta（commit hash/build id）；
    • 发布记录关联工单/变更，支持一键回滚到上一个稳定版本。

<<<<<<< Current (Your changes)

再补一组“流水线 + 发布策略”追问（对应面试大纲第 5 部分）：

  • [ ] Q4：你们的 CI/CD 基础链路怎么设计（build → test → scan → package → deploy）？
    • 触发：push/PR/tag/定时，按分支映射环境（dev/staging/prod）。
    • 阶段：
      • build：产物构建 + 生成 buildMeta（commit/buildId）
      • test：单测/关键用例（按项目可选覆盖率阈值）
      • scan：SAST/依赖漏洞扫描（按风险等级阻断）
      • package：Docker 镜像构建与推送（带版本号）
      • deploy：蓝绿/金丝雀/滚动发布 + 健康检查 + 自动回滚
    • 关键口径：每一步都能追溯（谁触发、用的什么 commit、产物是什么、部署到哪）。
  • [ ] Q5：Docker 镜像分层缓存你怎么用来提速？常见踩坑是什么？
    • 原理：镜像分层（layer）可复用，依赖安装层稳定就能命中缓存。
    • 提速手段：
      • 把 package.json/lockfile 先复制并安装依赖，再复制业务代码（避免代码变动导致依赖层失效）
      • 使用 pnpm/yarn 的 cache（CI 持久化缓存）减少重复下载
    • 坑：把变动频繁的文件放在依赖层之前、或 lockfile 不稳定，会让缓存命中率骤降。
  • [ ] Q6：蓝绿 / 金丝雀 / 滚动发布分别适合什么场景？你怎么设计回滚？
    • 蓝绿：两套环境切流，回滚快，资源成本高。
    • 金丝雀：小流量灰度观测（错误率/性能），风险低，发布流程复杂度更高。
    • 滚动：逐批替换实例，资源成本低，但回滚要更谨慎（需要健康检查与分批回退）。
    • 回滚口径：基于版本号与 buildMeta 一键回退到上一个稳定镜像；配合变更审计记录。
  • [ ] Q7：配置/密钥怎么治理？怎么避免“配置泄露/错配导致事故”？
    • 配置分层：代码配置 vs 环境配置（env/secret）严格分离。
    • 权限最小化：密钥按环境/按服务分发，审批流 + 审计。
    • 兜底：发布前校验（必填变量/格式）、灰度观察期、出错自动熔断回滚。

Incoming (Background Agent changes)

手写代码区

通信协议最小实现（主 → 子）：

type Event = { type: string; payload?: any }
type Handler = (e: Event) => void

export function createBus() {
  const handlers = new Set<Handler>()
  return {
    on(h: Handler) {
      handlers.add(h)
      return () => handlers.delete(h)
    },
    emit(e: Event) {
      handlers.forEach((h) => h(e))
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

我的补充（Manual）

（不会被脚本覆盖）

复盘与反思（Learnings）

  • 如果重做会怎么改？

面试官追问（面试官视角）

  • [ ] 为什么选这个方案？替代方案为什么不选？
  • [!] 最大一次事故/踩坑是什么？如何定位与回滚？
  • [ ] 如果重做会怎么改？
  • [ ] 你如何设计分支策略与环境映射？PR 合并后如何自动发布到 staging？
  • [ ] 你如何处理“配置/密钥管理”？env/secret 怎么做到最小权限与可审计？
  • [ ] 回滚时遇到数据库/接口变更不兼容怎么办？你如何设计向后兼容与灰度窗口？
上次更新:
(adsbygoogle = window.adsbygoogle || []).push({});