[Open WebUI] YAML 라이브러리 동적 로딩으로 번들 130KB 감소

PR 링크: open-webui/open-webui#20204 상태: Merged | 변경: +2 / -5

들어가며

Open WebUI의 API 유틸리티 파일(src/lib/apis/index.ts)에서 yaml 라이브러리를 최상단에서 정적으로 import하고 있었습니다. 이 라이브러리는 YAML 형식의 OpenAPI 스펙을 파싱할 때만 사용되지만, 정적 import로 인해 모든 페이지 로드 시 약 130KB가 번들에 포함되어 초기 로딩 속도를 저하시켰습니다.

핵심 코드 분석

Before: 정적 import

import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
import { convertOpenApiToToolPayload } from '$lib/utils';
import { getOpenAIModelsDirect } from './openai';
import { parse } from 'yaml';
import { toast } from 'svelte-sonner';

import { parse } from 'yaml'이 최상단에서 정적으로 로드되어, 이 모듈을 사용하는 모든 페이지에서 yaml 라이브러리가 번들에 포함됩니다.

After: 동적 import

import { WEBUI_BASE_URL } from '$lib/constants';
import { convertOpenApiToToolPayload } from '$lib/utils';
import { getOpenAIModelsDirect } from './openai';

// yaml 파싱이 필요한 곳에서만:
if (url.toLowerCase().endsWith('.yaml') || url.toLowerCase().endsWith('.yml')) {
    if (!res.ok) throw await res.text();
    const [text, { parse }] = await Promise.all([res.text(), import('yaml')]);
    return parse(text);
}

import('yaml')을 사용하여 YAML 파일을 실제로 파싱해야 할 때만 라이브러리를 동적으로 로드합니다. Promise.all로 텍스트 가져오기와 라이브러리 로딩을 병렬로 수행합니다.

왜 이게 좋은가

1. 번들 크기 130KB 감소: yaml 라이브러리가 초기 번들에서 제거되어 First Contentful Paint가 빨라집니다.
2. 병렬 로딩: Promise.all([res.text(), import('yaml')])로 HTTP 응답 읽기와 라이브러리 로딩을 동시에 수행하여 추가 레이턴시를 최소화합니다.
3. 불필요한 import 정리: 사용되지 않던 WEBUI_API_BASE_URL과 toast import도 함께 제거했습니다.

동적 import는 코드 스플리팅의 핵심 기법으로, 자주 사용되지 않는 큰 라이브러리를 필요한 시점에만 로드하여 초기 페이지 로딩 성능을 개선합니다. 단 2줄 추가, 5줄 삭제로 130KB를 절감한 효율적인 최적화입니다.

참고 자료

• MDN 동적 import() 문서
• Webpack Code Splitting 가이드