# wanxiang

**Repository Path**: chenjianlong/wanxiang

## Basic Information

- **Project Name**: wanxiang
- **Description**: 万象，一个技术栈无关的微前端方案
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/chenjianlong/wanxiang
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2024-03-10
- **Last Updated**: 2025-10-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 万象

一个与技术栈无关的微前端方案

## 演示地址

<a href="https://chjtx.com/wanxiang/app1" target="_blank">_https:\/\/chjtx.com/wanxiang/app1</a>

## 前言

- 如何理解微前端？独立部署，无感加载，环境隔离？

- 微前端能解决什么问题？不影响老系统前提下开发新业务享受新技术带来的便利？拆分系统分散到各开发小组方便维护？

- 目前主流微前端框架 qiankun 是否满足上述所有诉求？

在尝试过用 vite 搭建 qiankun 项目后，我发现几个问题：

- 1、开发环境下主应用访问不到子应用，即使网上有很多方案，但始终还是做不到 js 沙箱和 css 样式绝对隔离

- 2、微应用切换时依然是加载所有资源，并不会比刷新页面加载的资源少

既然加载的资源不会比刷新页面少，那么我们可不可以直接刷新页面呢？只要首屏资源足够轻量，响应速度足够快，同样可以达到无感切换。我参与过不少用 webpack 搭建的 qiankun 项目，几乎所有项目都是主应用加载菜单，子应用业务内容在右侧主体区域显示的模式。那么换个思路，所以业务应用都优先加载菜单，通过本地缓存记录菜单数据、状态甚至滚动位置，是否就可以达到无感刷新切换应用的效果？而用这种传统的刷新页面方式根本不用考虑 js 、css 被其它应用污染的问题。

## 对比

|方案|乾坤|万象|
|:---:|:---|:---|
|运行方式|拦截子应用代码，经过转换再挂载到主应用|没有主子应用之分，只有简单的加载公共菜单|
|沙箱隔离|支持 js、css 沙隔离，但 js 通过 with 限制作用域，css 通过自动添加前缀，转换过程中有性能损耗|天然隔离，无须各种转换，切换应用直接刷新页面，不存在性能损耗|
|子应用|支持|不支持|
|更新部署|只有主应用更新时，无须更新子应用|公共菜单更新时，需要更新所有应用|
|复杂度|主子应用使用相同技术栈比较容易上手，使用不同技术栈样式隔离比较头疼|为了保障菜单加载速度，达到无感刷新效果，使用纯原生技术开发，对维护菜单的开发者技术要求较高|
|掌控度|遇到bug需要向社区反馈，等待解决方案，自行修改源码难度较高|整体就一个菜单组件的代码量，完全可以自行修改源码|
|成熟度|蚂蚁内部服务了超过 2000+ 线上应用|新鲜出炉，还没遇到什么坑，理论上应该没什么坑|

## 目录结构

```bash
--/
  |-- common/  # 公共组件模块
    |-- wanxiang/
  |-- app1/    # 应用1，独立仓库
    |-- package.json
  |-- app2/    # 应用2，独立仓库
    |-- package.json
  |-- package.json
  |-- .gitignore  # 忽略掉 app1 和 app2
```

如上图目录结构，有3个git仓库，一个公共的，一个 app1，一个 app2

app1 和 app2 都可以通过配置依赖路径别名加载 common 的资源，朴素无华，没有花里胡哨的模块联邦。

多仓库模式能有效解决开发团队的权限问题，同时避免了 git 历史记录洪流。

## 开始

```html
<!-- index.html -->
<head></head>
<body>
  <div id="app"></div>
  <!-- 将 main.js 替换为 entry.js -->
  <script src="entry.js"></script>
</body>
```

```js
// enrty.js
import { start, setMenus } from 'common/wanxiang/index.js'

start(`#app`, () => {
  // 关键点，显示完主体菜单再加载业务代码
  import('./main.js')

  // 加载菜单数据
  fetch('/menu').then(res => res.json()).then(res => {
    setMenus(res.data)
  })
})
```

## 运行本仓库样例

```bash
# 在app1目录下
npm install
npm run dev
```

```bash
# 在app2目录下
npm install
npm run dev
```

## 后语

万象不是框架也不是插件，是一种方案，一种管理大规模前端应用的方案，没有具体的标准，根据各自项目需求对公共菜单进行调整，因此每个项目都会有不同的表象，遂取名为“万象”。

## 支持作者

支持作者分享更多前端技术，不需要打赏一块几毛，也不需要请作者喝咖啡，只需要下载作者和他兄弟开发的游戏就ok


<a href="https://l.taptap.cn/5AOMSrRM?channel=rep-rep_kjv8qtwzaiq" target="_blank">TapTap平台《三国时代3》</a>

<a href="https://tap.cn/s8QlN5Aa?channel=rep-rep_acpfb6g1hqa" target="_blank">TapTap平台《三国时代2》</a>

<a href="https://l.tapdb.net/P6mpaCUn?channel=rep-rep_bz33hlxrcub" target="_blank">TapTap平台《仙湖棋局》</a>