Micro Frontend (Kiến trúc Phân tán Giao diện Người dùng)
Micro Frontend là một khái niệm kiến trúc, lấy cảm hứng từ các dịch vụ vi mô, chia nhỏ ứng dụng giao diện người dùng lớn thành nhiều ứng dụng con độc lập và tự trị. Mỗi ứng dụng con có thể được phát triển và triển khai bởi các nhóm khác nhau, sử dụng các công nghệ khác nhau và cuối cùng được tích hợp thành một sản phẩm tổng thể.
Ví dụ dễ hiểu: So sánh với trò lắp ghép LEGO
Hãy tưởng tượng bạn đang xây dựng một lâu đài bằng LEGO. Trước đây, mọi người phải làm việc cùng nhau trên cùng một phần, nếu ai đó lỡ tay làm đổ một mảnh, cả lâu đài sẽ sụp đổ. Bây giờ, với Micro Frontend:Với cách này, không chỉ tránh được sự can thiệp giữa các đội mà còn cho phép mỗi người phát huy thế mạnh của mình, đồng thời toàn bộ lâu đài không bị sụp đổ vì một phần nào đó gặp vấn đề.
- Bạn chia lâu đài thành các phần riêng biệt như cổng, tòa nhà chính, tường thành.
- Đội của Minh sử dụng vật liệu gỗ để xây cổng.
- Đội của Hồng sử dụng các khối nhựa để xây tòa nhà chính.
- Bạn sử dụng máy in 3D để tạo tường thành.
- Cuối cùng, ghép tất cả lại giống như một trò chơi ghép hình, mỗi phần có thể được nâng cấp riêng biệt khi cần thiết.
Lợi ích của Micro Frontend
| Lợi ích | Mô tả |
|---|---|
| Không phụ thuộc vào công nghệ cụ thể | Các ứng dụng con có thể chọn công nghệ tùy ý (Vue / React / Angular). |
| Phát triển và triển khai độc lập | Mỗi ứng dụng con có thể do một nhóm riêng chịu trách nhiệm và triển khai CI/CD riêng. |
| Giảm độ phức tạp | Tách một hệ thống phức tạp thành nhiều mô-đun nhỏ gọn hơn. |
| Nâng cấp từng bước | Thích hợp để thay thế hệ thống cũ dần dần, đặc biệt trong quá trình tái cấu trúc. |
| Tối ưu hóa hiệu suất | Cho phép tải tài nguyên theo yêu cầu, cải thiện tốc độ tải trang đầu tiên. |
Giải pháp Micro Frontend Phổ biến
| Giải pháp | Tính năng |
|---|---|
| **qiankun** | Dựa trên single-spa, dễ sử dụng, cộng đồng tích cực, hỗ trợ Vue/React, phù hợp với dự án doanh nghiệp. |
| **single-spa** | Lin hoạt, mở rộng tốt, thích hợp tùy chỉnh, hỗ trợ nhiều framework. |
| **Web Components** | Giải pháp chuẩn gốc, cô lập tốt nhưng khả năng tương thích kém, thích hợp cho các trường hợp phát triển công nghệ. |
| **iframe** | Hoàn toàn cô lập, tương thích tốt với các dự án cũ, nhược điểm là hiệu suất thấp, khó giao tiếp. |
Ví dụ: Kết nối nhanh với qiankun
// Ứng dụng chính main.js
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'reactApp',
entry: '//localhost:3001', // Điểm nhập ứng dụng con
container: '#subapp-container',
activeRule: '/react', // Quy tắc định tuyến
}
]);
start();
<!-- Container ứng dụng chính index.html -->
<div id="subapp-container"></div>
// Cài đặt đường dẫn tài nguyên động (Webpack) - ứng dụng con React
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
Gợi ý tối ưu hóa hiệu suất
// vue.config.js hoặc webpack.config.js
externals: {
vue: 'Vue',
react: 'React',
'react-dom': 'ReactDOM',
}
start({
prefetch: true, // Kích hoạt tải trước tài nguyên
});
<script src="child-app.js" defer></script>
// Công cụ truyền thông chủ yếu
import mitt from 'mitt';
export const eventBus = mitt();
// Ví dụ truyền thông trong ứng dụng con
eventBus.emit('login-success', userInfo);
eventBus.on('set-theme', (theme) => { ... });