[javascript] Webpack에서 코드 스플리팅하는 방법
코드 스플리팅은 웹팩(Webpack)을 사용하여 JavaScript 코드를 더 작고 효율적인 청크(chunks)로 분할하는 기술입니다. 이는 초기 로드 시간을 줄이고 필요한 모듈만 로드하도록 도와줍니다.
1. 방법 1: 동적 임포트 사용하기
Webpack 2 이상부터는 import()를 사용하여 동적으로 모듈을 임포트할 수 있습니다. 이는 코드 스플리팅을 구현하는 가장 간단한 방법입니다. 다음은 예시 코드입니다:
// main.js
function handleClick() {
import(/* webpackChunkName: "moduleA" */ './moduleA').then((moduleA) => {
// moduleA 사용하기
});
}
import()를 사용하여 필요한 모듈을 로드하고 then 메서드로 해당 모듈을 사용할 수 있습니다. webpackChunkName 옵션을 사용하여 생성되는 청크의 이름을 지정할 수도 있습니다.
2. 방법 2: SplitChunks 플러그인 사용하기
Webpack 4부터는 SplitChunks 플러그인을 사용하여 코드 스플리팅을 구현할 수 있습니다. 다음은 예시 코드입니다:
// webpack.config.js
module.exports = {
// ...
optimization: {
splitChunks: {
chunks: 'all',
},
},
};
위 설정은 모든 청크에 대해 공통 의존성을 분할합니다. 이렇게하면 중복 코드를 최소화하고 로드 속도를 향상시킬 수 있습니다.
3. 방법 3: 코드 분할 지점(Entry points) 사용하기
Webpack 5부터는 코드 분할을 위해 새로운 기능인 entry points를 사용할 수 있습니다. 다음은 예시 코드입니다:
// webpack.config.js
module.exports = {
// ...
entry: {
main: './src/main.js',
moduleA: './src/moduleA.js',
moduleB: './src/moduleB.js',
},
};
위 설정은 main, moduleA, moduleB 각각의 파일을 다른 청크로 분리합니다. 이렇게하면 각 모듈을 필요에 따라 로드할 수 있습니다.