micro-frontends

SPA（单页面应用）的最主要特征是：
整个应用通过一个 HTML 页面加载，页面切换由前端路由实现，动态更新视图而无需重新加载页面。

微前端 的核心思想是让组件或应用可以跨应用引用和集成。多个独立的前端应用（通常由不同团队开发、部署和维护）可以在同一个页面中协同工作

CORS

的加载不会触发CORS</p><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" integrity="sha512-[REDACTED]" crossorigin="anonymous" referrerPolicy="no-referrer"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" integrity="sha512-[REDACTED]" crossorigin="anonymous" referrerPolicy="no-referrer"/><pre id="1691c9cf-9e22-80e3-b949-caf9e94ba86e" class="code code-wrap"><code class="language-JavaScript" style="white-space:pre-wrap;word-break:break-all">// good const img = Object.assign(document.createElement('img'), { src: 'http://127.0.0.1:5051/1.jpg', alt: 'Description' }) container.appendChild(img); // blocked by CORS policy const response = await fetch('http://127.0.0.1:5051/1.jpg');</code></pre></div></details><p id="1691c9cf-9e22-80a5-9dc3-e1c207ce82a5" class=""> </p><p id="1691c9cf-9e22-8022-8dd4-fd11c53f0e85" class=""><br/>在微前端架构中，<br/><strong>模块联邦（Module Federation）</strong> 是一种常用的技术，允许多个独立的子应用共享代码，并将它们集成到一个基座应用中。</p><p id="1c11c9cf-9e22-8069-b8ac-c8c4a3d2e708" class=""><br/><br/><br/></p><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" integrity="sha512-[REDACTED]" crossorigin="anonymous" referrerPolicy="no-referrer"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" integrity="sha512-[REDACTED]" crossorigin="anonymous" referrerPolicy="no-referrer"/><pre id="1c11c9cf-9e22-8084-9bc2-f1968bee3e44" class="code code-wrap"><code class="language-JavaScript" style="white-space:pre-wrap;word-break:break-all">// webpack.config.js const { ModuleFederationPlugin } = require("webpack").container; module.exports = { plugins: [ new ModuleFederationPlugin({ name: "remote", filename: "remoteEntry.js", exposes: { "./HelloWorld": "./src/HelloWorld", }, }), ], };</code></pre><figure id="1691c9cf-9e22-8045-b7a2-fa9b37b8faa2" class="image"><a href="micro-frontends%201691c9cf9e22807db2c1c442c38298c0/image.png"><img style="width:707.9874877929688px" src="micro-frontends%201691c9cf9e22807db2c1c442c38298c0/image.png"/></a></figure></div></article><span class="sans" style="font-size:14px;padding-top:2em"></span></body></html>