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

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

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

一、基本概念

1. HTML Entry

定义

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

<script>
<link>
<style>

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

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

示例（qiankun）

javascript 复制代码

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）

javascript 复制代码

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 包，但运行在浏览器