Harbor前端架构解析：Angular应用的构建与扩展-优快云博客

Harbor前端架构解析：Angular应用的构建与扩展

【免费下载链接】harbor Harbor 是一个开源的容器镜像仓库，用于存储和管理 Docker 镜像和其他容器镜像。 * 容器镜像仓库、存储和管理 Docker 镜像和其他容器镜像 * 有什么特点：支持多种镜像格式、易于使用、安全性和访问控制项目地址: https://gitcode.com/GitHub_Trending/ha/harbor

引言

你是否在构建企业级容器镜像仓库时，面临前端架构复杂、性能优化困难、多团队协作效率低下等问题？本文将深入解析Harbor前端架构，从技术选型、项目结构到性能优化，为你提供一套完整的Angular应用构建与扩展方案。读完本文，你将能够：

理解Harbor前端架构的设计理念与技术选型
掌握Angular应用的模块化设计与懒加载实现
学会如何优化大型Angular应用的性能
了解Harbor前端的国际化、主题定制等高级特性
掌握Harbor前端的测试策略与扩展方式

1. Harbor前端技术栈概览

Harbor作为一个开源的容器镜像仓库，其前端采用了现代化的技术栈，以满足企业级应用的需求。主要技术选型如下：

1.1 核心框架与库

技术	版本	用途
Angular	最新稳定版	前端框架，提供组件化、依赖注入等核心功能
Angular CLI	对应Angular版本	项目构建与管理工具
Clarity Design System	最新稳定版	UI组件库，提供一致的设计语言
ngx-translate	最新稳定版	国际化解决方案
RxJS	对应Angular版本	响应式编程库，处理异步数据流

1.2 构建工具链

Harbor前端采用了完整的现代前端构建工具链，确保开发效率与应用性能：

TypeScript：提供类型安全，增强代码可维护性
Webpack：模块打包器，处理资源优化与代码分割
Karma + Jasmine：单元测试框架
Cypress：端到端测试工具

2. 项目结构与模块化设计

Harbor前端项目采用了清晰的模块化结构，遵循Angular最佳实践，确保代码的可维护性与可扩展性。

2.1 项目目录结构

src/portal/
├── src/
│   ├── app/
│   │   ├── account/          # 账户相关功能模块
│   │   ├── base/             # 基础功能模块
│   │   ├── shared/           # 共享组件与服务
│   │   ├── app.component.ts  # 根组件
│   │   ├── app.module.ts     # 根模块
│   │   └── harbor-routing.module.ts  # 主路由模块
│   ├── assets/               # 静态资源
│   ├── environments/         # 环境配置
│   ├── i18n/                 # 国际化资源
│   └── styles/               # 全局样式
├── angular.json              # Angular CLI配置
├── package.json              # 项目依赖
└── tsconfig.json             # TypeScript配置

2.2 核心模块设计

Harbor前端采用了模块化设计，主要核心模块如下：

mermaid

AppModule作为根模块，负责全局配置与依赖注入。HarborRoutingModule处理路由配置，实现了模块的懒加载。BaseModule包含了Harbor的主要业务功能，如项目管理、镜像管理等。AccountModule则负责用户账户相关功能。

3. 构建配置分析

Harbor前端使用Angular CLI进行构建，通过angular.json文件进行配置。下面我们来详细分析关键的构建配置。

3.1 构建选项

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "allowedCommonJsDependencies": [
      "cron-validator",
      "js-yaml",
      "highcharts"
    ],
    "outputPath": "dist",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "zone.js",
    "tsConfig": "tsconfig.app.json",
    "assets": [
      "src/images",
      "src/favicon.ico",
      "src/setting.json",
      "src/i18n"
    ],
    "styles": [
      "node_modules/@clr/icons/clr-icons.min.css",
      "node_modules/@clr/ui/clr-ui.min.css",
      "node_modules/prismjs/themes/prism-solarizedlight.css",
      "src/global.scss",
      {
        "input": "src/css/dark-theme.scss",
        "bundleName": "dark-theme",
        "inject": false
      },
      {
        "input": "src/css/light-theme.scss",
        "bundleName": "light-theme",
        "inject": false
      }
    ],
    "scripts": [
      "node_modules/@clr/icons/clr-icons.min.js",
      "node_modules/marked/marked.min.js",
      "node_modules/prismjs/prism.js",
      "node_modules/prismjs/components/prism-yaml.min.js"
    ]
  }
}

关键配置说明：

allowedCommonJsDependencies: 允许引入CommonJS模块，解决第三方库兼容性问题
assets: 配置需要复制到输出目录的静态资源
styles: 全局样式配置，包含了Clarity UI和自定义主题
scripts: 引入全局JavaScript文件

