Intro
webpack과 같은 모듈 번들러가 없다면 SPA(Single Page App)에게는 곤란할 것입니다.
하나의 html에 수십 수백 개의 자바스크립트 파일을 포함하는SPA는 이러한 파일들을 하나의 파일로 컴파일할 필요가 있기 때문입니다. 다만 애플리케이션의 크기가 커질수록 컴파일된 파일 또한 커지게 되니 브라우저가 로드하는 시간도 길어지고 사용자가 느끼는 만족도 또한 떨어질 것입니다.
그러니 하나로 컴파일된 파일을 여러 파일로 나누는 Code Splitting가 필요하게 됩니다.
Code Splitting
번들링 되어진 앱은 최적화되어지지만 애플리케이션의 크기거가 커지면 번들도 커지는 로드 시간또한 길어집니다. 좋은 해결방안은 번들된 컴파일 파일을 분할하는 Code Splitting입니다. 이와 같은 Code Splitting은 webpack과 같은 번들러가 지원하는 기능입니다. Code Splitting은 Lazy Loading을 할 수 있게 도와주어 사용자가 느끼는 만족도를 향상 시켜줍니다.
Lazy Loading은 페이지가 읽어들이는 시점에 중요하지 않은 리소스의 로딩을 추 후에 로드하는 작업입니다.
dynamic import
dynamic import을 사용하면 런타임시에 필요한 module을 import할 수 있습니다.
Promise를 반환하며 export하는 값들을 가진 객체를 반환합니다.
// 적용 전
import {add} form "./math";'
console.log(add(1,2));
// 적용 후
import("./math").then(math => {
console.log(math.add(1,2));
});webpack이 해당 구문을 만나게 된다면 Code Splitting를 하게 됩니다.
React.lazy
React에서는 React.lazy와 dynamic import를 이용해 컴포넌트가 사용 되는 시점에 로드되도록 구현이 가능합니다.
import React from "react";
const Component = React.lazy(() => import("./Component"));
const App = () => {
return <div><Component/></div>
}또한 Suspense를 이용하면 로딩중 같은 전환 화면을 구현 할 수 있습니다.
import React, {Suspense} from "react";
const A = React.lazy(() => import("./A"));
const B = React.lazy(() => import("./B"));
const App = () => {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<A/>
<B/>
</Suspense>
</div>
)
} 위와 같은 방법으로 Code Splitting를 구현할 수 있습니다. react-router로 구성된 라우터의 각 라우트를 dynamic import로 분리하거나 한 컴포넌트내에서 처음에 로드되지 않는 컴포넌트를 분리하는 방법등을 사용하면 애플리케이션의 초기 로드 속도를 높일 수 있습니다.
📝 후기
애플리케이션을 이용하는 사용자에게 초기 로딩속도는 매우 중요한 요건일 것입니다. 몇 초 안되는 로딩 시간이 조금이라도 길어질수록 사용자의 피로도는 몇 배로 증가 할것입니다. 이런 로딩 시간을 줄여 애플리케이션의 전체적인 만족도를 끌어올리는 것은 개발자가 해야 할 필수적인 요건이란 생각이 들었습니다.
🧾 Reference
