Giới Thiệu

Hello các bạn! Hôm nay, chúng ta sẽ tiếp tục hành trình khám phá kiến trúc Microfrontend và đi sâu vào cách xử lý vấn đề liên quan đến shared dependencies, để tránh xung đột và giảm thiểu tải tài nguyên không cần thiết.

Vấn Đề Chung Với Shared Dependencies

Trong kiến trúc Microfrontend (MFE), việc quản lý dependencies là mối quan tâm lớn, với ba vấn đề chính như sau:

1. Tăng Kích Thước Bundle

Khi nhiều microfrontend độc lập mỗi cái đóng gói thư viện chung, kích thước của bundle có thể gia tăng không cần thiết. Đặc biệt khi mỗi MFE cố gắng tải riêng một phiên bản react, khiến cho tăng thời gian tải và tiêu tốn băng thông.

2. Xung Đột Phiên Bản

Khi các microfrontend yêu cầu các phiên bản khác nhau của cùng một thư viện, điều này có thể gây ra lỗi runtime. Chẳng hạn, nếu một MFE cần sử dụng các tính năng mới trong React, nhưng lại đang chạy trên một phiên bản cũ, sẽ dẫn đến lỗi.

3. Khó Bảo Trì

Việc cập nhật và quản lý dependencies trở nên phức tạp khi các microfrontend không đồng bộ, dẫn đến việc sử dụng nhiều phiên bản khác nhau hoặc phải sao chép chúng trên từng bundle, gia tăng sự mất ổn định.

Cách Giải Quyết Các Vấn Đề

Thiết Lập Project

Bắt đầu, các bạn hãy clone repository mã nguồn từ GitHub theo đường dẫn: https://github.com/maitrungduc1410/viblo-mfe-shared-deps.git. Cài đặt dependencies cho toàn bộ thư mục dự án bằng lệnh:

npm run install:all

Sau đó, bạn có thể khởi động tất cả các project với một lệnh duy nhất:

npm start

Truy cập ứng dụng từ trình duyệt tại địa chỉ http://localhost:4200.

Cấu Hình Shared Dependencies

Trong cấu hình webpack.config.js của app-shell, hãy chú ý đến cách cấu hình shared trong ModuleFederationPlugin:

new container.ModuleFederationPlugin({
  shared: {
    'react': { eager: true, singleton: true },
    'react-dom': { eager: true, singleton: true },
  },
}),

Sử dụng singleton: true đảm bảo chỉ có một instance của thư viện được tải, tránh việc tải nhiều phiên bản khác nhau. eager: true giúp tải ngay khi ứng dụng khởi động tránh việc tải trễ.

Kiểm Tra Phiên Bản

Khi bạn kiểm tra trong console, bạn sẽ thấy các phiên bản hiện có của react, và nếu có xung đột phiển bản, cách xử lý như sau:

shared: {
  react: {
    singleton: true,
    requiredVersion: '^18.0.0',
    strictVersion: true,
  },
},

Điều này giúp đảm bảo rằng phiên bản không tương thích sẽ không được tải.

Quản Lý Angular

Angular có tính đặc thù với AOT (Ahead-of-Time), do đó nếu có xung đột phiên bản, bạn cần phải chỉ định rõ ràng phiên bản yêu cầu.

shared: {
  '@angular/core': {
    singleton: true,
    requiredVersion: '^18.0.0',
    strictVersion: true,
  },
},

Điều này giúp ngăn ngừa các lỗi không tương thích mà bạn có thể gặp phải khi các phiên bản không đồng nhất.

Tổng Kết

Hy vọng bài viết giúp bạn hiểu rõ các vấn đề xoay quanh shared dependencies trong kiến trúc Microfrontend. Bằng cách quản lý cẩn thận các dependencies này, bạn sẽ tạo ra một hệ thống mượt mà hơn, đồng thời hạn chế các lỗi không mong muốn. Chúc các bạn thành công trong việc xây dựng một kiến trúc MFE hiệu quả và bền vững!

source: viblo