3.2 生产环境配置

"configurations": {
  "production": {
    "optimization": {
      "styles": {
        "inlineCritical": false
      }
    },
    "outputHashing": "all",
    "sourceMap": false,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

生产环境配置启用了多项优化措施：

AOT编译: 提高性能并减小 bundle 大小
代码优化: 启用buildOptimizer，进一步优化代码
输出哈希: 为文件名添加哈希，便于缓存管理
环境替换: 使用生产环境配置文件

3.3 开发服务器配置

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "harbor-portal:build",
    "proxyConfig": "proxy.config.mjs"
  },
  "configurations": {
    "production": {
      "browserTarget": "harbor-portal:build:production"
    }
  }
}

开发服务器配置了代理，通过proxy.config.mjs文件将API请求代理到后端服务，解决了开发环境下的跨域问题。

4. 路由设计与懒加载实现

Harbor前端采用了路由懒加载策略，优化了应用的初始加载性能。下面我们来详细分析其路由设计。

4.1 路由配置

const harborRoutes: Routes = [
  { path: '', redirectTo: 'harbor', pathMatch: 'full' },
  {
    path: 'account',
    loadChildren: () =>
      import('./account/account.module').then(m => m.AccountModule),
  },
  {
    path: 'oidc-onboard',
    canActivate: [OidcGuard, SignInGuard],
    loadChildren: () =>
      import('./oidc-onboard/oidc-onboard.module').then(
        m => m.OidcOnboardModule
      ),
  },
  {
    path: 'harbor',
    canActivateChild: [AuthCheckGuard],
    loadChildren: () =>
      import('./base/base.module').then(m => m.BaseModule),
  },
  {
    path: '**',
    loadChildren: () =>
      import('./not-found/not-found.module').then(m => m.NotFoundModule),
  },
];

4.2 路由守卫

Harbor前端实现了多种路由守卫，确保应用的安全性与可用性：

AuthCheckGuard: 验证用户是否已登录，保护需要认证的路由
SignInGuard: 处理登录相关逻辑
OidcGuard: 处理OIDC认证流程

4.3 路由复用策略

为了提高用户体验，Harbor实现了自定义的路由复用策略：

{ provide: RouteReuseStrategy, useClass: HarborRouteReuseStrategy }

HarborRouteReuseStrategy允许组件在路由切换时被缓存，避免重复创建和销毁，提升了应用性能，特别是在频繁切换标签页时效果显著。

5. 核心服务与依赖注入

Angular的依赖注入系统是其核心特性之一，Harbor前端充分利用了这一特性，构建了清晰的服务层次结构。

5.1 应用初始化

function initConfig(
  configService: AppConfigService,
  skinableService: SkinableConfig
) {
  return () => {
    skinableService.getCustomFile().subscribe();
    configService.load().subscribe();
  };
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initConfig,
      deps: [AppConfigService, SkinableConfig],
      multi: true,
    },
  ]
})

通过APP_INITIALIZER令牌，Harbor在应用初始化阶段加载了配置信息和自定义主题，确保应用启动时所需的基本数据已经准备就绪。

5.2 HTTP拦截器

{
  provide: HTTP_INTERCEPTORS,
  useClass: InterceptHttpService,
  multi: true,
}

InterceptHttpService实现了对HTTP请求的拦截，主要功能包括：

添加认证令牌
统一错误处理
请求/响应日志记录
加载状态管理

5.3 错误处理服务

@Injectable({
  providedIn: 'root',
})
export class MessageHandlerService implements ErrorHandler {
  constructor(
    private msgService: MessageService,
    private translate: TranslateService,
    private session: SessionService
  ) {}

  public handleError(error: any | string): void {
    // 错误处理逻辑
    if (code === httpStatusCode.Unauthorized) {
      this.msgService.announceAppLevelMessage(
        code,
        msg,
        AlertType.DANGER
      );
      this.session.clear();
    } else {
      this.msgService.announceMessage(code, msg, AlertType.DANGER);
    }
  }
  
  // 其他错误处理方法
}

MessageHandlerService统一处理应用中的错误，根据错误类型和状态码采取不同的处理策略，如显示错误消息、清除会话等。

6. 性能优化策略

Harbor作为企业级应用，对性能有较高要求。下面我们来分析其采用的主要性能优化策略。

6.1 模块懒加载

如前所述，Harbor采用了路由懒加载策略，将不同功能模块分开打包，只有当用户访问特定路由时才会加载相应的模块。这大大减小了初始加载的bundle大小，提高了应用启动速度。

6.2 预加载策略

RouterModule.forRoot(harborRoutes, {
  preloadingStrategy: PreloadAllModules,
})

