跨平台公告插件系统（2023.02-2023.03）- 面试技术大纲

技术架构：Rollup Tree Shaking + Preact 信号机制（简历）
侧重点：构建工具对比、极致包体积、热插拔架构、多模式植入（CDN/Iframe/Web Component）

---

Rollup / Webpack / Vite 横向对比 + Preact 选型

构建工具横向（以“插件库”视角）

• Rollup：库友好（ESM/CJS/UMD 输出）、tree-shaking 强、产物干净（简历：包体积 < 15KB）
• Webpack：应用友好（复杂依赖、生态成熟、运行时/分包能力强）
• Vite：开发快（ESM dev server），打包多基于 Rollup；库模式/应用模式如何选与配置差异
• 对比维度：产物格式、tree-shaking、code-splitting、polyfill 策略、体积与构建时间、调试体验

Preact 选型（极简内核 + signals）

• 与 React 对比：体积、兼容层（preact/compat）、生态差异与风险
• signals 心智模型：更新粒度与性能收益、与 hooks 的协同方式、可维护性权衡
• 典型追问：为什么不是纯原生？为什么不是 Web Components-only？什么时候一定要 React？

---

热插拔 + 多路复用（跨系统标准化接入）

热插拔（加载/卸载/升级可控）

• 生命周期设计：init → mount → update → unmount（资源回收：事件/定时器/DOM/订阅）
• 隔离策略：
  • CSS：shadow DOM / 命名空间 / 样式前缀
  • JS：iframe / sandbox / 全局污染治理
• 灰度与回滚：版本号、远端开关、异常兜底（fallback UI/禁用/熔断）、可观测性（监控/告警）
• 植入模式取舍：CDN / Iframe / Web Component（隔离性、通信成本、性能、接入复杂度）

多路复用（一次构建/一次运行服务多个系统）

• 复用层级：
  • 构建产物复用：同一包多系统使用（版本治理、兼容性）
  • 运行时复用：共享 runtime、避免重复初始化
  • 配置复用：策略中心（公告内容/规则/权限）统一下发
• 资源缓存与去重：脚本缓存/预加载、单例加载器（避免重复注入）、依赖去重与冲突处理
• 通信复用：统一协议（postMessage/event bus），多宿主路由/鉴权/埋点如何对齐
• 典型追问：多系统不同 React/Vue 版本怎么接？冲突怎么隔离？如何做到接入 < 0.5 人日？