UI 빌드 속도 개선

문제점

UI에서 공통으로 사용하는 중요 페이지들은 MSA로 되어 있지 않고 하나의 프로젝트(git)에 저장하여 사용하고 있습니다.

이러한 문제 때문에 프로젝트의 용량이 커지면서 로컬에서 개발을 할 때면 빌드하는데 속도가 느려 개발하는데 불편함이 있어 어떻게 하면 빌드 속도를 빠르게하여 개발자들이 개발하는 시간보다 빌드 시간을 오래 기다리는 일이 없게 할 수 있을까 🤔 라는 생각때문에 빌드 속도를 줄여보기로 하였습니다.

빌드 속도 측정

먼저 기존에 실행하고 있는 빌드 시간을 측정해 보았습니다. 프로젝트가 크다보니 모든 라우터를 빌드하느게 아니라 담당하는 라우터만 남기고 주석처리하여 로컬에서 개발하고 있습니다(그렇게 했는데도 너무 느리다…)

측정을 위한 필요 라이브러리

1. webpack-bundle-analyzer
   • 번들링된 파일들의 크기와 사용하는 파일들을 시각화하여 볼수 있는 라이브러리
2. speed-measure-webpack-plugin
   • webpack 빌드 속도를 측정할 수 있는 라이브러리

기존 빌드

1. 파일 크기

   

2. 빌드 속도

   • 시작 시 빌드 속도

   

• 소스 수정시 재빌드 속도

  빌드 파일에 포함된 컴포넌트을 간단하게 console.log를 추가하여 측정

  

문제점 분석

파일크기가 클뿐만아니라 빌드속도도 느린걸로 확인됩니다. 시각화된 번들링 파일을 확인했을 때 파일마다 node_modules 중복된 라이브러리들이 사용중이여서 파일크기가 커지고 js, css 로드 속도가 1분 40초 이상 걸리는 걸로 확인되었습니다.

1. node_modules

dll을 사용하여 매번 번들링하여 가져가지 않도록 추가하여 파일크기도 개선하였습니다.

dll은 webpack에서 자주 변하지 않는 node_modules 라이브러리들을 미리 번들링된 파일로 가져가기 때문에 빌드시간, 파일크기를 크게 줄어들었습니다.

dll 파일 생성 방법

const path = require('path');
const webpack = require('webpack');

const BUILD_PATH = path.resolve(__dirname, process.env.NODE_ENV);

module.exports = {
	entry: {
		// 여기에 자주 변경되지 않는 라이브러리 나열
		vendor: ['react', 'react-dom']
	},
	output: {
		path: BUILD_PATH,
		filename: '[name].dll.js',
		library: 'vendor_dll'
	},
	plugins: [
		new webpack.DllPlugin({
			path: path.join(BUILD_PATH,'[name]-manifest.json'),
			name: 'vendor_dll',
			context: BUILD_PATH
		})
	]
};

 
NODE_ENV=local webpack --config webpack.dll.config.js

webpack.cofig 파일 설정 추가

module.exports = {
	//...그외 설정들...
	plugins: [
		new HappyPack({
        id: 'js',
        threads: 6,
	      loaders: ['cache-loader','babel-loader']         
    }),
    new webpack.DllReferencePlugin({
        context: BUILD_PATH,
        manifest: require(path.join(BUILD_PATH,'vendor-manifest.json'))
    }),
	]
}

1. 로더 속도 지연

이문제를 해결하기 위해 HappyPack 라이브러리를 사용하여 로더 시간을 개선하기로 하였습니다.

HappyPack 동작원리

Happypack은 webpack과 기본 소스파일 사이에 위치하며 여기서 로더 변환이 발생합니다. 모듈과 모든 종속성을 가져와 스레드풀를 사용하여 webpack loader를 수행합니다.

개선이후 빌드 속도 측정

1. 파일크기

1. 빌드 속도
   • 시작 시 빌드 속도

   

• 소스 수정시 재빌드 속도

  

앞으로

기존 파일 크기를 113MB에서 73MB로 줄여 35% 감소시켰으며, 빌드 시간도 2분 8초에서 16초로 단축하여 87% 감소시켰습니다. 이를 통해 빌드 속도와 용량 최적화가 이루어져 개발자가 로컬 환경에서의 개발 효율성과 배포 속도가 대폭 향상되었습니다.

현재 제품의 핵심 프로젝트이며 레거시한 구조를 가진 이 프로젝트는 Webpack 2 버전을 사용하고 있습니다. 분석 결과, Webpack을 최신 버전으로 업그레이드하면 happypack 없이도 성능 개선이 가능한 것으로 확인되었습니다.

추후에는 레거시 프로젝트의 업그레이드 방안을 구체적으로 검토하고, 점진적으로 적용하는 방향을 고려할 예정입니다.