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

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. 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:

import "./App.css";

const App = () => {
  return (
    <div className="content">
      <h1>Rsbuild with React</h1>
      <p>Bắt đầu tạo ra những điều tuyệt vời với Rsbuild.</p>
      <div>
        <img src="/react.svg" alt="React Logo" width={50} />
      </div>
      <div>
        <img src="/rspack.png" alt="React Logo" height={100} />
      </div>
    </div>
  );
};

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:

import "./App.css";
import reactLogo from "../public/react.svg";
import rsPackLogo from "../public/rspack.png";

const App = () => {
  return (
    <div className="content">
      <h1>Rsbuild with React</h1>
      <p>Bắt đầu tạo ra những điều tuyệt vời với Rsbuild.</p>
      <div>
        <img src={reactLogo} alt="React Logo" width={50} />
      </div>
      <div>
        <img src={rsPackLogo} alt="React Logo" height={100} />
      </div>
    </div>
  );
};

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:

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue';
import viteLogo from './assets/vite.svg';
import vueLogo from './assets/vue.png';
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img :src="viteLogo" alt="Vite Logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img :src="vueLogo" alt="Vue Logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

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.

{
  "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