Harbor使用PreloadAllModules策略，在初始加载完成后，后台预加载其他模块，既保证了初始加载速度，又提升了后续导航的响应速度。

6.3 路由复用

通过自定义的HarborRouteReuseStrategy，Harbor实现了组件的复用，避免了频繁创建和销毁组件带来的性能开销，特别适合于需要频繁切换的标签页场景。

6.4 大型库的优化

在angular.json中，通过allowedCommonJsDependencies配置，Harbor明确指定了需要保留的CommonJS模块，避免了不必要的转译，减小了bundle体积。

7. 国际化与主题定制

7.1 国际化实现

Harbor采用ngx-translate实现国际化：

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useClass: HarborTranslateLoaderService,
  },
  missingTranslationHandler: {
    provide: MissingTranslationHandler,
    useClass: MyMissingTranslationHandler,
  },
})

HarborTranslateLoaderService负责加载语言文件，支持多种语言切换。MyMissingTranslationHandler则处理缺失的翻译，确保应用在缺少翻译时仍能正常显示。

7.2 主题定制

Harbor支持明暗两种主题，并通过SkinableConfig服务实现了主题的动态加载：

{
  "input": "src/css/dark-theme.scss",
  "bundleName": "dark-theme",
  "inject": false
},
{
  "input": "src/css/light-theme.scss",
  "bundleName": "light-theme",
  "inject": false
}

通过将主题样式单独打包，并在运行时动态加载，Harbor实现了主题的无缝切换，提升了用户体验。

8. 测试策略

Harbor前端采用了全面的测试策略，确保应用的质量与稳定性。

8.1 单元测试

使用Karma和Jasmine进行单元测试：

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "tsConfig": "tsconfig.spec.json",
    "polyfills": [
      "zone.js",
      "zone.js/testing"
    ],
    "karmaConfig": "karma.conf.js",
    "scripts": [
      "node_modules/@clr/icons/clr-icons.min.js"
    ],
    "styles": [
      "node_modules/@clr/icons/clr-icons.min.css",
      "node_modules/@clr/ui/clr-ui.min.css",
      "node_modules/prismjs/themes/prism-solarizedlight.css"
    ],
    "assets": [
      "src/images",
      "src/favicon.ico",
      "src/setting.json",
      "src/i18n"
    ]
  }
}

8.2 端到端测试

使用Cypress进行端到端测试：

"e2e": {
  "builder": "@cypress/schematic:cypress",
  "options": {
    "devServerTarget": "harbor-portal:serve",
    "watch": false,
    "headless": true
  },
  "configurations": {
    "production": {
      "devServerTarget": "harbor-portal:serve:production"
    }
  }
}

8.3 测试覆盖率

Harbor前端重视测试覆盖率，通过配置可以生成详细的测试覆盖率报告，帮助开发人员发现未被测试的代码，提高代码质量。

9. 扩展性设计

Harbor前端在架构设计上充分考虑了扩展性，为未来功能扩展和定制化提供了便利。

9.1 插件机制

虽然目前Harbor前端没有实现完整的插件系统，但通过模块化设计和依赖注入，为插件机制的实现奠定了基础。未来可以通过动态加载模块的方式，实现插件的即插即用。

9.2 自定义主题

如前所述，Harbor的主题系统支持自定义CSS文件的加载，企业可以根据自己的品牌需求，定制专属主题。

9.3 API扩展

Harbor前端通过统一的API服务层与后端交互，当后端API发生变化时，只需修改相应的服务实现，而无需大面积修改业务组件，降低了维护成本。

10. 总结与展望

Harbor前端基于Angular构建了一个健壮、高性能的企业级应用。通过模块化设计、懒加载、依赖注入等技术，实现了代码的高内聚低耦合，为应用的维护和扩展提供了良好的基础。

未来，Harbor前端可以在以下方面进一步优化：

微前端架构：将应用拆分为更小的微前端应用，进一步提高团队协作效率和应用性能。
性能监控：引入更完善的性能监控系统，实时收集和分析前端性能数据。
渐进式Web应用(PWA)：添加PWA支持，提升离线体验和移动端表现。
更好的TypeScript类型定义：进一步完善类型定义，提高代码质量和开发效率。

Harbor前端架构为我们展示了如何使用Angular构建一个复杂的企业级应用，其设计理念和实现方式对于其他类似项目具有重要的参考价值。通过不断优化和创新，Harbor前端将继续为用户提供更好的体验，为容器镜像管理领域贡献力量。

参考资料

Angular官方文档: https://angular.io/docs
Clarity Design System: https://clarity.design/
Harbor官方文档: https://goharbor.io/docs/
Angular性能优化最佳实践
企业级Angular应用架构设计

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考