Xin chào các bạn! Chúng ta lại gặp nhau trong series "Chập Chững Làm Quen Với Microfrontend". Hôm nay, chúng ta sẽ cùng nhau tìm hiểu về cách xử lý các tài nguyên tĩnh như hình ảnh, file, SVG, v.v... trong kiến trúc microfrontend. ## Bắt Đầu Trước tiên, các bạn hãy clone nguồn code từ kho lưu trữ sau: [Github Repository](https://github.com/maitrungduc1410/viblo-mfe-assets-handling.git). Trong đó, bạn sẽ thấy 4 thư mục (1 app shell và 3 microfrontend ứng dụng). Hãy chạy lệnh `npm install` trong từng thư mục để cài đặt các dependencies cần thiết. ## Khởi Động Ứng Dụng Chúng ta sẽ bắt đầu bằng cách khởi động ứng dụng React. Hãy vào thư mục `react-app` và chạy lệnh sau: ``` npm run dev ``` Bạn có thể truy cập địa chỉ `http://localhost:3002` từ trình duyệt để xem kết quả. Trong thư mục `public`, mình đã để sẵn 2 file SVG và PNG. Hãy thử hiển thị chúng bằng cách sửa đổi file `src/App.tsx` như sau: ```javascript import "./App.css"; const App = () => { return (

Rsbuild with React

Bắt đầu tạo ra những điều tuyệt vời với Rsbuild.

); }; export default App; ``` Sau khi lưu lại, quay lại trình duyệt, bạn sẽ thấy hình ảnh đã hiển thị thành công. ## Kết Nối Vào Kiến Trúc Microfrontend Tiếp theo, chúng ta sẽ khởi động `app-shell` bằng lệnh sau: ``` npm start ``` Truy cập vào `http://localhost:4200` và login với thông tin `user/user`. Tuy nhiên, có một vấn đề phát sinh: hình ảnh không hiển thị do chúng đang được hướng đến app shell. Để khắc phục, bạn cần chỉ rõ đường dẫn cho các hình ảnh sử dụng định dạng mà các bundler cung cấp. Cụ thể là việc sử dụng `import` trong file JavaScript hoặc TypeScript. Dưới đây là cách cập nhật cho sử dụng Rsbuild: ```javascript import "./App.css"; import reactLogo from "../public/react.svg"; import rsPackLogo from "../public/rspack.png"; const App = () => { return (

Rsbuild with React

Bắt đầu tạo ra những điều tuyệt vời với Rsbuild.

); }; export default App; ``` ### Tùy Chọn Về Kích Thước Tài Nguyên Mặc định, các tài nguyên có kích thước nhỏ hơn 4KB sẽ được inline thành base64, trong khi đó tài nguyên lớn hơn sẽ giữ URL. Bạn cũng có thể ép buộc inline bằng cách: ``` import reactLogo from "../public/react.svg?inline"; ``` ## Xử Lý Tài Nguyên Tĩnh Với Vite Giờ hãy tiếp tục với `vue-app` sử dụng Vite. Chạy lệnh: ``` npm run dev ``` Thay đổi file `vue-app/src/App.vue` như sau: ```javascript ``` Vite có thể tự động inline tài nguyên nhỏ hơn 4KB. Tuy nhiên, để sử dụng đúng cách, bạn cần thêm tài nguyên vào thư mục `src` thay vì `public`. ## Cuối Cùng Là Angular Với Webpack Cuối cùng, với ứng dụng Angular được xây dựng bằng Webpack, bạn cần thiết lập các loader để xử lý ảnh. Đừng quên kiểm tra cài đặt Typescript của bạn để đảm bảo hỗ trợ import JSON và hình ảnh. ```json { "compilerOptions": { "resolveJsonModule": true, "allowSyntheticDefaultImports": true } } ``` Khởi động lại ứng dụng và kiểm tra kết quả. ## Kết Luận Như các bạn đã thấy, việc xử lý tài nguyên tĩnh trong microfrontend phụ thuộc vào từng bundler mà bạn sử dụng. Hãy luôn sử dụng lệnh `import` để đảm bảo tài nguyên được truy cập chính xác. Nếu có vấn đề, bạn hãy kiểm tra cấu hình của bundler và đường dẫn tài nguyên. Chúc các bạn thành công! source: viblo

Bài viết về chủ đềstatic assets

Tổng hợp các bài viết về static assets

Hướng Dẫn Quản Lý Tài Nguyên Tĩnh Trong Kiến Trúc MicrofrontendReactmicrofrontendviteWebpackstatic assets

Chủ đề phổ biến

Hướng Dẫn Quản Lý Tài Nguyên Tĩnh Trong Kiến Trúc Microfrontend