微前端实现方式：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 模块，该模块显式暴露微前端生命周期函数：
bootstrapmountunmount
主应用并不解析 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 包，但运行在浏览器