100-days-of-angular：微前端架构实战与最佳实践

【免费下载链接】100-days-of-angular Series độc quyền cung cấp bởi thành viên của Angular Vietnam về các chủ đề liên quan tới Angular trong vòng 100 ngày. 项目地址: https://gitcode.com/gh_mirrors/10/100-days-of-angular

100-days-of-angular是Angular Vietnam成员提供的独家系列，涵盖100天内与Angular相关的主题，其中微前端架构是现代前端开发的重要实践。本指南将通过100-days-of-angular项目中的实例，带你掌握Angular微前端的核心概念、实现方法和最佳实践，让你轻松构建可扩展的大型前端应用。

什么是微前端？为什么选择它？

微前端是一种将前端应用拆分为多个可独立交付的小型应用的架构风格。随着单页应用（SPAs）变得越来越复杂，传统的前端单体架构面临维护困难、团队协作效率低等问题。微前端借鉴了后端微服务的思想，让不同团队可以独立开发、测试和部署各自的功能模块，极大提升了大型应用的开发效率和可维护性。

图：微前端架构下的邮件客户端应用，展示了App Shell、Mailbox和Calendar三个微应用的组合

微前端的四种实现方案对比

1. Iframe方案

最简单的实现方式，但存在导航限制、性能开销大、通信复杂等问题，适合简单场景的快速集成。

2. 基于Nginx的路由代理

通过不同路径分发到不同前端应用（如<host>/mailbox和<host>/calendar），实现简单但会导致页面刷新，破坏SPA体验。

3. Web Components

利用Angular Elements等技术将应用封装为自定义元素，实现跨框架复用，是框架无关的理想方案。

4. 模块联邦（Module Federation）

Webpack 5引入的高级API，允许不同应用动态共享代码和资源，是Angular微前端的首选方案。

从零开始构建Angular微前端应用

环境准备与项目搭建

首先克隆100-days-of-angular项目代码库：

git clone https://gitcode.com/gh_mirrors/10/100-days-of-angular

我们将创建一个包含1个Shell应用和2个微应用（mailbox和calendar）的项目结构：

# 创建工作空间
npx @angular/cli@14 new ngft-email-client --create-application=false

# 创建Shell应用
npx ng generate application shell --routing --style=scss

# 创建Mailbox微应用
npx ng generate application mailbox --routing --style=scss

# 创建Calendar微应用
npx ng generate application calendar --routing --style=scss

安装自定义Webpack构建器以支持模块联邦：

npm i -D @angular-builders/custom-webpack@14

配置Module Federation实现微前端

Shell应用配置

创建projects/shell/webpack.config.js文件，配置模块联邦插件：

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  output: {
    publicPath: 'auto',
    uniqueName: 'shell',
  },
  optimization: {
    runtimeChunk: false,
  },
  experiments: {
    outputModule: true,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      library: { type: 'module' },
      remotes: {
        mailbox: 'http://localhost:5300/remoteEntry.js',
        calendar: 'http://localhost:5400/remoteEntry.js',
      },
      shared: ['@angular/core', '@angular/common', '@angular/router'],
    }),
  ],
};

配置Shell应用路由，加载远程微应用：

const routes: Routes = [
  {
    path: 'mailbox',
    loadChildren: () => import('mailbox/MailboxModule').then(m => m.MailboxModule)
  },
  {
    path: 'calendar',
    loadChildren: () => import('calendar/CalendarModule').then(m => m.CalendarModule)
  }
];

微应用配置（以mailbox为例）

创建projects/mailbox/webpack.config.js文件：

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  output: {
    publicPath: 'auto',
    uniqueName: 'mailbox',
  },
  optimization: {
    runtimeChunk: false,
  },
  experiments: {
    outputModule: true,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'mailbox',
      filename: 'remoteEntry.js',
      library: { type: 'module' },
      exposes: {
        './MailboxModule': 'projects/mailbox/src/app/mailbox/mailbox.module.ts',
      },
      shared: ['@angular/core', '@angular/common', '@angular/router'],
    }),
  ],
};

运行与测试微前端应用

配置各应用端口后（Shell:5200，Mailbox:5300，Calendar:5400），启动所有应用：

npm run start:shell
npm run start:mailbox
npm run start:calendar

访问http://localhost:5200即可看到由多个微应用组合而成的完整应用。

图：展示微前端应用独立运行和组合运行的效果

微前端最佳实践与注意事项

1. 共享依赖管理

• 使用shared配置共享公共库（如Angular核心模块）
• 设置singleton: true确保依赖单例，避免版本冲突
• 明确指定requiredVersion控制版本兼容性

2. 应用间通信

• 简单场景：使用URL参数或localStorage
• 复杂场景：实现事件总线或状态管理库共享

3. 样式隔离

• 使用CSS-in-JS或Shadow DOM避免样式冲突
• 采用BEM等命名规范确保样式作用域隔离

4. 性能优化

• 实现路由级别的代码分割
• 预加载关键微应用提升用户体验
• 使用Web Workers处理复杂计算

总结与进阶学习

通过100-days-of-angular项目中的Day039教程，我们学习了如何使用Webpack 5 Module Federation构建Angular微前端应用。这种架构模式特别适合大型企业应用，能够显著提升团队协作效率和应用可维护性。

要深入学习微前端，建议参考项目中的Day039-micro-frontends.md文件，其中包含更详细的代码实现和高级技巧。下一步可以探索如何使用Angular Elements创建跨框架组件，进一步增强微前端的灵活性。

微前端架构正在成为大型前端应用的标准解决方案，掌握这一技术将极大提升你的前端架构能力。立即开始实践，体验微前端带来的开发新范式吧！ 🚀

【免费下载链接】100-days-of-angular Series độc quyền cung cấp bởi thành viên của Angular Vietnam về các chủ đề liên quan tới Angular trong vòng 100 ngày. 项目地址: https://gitcode.com/gh_mirrors/10/100-days-of-angular