Как импортировать на основе переменной, чтобы избежать загрузки ненужных ресурсов ⇐ Javascript

[Anonymous]

Я пытаюсь загрузить только правильный шрифт, основанный на пользовательском шрифте.

Код: Выделить всё

const comicFontName = 'Comic-Neue';
const fonts = [comicFontName];

export function DisplayPost(props: DisplayPostProps) {
const { fontName } = props;
const [fontCSS, setFontCSS] = useState(null);

useEffect(() => {
async function fetchFontCSS() {
if (!fontName) {
return;
}
const stylesheetModule = (await import(
'../../assets/fonts/' + comicFontName // works, but fonts[0] or fontName throw error
));
setFontCSS(stylesheetModule.default);
}
fetchFontCSS();
}, [fontName]);

Использование имени переменной в качестве жестко запрограммированной строки работает, но использование with from array или from props не будет работать и выдаст ошибку.
Существует несколько доступных шрифтов, каждый из них весит около 500 КБ, я не хочу импортировать их все, если используется только один.
Или, может быть, я неправильно понимаю, как работает импорт, и это решается во время выполнения?

Подробнее здесь: https://stackoverflow.com/questions/798 ... ary-assets