Tích hợp tại thời điểm xây dựng được thực hiện bằng cách mỗi một micro-frontend sẽ được đóng gói thành một module riêng rẽ. Sau đó, thành phần khung chứa của ứng dụng sẽ cài đặt các module này vào giống như việc sử dụng các gói thư viện [21].
31
Hình 2.7 mô tả cấu trúc một trang “Checkout Order” được tách thành ba thành phần riêng biệt tương ứng với ba micro-frontends gồm “order-confirm”, “customer-info” và “order-summary”.
Thành phần bao bên ngoài gọi là “container”, nó được coi là trang chính, hay còn gọi là khung chứa. Ba micro-frontends trên được đóng gói thành ba module tách biệt, sau đó sẽ được nạp vào container thông qua một cơ chế quản lý gói thư viện (dependencies). Hình 2.8 mô tả thông tin của một tệp cấu hình trong ứng dụng được dùng để khai báo, quản lý các micro-frontends. Tệp tin này thường được đặt tên mặc định là “package.json” và được đặt trong thư mục gốc của chương trình. Một số công cụ như như webpack13 hoặc npm14 được dùng để biên dịch và cài đặt từng module cho ứng dụng.
Hình 2.8. Tệp tin cấu hình quản lý gói thư viện trong ứng dụng
Nhược điểm chính của phương pháp tích hợp trên là tất cả các micro-frontends sẽ phải được biên dịch và cài đặt lại mỗi khi chúng có một hoặc một số thành phần cần nâng cấp. Giữa container và các micro-frontends có một sự phụ thuộc khá chặt. Thêm vào đó, kích cỡ cuối cùng của gói chương trình sẽ lớn vì nó chứa tất cả các gói module khác, và việc áp dụng các công nghệ khác nhau cho từng module đôi khi gặp khó khăn vì hiện tại các framework phát triển web hiện nay khá nhiều nhưng chưa thực sự có được một tiêu chuẩn thống nhất trong việc quản lý đóng gói các thư viện.