企业官网建设流程全解析

在微前端架构中，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 非常适合已有 SPA 项目直接接入
• JS Entry 更适合从一开始就按微前端设计的新项目

2. 资源加载方式

HTML Entry

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

JS Entry

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

本质区别：

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

3. 生命周期与控制权

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 更像一个运行在浏览器中的插件模块。

三、常见框架与 Entry 类型

四、如何选择？

1. 适合 HTML Entry 的场景

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

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

2. 适合 JS Entry 的场景

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

五、总结

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