[Open WebUI] mammoth 라이브러리 동적 로딩으로 페이지 초기 로드 301KB 절감

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

들어가며

Open WebUI의 유틸리티 모듈에서 mammoth 라이브러리(DOCX -> 텍스트 변환)를 최상위에서 정적으로 import하고 있었습니다. 이 라이브러리는 301KB의 크기를 가지며, DOCX 파일을 업로드할 때만 실제로 사용됩니다. 모든 페이지 로드 시 이 라이브러리가 포함되어 초기 로딩 시간에 불필요한 부담을 주고 있었습니다.

핵심 코드 분석

정적 import를 동적 import로 변경

Before:

import mammoth from 'mammoth';

// ...

async function extractDocxText(file: File) {
    const arrayBuffer = await file.arrayBuffer();
    const result = await mammoth.extractRawText({ arrayBuffer });
    return result.value;
}

After:

// 최상위 import 제거

async function extractDocxText(file: File) {
    const [arrayBuffer, { default: mammoth }] = await Promise.all([
        file.arrayBuffer(),
        import('mammoth')
    ]);
    const result = await mammoth.extractRawText({ arrayBuffer });
    return result.value;
}

왜 이게 좋은가

• 초기 번들 크기 301KB 감소: 페이지 로드 시 mammoth가 포함되지 않아 TTI(Time to Interactive)가 개선됩니다.
• 병렬 로딩: Promise.all로 파일 ArrayBuffer 변환과 mammoth 동적 로딩을 동시에 수행하여, 순차 실행 대비 대기 시간이 줄어듭니다.
• 사용 시점 로딩: DOCX 파일을 실제로 업로드할 때만 mammoth를 로드하므로, 대부분의 사용자에게 이 비용이 발생하지 않습니다.
• 4줄 변경으로 큰 효과: 최소한의 코드 변경으로 의미 있는 성능 개선을 달성합니다.

참고 자료

• PR #20202 - feat: Dynamically load mammoth to speed up page loading (-301KB)
• mammoth.js GitHub