WuJie原理声明文件12345678910111213141516171819202122232425262728293031323334353637383940414243444546import type { plugin } from 'wujie'type lifecycle = (appWindow: Window) => any;interface Props { /** 唯一性用户必须保证 */ name: string; /** 需要渲染的url */ url: string; /** 需要渲染的html, 如果用户已有则无需从url请求 */ html?: string; /** 渲染的容器 */ loading?: HTMLElement; /** 路由同步开关， false刷新无效，但是前进后退依然有效 */ sync?: boolean; /** 子应用短路径替换，路由同步时生效 */ prefix?: { [key: st ...
在微前端架构下，不同的子应用（微应用）运行在同一个主应用的环境下，共享同一个 window 对象、全局事件、全局变量。为了避免相互污染，三大微前端框架（qiankun、Wujie、micro-app）都引入了 JS 隔离机制
Qiankun 的 JS 隔离机制基于 Proxy 沙箱 和 Snapshot 沙箱。
1.1 Proxy 沙箱
Qiankun 的沙箱主要基于 ES6 的 Proxy 实现，通过代理 window 对象来隔离子应用的全局状态
在 Proxy 沙箱中，子应用内部对 window 的读写并不会影响到主应用
实现原理：a. 当子应用加载时，会创建一个代理对象 proxy：
123456789const sandbox = new Proxy(window, { get(target, prop) { return prop in target ? target[prop] : undefined; }, set(target, prop, value) { target[prop] = value; ...
可以使用 pnpm 的 monorepo 架构来共享公共组件、方法和第三方依赖，且效果非常好！相比传统的 npm 和 yarn，pnpm 在 monorepo 场景下提供了更好的包管理性能和依赖去重，特别适合微前端架构。
📌 方案概述pnpm monorepo 主要依赖 workspace 机制，把多个子应用和公共包统一管理在一个单一的仓库中。主应用和子应用可以直接共享公共组件库、工具方法、第三方包，避免重复安装和版本冲突。
📌 如何实现？🔹 1. 创建 pnpm monorepo 项目12mkdir microfrontend-monorepo && cd microfrontend-monorepopnpm init
在 package.json 里启用 workspaces：
12345{ "name": "microfrontend-monorepo", "private": true, "workspaces": ["packages/*" ...
在 macOS 上创建符号链接（symlink）window是 mklink
符号链接（软链接） 可以通过 ln -s 命令创建。
硬链接 则通过 ln 命令创建。
创建符号链接（软链接）语法：
1ln -s <目标文件/目录> <链接路径>
示例：
1ln -s /path/to/target /path/to/link
这个命令会在 <链接路径> 创建一个符号链接，指向 <目标文件/目录>。
例子：
1ln -s /Users/youruser/Documents/source.txt /Users/youruser/Desktop/link_to_source.txt
这会在桌面创建一个名为 link_to_source.txt 的符号链接，指向 Documents 目录中的 source.txt。
创建硬链接语法：
1ln <目标文件> <链接路径>
示例：
1ln /path/to/target /path/to/link
例子：
1ln /Users/youruser/Documents/ ...
生命周期qiankun生命周期微应用的生命周期boostrap、mount、unmount，在注册微应用只需要导出上面三个方法即可，分别对应微应用的注册、挂载、卸载
基本使用vue2使用示例
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566// main.jsimport './public-path';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import Vue from 'vue';import VueRouter from 'vue-router';import App from './App.vue';import routes from &# ...
在微前端架构中，样式隔离是一个非常重要的问题，否则不同子应用的 CSS 会互相污染，导致样式错乱。我们来看看 qiankun、Wujie 和 micro-app 是如何实现样式隔离的。
qiankun 的样式隔离qiankun 是基于 single-spa 和 JS 沙箱实现的微前端框架，它提供了两种主要的样式隔离机制：
1.1 动态样式隔离qiankun 会在子应用加载的时候，动态解析所有 <style> 标签和 <link> 标签。使用 ScopedCSS 的模式来给所有的 CSS 选择器加上前缀，保证只作用在当前子应用的 DOM 节点下。
例如：
123456789/* 原始的样式 */.app-title { color: red;}/* 经过 ScopedCSS 处理后的样式 */[data-qiankun="sub-app-1"] .app-title { color: red;}
1.2 Shadow DOM 模式（可选）qiankun 允许使用 experimentalStyleI ...
微前端实现方式微前端并没有唯一标准实现方式，主流的实践方案包括以下几类：
1. iframe 实现（早期做法）每个子应用运行在 iframe 中，实现物理隔离。
优点：强隔离，互不干扰缺点：性能差、通信复杂、用户体验差（刷新、跳转不连贯）
2. 路由分发 + 构建分离主应用管理路由，访问某路由时动态加载对应子应用资源（JS/CSS）。子应用可独立打包部署，使用如 SystemJS 动态导入。代表方案：single-spa、qiankun、Wujie、micro-app
3. Web Component 方案利用原生 Web Component（如自定义元素、Shadow DOM）封装每个子应用。适用于需要框架无关、隔离样式的场景。缺点：浏览器兼容性较旧（IE 不支持），且生态较小。
4. 主流微前端框架
框架
特点
single-spa
最早的微前端框架，基于路由分发和生命周期管理
qiankun
阿里出品，基于 single-spa 二次封装，支持沙箱、预加载、JS 隔离等特性
Wujie
字节跳动开源，性能更好、体积更小，iframe 与 JS 沙箱混合 ...
iframe 方案特点
接入比较简单
隔离非常完美
不足
DOM割裂感严重，弹框只能在iframe内，且有滚动条
通讯非常麻烦，而且刷新iframe url状态丢失
前进后退按钮无效
qiankun 方案qiankun 是基于 single-spa 的微前端方案。
特点
html entry 的方式引入子应用，相比 js entry 极大的降低了应用改造的成本
完备的沙箱方案：
js 沙箱：SnapshotSandbox、LegacySandbox、ProxySandbox 三套渐进增强方案
css 沙箱：strictStyleIsolation、experimentalStyleIsolation 两套方案
静态资源预加载能力
不足
适配成本较高，工程化、生命周期、静态资源路径、路由等都要做适配
css 沙箱采用严格隔离会有各种问题
js 沙箱在某些场景下执行性能下降严重
无法同时激活多个子应用，也不支持子应用保活
无法支持 vite 等 esmodule 脚本运行
底层原理
底层原理 js沙箱使用的是proxy进行快照然后用用 with(window){} 包裹起来 w ...
很多人觉得他不是微前端，也有人定义它也是微前端 可以理解他是一个去中心化技术，它可以让多个独立构建的应用之间，动态的调用彼此的模块。这种运行机制，可以让我们轻松的拆分应用，真正做到跨应用的模块共享。
emp 框架：https://emp2.netlify.app/
核心原理Module Federation（模块联邦）是 Webpack 5 的革命性特性，允许多个独立的构建可以在运行时共享代码。
12345678910111213传统方式：┌─────────┐ ┌─────────┐ ┌─────────┐│ App A │ │ App B │ │ App C ││ Vue 3MB │ │ Vue 3MB │ │ Vue 3MB │ ← 重复打包└─────────┘ └─────────┘ └─────────┘Module Federation：┌─────────┐ ┌─────────┐ ┌─────────┐│ App A │ │ App B │ │ App C ││ expose │←─│ consume │←─ ...
性能优化
未读前端如何把SEO做到极致SEO 是 Search Engine Optimization 的缩写，即搜索引擎优化。它是一种通过调整网站的内容、结构、外部链接等方面的优化手段，来提高网站在搜索引擎中的自然排名，以求得获得更多的流量，从而达到互联网营销及品牌建设的目标。
优化手段1. TDKTDK 是 Title(标题)、Description（描述）和 Keywords（关键词）的缩写，TDK 是一个网站 SEO 的核心。
因为滥用等原因，目前各大主流搜索引擎基本都已经降低甚至移除了 keywords 对排名的影响，TDK 的设置如下：
123<title>标题</title><meta name="description" content="描述"><meta name="keywords" content="关键词">
当然这三者的内容是有一定要求的，比如字符数长度的限制，想详细了解的小伙伴可以自行查阅，下面看下掘金网站的 TDK：
2. Meta标签的使 ...
