빌드 대기시간을 5분대에서 1분대로

반복되는 빌드 대기 시간을 줄이고 싶었습니다

스마트뱅킹 프론트엔드 풀빌드에 5분대가 걸려 수정 결과를 확인할 때마다 기다려야 했습니다. 화면 수가 많아서 생기는 문제인지, 빌드 과정에 불필요한 작업이 있는지 라우터의 로딩 정의부터 확인했습니다.

폐쇄망에서는 새 번들러를 도입하거나 인프라를 늘리기 어려웠습니다. 기존 환경에서 원인을 찾고, 운영 중인 화면에 미치는 영향을 줄이는 방향으로 접근했습니다.

변수로 만든 import 경로가 탐색 범위를 넓히고 있었습니다

라우터에서 import 경로를 변수로 조합하고 있었습니다. Webpack이 대상을 정적으로 결정하지 못하면서 context 모듈을 만들고, 해당 경로의 후보 파일을 스캔하고 파싱하는 구조를 확인했습니다.

동적 import()는 유지하되 파일 경로를 리터럴로 명시하고 청크명을 고정했습니다. 실행 중 대상을 선택하는 곳은 미리 정의한 매핑 안에서만 선택하도록 정리했습니다.

// 변경 전: 변수로 조합한 동적 import
const load = (folder, name) =>
  import('@/views/' + folder + '/' + name + '.vue');

// 변경 후: 경로가 명시된 동적 import
const screens = {
  summary: () => import(
    /* webpackChunkName: 'summary' */
    '@/views/Summary.vue'
  ),
};

번들러 교체보다 변경 범위가 작은 방법을 선택했습니다

URL과 화면 전환 방식은 유지하고 라우터의 내부 로딩 정의만 수정했습니다. 새 도구를 반입하고 전체 화면을 다시 검증하는 부담에 비해, 확인한 병목을 직접 수정하는 편이 이번 문제에 적합했습니다.

개선 전후 풀빌드 시간은 5분대에서 1분대로 줄었습니다. 이 개선으로 ICT&디지털혁신본부 2025년 상반기 우수직원에 선정됐습니다.

개발자 2명이 하루 5회 빌드한다고 가정하면, 월 20영업일 동안 팀 합산 빌드 대기시간 추정치는 약 13시간 줄어듭니다. 회당 약 4분을 기준으로 계산했습니다.