프론트엔드 웹 최적화를 위한 Code Splitting

📒 Code Splitting 이란?

Code spliting은 큰 자바스크립트 번들을 더 작고 관리하기 쉬운 청크로 분할하여 웹사이트 성능을 최적화하는 데 사용되는 기술이다. 이러한 작은 청크는 필요에 따라 로드할 수 있으므로 웹 애플리케이션의 초기 로드 시간을 단축할 수 있다.

 

📒 Javascript에서 Code Splitting을 구현하는 방법

📌 동적 import 사용

최신 자바스크립트에서는 동적 임포트와 "import()" 함수를 사용하여 모듈을 온디맨드 방식으로 로드할 수 있다. 동적 import는 Promise를 반환하므로 필요할 때 모듈을 비동기적으로 로드할 수 있다.

 

아래 예시에서는 페이지가 처음 로드될 때가 아니라 버튼이 클릭될 때 my-module.js 모듈이 로드된다.

const button = document.getElementById('load-button');

button.addEventListener('click', async () => {
	const module = await import('./my-module.js');
    module.doSomething();
});

 

📌 Webpack 또는 기타 번들러 구성

Webpack과 같은 빌드 도구를 사용하는 경우 code splitting을 구성하여 번들을 더 작은 청크로 자동 분할할 수 있다.
아래는 code splitting 을 위한 Webpack 설정 예시인데, 초기 및 비동기 임포트 모두에 대해 청크를 분할하도록 Webpack에 지시한다.

// webpack.config.js
module.exports = {
	// ...기타 설정 생략...
    optimization: {
    	splitChunks: {
        	chunks: 'all',
        },
    },
};

 

📌 Route 기반 Code Splitting

여러 route를 가진 웹 애플리케이션의 경우 route 기반 code splitting을 구현할 수 있다. 각 route의 JavaScript 코드가 별도의 청크로 분할되어 각 route의 초기 로드 시간이 단축된다.
예시에서 "Home", "About" 컴포넌트는 각각의 경로에 액세스할 때 온디맨드 방식으로 로드된다.

import { lazy, Suspense } from 'react';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
	return (
    	<div>
        	<Suspense fallback={<div>Loading...</div>}>
            	<Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
            </Suspense>
        </div>
    );
}

 

📌 Tree Shaking 

code splitting을 구현할 때 빌드 설정에서 tree shaking을 활성화할 수 있다. tree shaking은 가져온 모듈에서 사용하지 않는 코드를 제거해서 필요한 코드만 최종 번들에 포함되도록 만든다.

 

📌 분석 및 최적화

code splitting을 구현한 후에는 Webpack 번들 분석기 또는 구글 크롬 개발자 도구의 performance(성능)같은 도구를 사용하여 번들을 분석하는 것이 좋다. 이를 통해 추가적으로 최적화해야 할 부분에 대해 알 수 있다.

 

📌 Lazy Loading Library 사용하기 

React나 Vue.js와 같은 자바스크립트 라이브러리/프레임워크를 사용하는 경우 code splitting 및 lazy loading을 위한 내장 지원 또는 외부 라이브러리를 제공하는 경우가 많다. 예를 들어 React의 "React.lazy()" 나 Vue의 "vue-router"를 사용하면 프레임워크별 방식으로 code splitting을 쉽게 구현할 수 있다.

 

📒 마치며

code splitting을 구현하면 초기 로드 시간을 줄이고 리소스 활용을 최적화하여 웹 애플리케이션의 성능을 크게 향상시킬 수 있다. 특히 복잡한 자바스크립트 번들이 포함된 대규모 웹 애플리케이션의 경우에는 성능 최적화가 중요하다.

개발 진행 상황에 따라, 사용하는 라이브러리/프레임워크에 따라 적절히 최적화를 적용해보자!