微前端实现方式：HTML Entry 与 JS Entry 的区别

在微前端架构中，HTML Entry 和 JS Entry 是两种非常核心的子应用接入与加载方式。二者解决的是同一个问题：主应用如何加载、解析并运行子应用，但在设计理念、工程约束以及适用场景上存在明显差异。

本文将从工程实践角度，对两种方式进行系统对比。

---

一、基本概念

1. HTML Entry

定义
主应用通过一个子应用的 HTML 入口地址（通常是 index.html），拉取整份 HTML 文档，并由微前端框架解析其中的：

• <script>
• <link>
• <style>

然后在沙箱环境中执行脚本。

典型框架：qiankun、micro-app、Wujie

示例（qiankun）

registerMicroApps([
  {
    name: 'sub-app',
    entry: '//localhost:8081',
    container: '#subapp-container',
    activeRule: '/sub'
  }
])

此处的 entry 指向的是一个 HTML 页面地址。

---

2. JS Entry

定义
主应用直接加载一个 JavaScript 模块，该模块显式暴露微前端生命周期函数：

• bootstrap
• mount
• unmount

主应用并不解析 HTML，DOM 的创建与销毁完全由子应用在生命周期中自行完成。

典型框架：single-spa（原生模式）

示例（single-spa）

registerApplication({
  name: 'sub-app',
  app: () => import('subAppEntry.js'),
  activeWhen: ['/sub']
});

---

二、核心区别对比

1. 接入成本

维度	HTML Entry	JS Entry
老项目改造	极低	较高
是否需要改构建产物	否	是
对子应用侵入性	几乎无	明显

结论：

• HTML Entry 非常适合 已有 SPA 项目直接接入
• JS Entry 更适合 从一开始就按微前端设计的新项目

---

2. 资源加载方式

HTML Entry

• 主应用拉取 index.html
• 解析并加载：
  • CSS
  • JS
  • 图片等静态资源
• 微前端框架负责：
  • 样式隔离
  • JS 沙箱
  • 资源路径修正

JS Entry

• 主应用仅加载一个 JS 文件
• 子应用自行完成：
  • DOM 创建
  • 样式引入
  • 资源管理

本质区别：

HTML Entry 是「声明式加载」，JS Entry 是「命令式加载」。

---

3. 生命周期与控制权

维度	HTML Entry	JS Entry
生命周期管理	框架自动托管	子应用显式实现
DOM 挂载点	框架注入 container	子应用自行处理
控制权归属	主应用更强	子应用更强

HTML Entry 中，开发者几乎感知不到生命周期细节；
JS Entry 中，生命周期是微前端的核心设计点。

---

4. 隔离能力

HTML Entry

• 样式隔离（Shadow DOM / scoped CSS）
• JS 沙箱（Proxy / Snapshot）
• 自动处理全局变量污染

JS Entry

• 默认不提供隔离能力
• 需要自行处理：
  • 全局变量
  • 样式命名空间
  • 副作用清理

工程结论：

HTML Entry 更安全，JS Entry 更自由。

---

5. 构建与部署复杂度

维度	HTML Entry	JS Entry
子应用是否可独立运行	是	通常否
构建目标	普通 SPA	微前端模块
CI/CD 复杂度	低	较高

HTML Entry 子应用既可独立部署，也可被主应用加载；
JS Entry 更像一个运行在浏览器中的插件模块。

---

三、常见框架与 Entry 类型

框架	Entry 类型
qiankun	HTML Entry
micro-app	HTML Entry
Wujie	HTML Entry
single-spa	JS Entry
自研微前端	多为 JS Entry

---

四、如何选择？

1. 适合 HTML Entry 的场景

• 存在多个历史 SPA 项目（Vue / React / Angular）
• 希望最小化改造成本
• 业务团队多、规范不统一
• 更关注稳定性与隔离性

这是当前国内企业级项目的主流选择。

---

2. 适合 JS Entry 的场景

• 全新系统，从 0 设计微前端架构
• 对性能和控制权要求极高
• 子应用本身是“能力模块”而非页面
• 团队对微前端底层原理有深入理解

---

五、总结

HTML Entry：像 iframe，但更智能
JS Entry：像 npm 包，但运行在浏览器

• 学习 qiankun / micro-app / Wujie，应重点掌握 HTML Entry
• 深入微前端原理或使用 single-spa，应重点理解 JS Entry