Giới thiệu

Chào các bạn, mình lại quay trở lại và hôm nay muốn chia sẻ về một chủ đề đang ngày càng nhận được nhiều sự quan tâm trong cộng đồng phát triển front-end – đó chính là kiến trúc Microfrontend và việc xử lý nhiều bundlers khác nhau.

Mặc dù công nghệ Microfrontend (MFE) đang trở nên phổ biến, nhưng vẫn còn nhiều thách thức mà các nhà phát triển gặp phải khi tích hợp nhiều bundler với nhau. Đặc biệt là trong bối cảnh công ty mà mình làm việc, việc sử dụng nhiều team phát triển với những công nghệ khác nhau là điều không thể tránh khỏi.

Bài viết này sẽ hướng dẫn các bạn cách thiết lập kiến trúc MFE hỗ trợ nhiều bundler (Webpack, Vite, Rsbuild…) một cách hiệu quả.

Tổng quan về Microfrontend và các tiêu chí cần có

Trước khi đi vào các bước thiết lập, mình hi vọng các bạn đã có khái niệm cơ bản về Microfrontend qua bài viết trước của mình. Một kiến trúc MFE tốt cần đáp ứng một số tiêu chí nhất định, bao gồm:

• Độc lập giữa các MFE và app shell: Mỗi team có thể phát triển, triển khai và kiểm tra độc lập mà không bị trở ngại.
• Triển khai từng MFE riêng biệt: Khi có sự thay đổi ở một MFE, chỉ cần triển khai lại MFE đó mà không ảnh hưởng đến các thành phần khác.
• Quản lý quyền truy cập: Có thể dễ dàng áp dụng các phương pháp xác thực và phân quyền cho từng MFE.
• Tự do chọn công nghệ: Mỗi MFE có thể tự do sử dụng framework và bundler mà họ muốn.
• Giao tiếp đơn giản: Bảo đảm việc giao tiếp giữa các MFE diễn ra mượt mà.
• Trải nghiệm lập trình tốt: Các lập trình viên làm việc trên MFE nên có cảm giác như đang phát triển một dự án bình thường, không bị giới hạn bởi framework nội bộ.

Vấn đề chính

Như đã đề cập, việc hỗ trợ nhiều bundler trong một kiến trúc MFE là rất quan trọng. Mỗi team có thể có những lựa chọn khác nhau về framework và bundler như Webpack, Vite, Rollup, hay thậm chí là những công cụ mới như Rsbuild. Một kiến trúc MFE mạnh mẽ sẽ cho phép các team tự do chọn công nghệ mà họ yêu thích.

Bắt đầu với thiết lập

Chúng ta sẽ thực hiện một ví dụ thực tế cần thiết. Đầu tiên, hãy clone mã nguồn của mình tại đây: viblo-mfe-multi-bundlers.

Sau khi clone về, vào mỗi thư mục của app shell và MFE, chạy lệnh npm install để cài đặt các gói cần thiết. Sau đó, khởi động ứng dụng:

# Chạy app shell
npm start

# Chạy angular-app
npm start

Truy cập vào địa chỉ http://localhost:4200 và đăng nhập với thông tin username=user và password=user để xem MFE Angular hoạt động bình thường.

Thiết lập Rsbuild cho React

Trong phần này, chúng ta sẽ cấu hình một MFE sử dụng Rsbuild với Module Federation. Đầu tiên, tại thư mục viblo-mfe-multi-bundlers, chạy lệnh sau để tạo dự án mới:

npm create rsbuild@latest

Chọn tên dự án như react-app và framework là React. Đừng quên kiểm tra ứng dụng của bạn bằng cách khởi động nó và cài đặt Module Federation.

Thiết lập Vite cho Vue

Tiếp theo, ta sẽ tiếp tục thiết lập một MFE với Vite. Tạo dự án Vite mới và cài đặt Module Federation. Chúng ta sẽ cấu hình expose tương tự như đã làm với React, nhưng cần đặc biệt chú ý đến định dạng của remoteEntry.js khi chạy

Kết luận

Như các bạn có thể thấy, việc hỗ trợ nhiều bundler trong kiến trúc Microfrontend là một thách thức nhưng cũng rất bổ ích. Điều này không chỉ tạo cơ hội cho các team lựa chọn công nghệ mà họ ưa thích mà còn nâng cao khả năng tương tác giữa các thành phần khác trong dự án.

Hy vọng bài viết này sẽ giúp các bạn hiểu rõ hơn về cách xử lý multi bundlers trong Microfrontend. Hẹn gặp lại các bạn trong các bài viết tiếp theo để cùng khám phá thêm nhiều kiến thức thú vị khác nhé! 👋👋
source: viblo