14. 효율적인 코드 분할 - 3

Vendor 코드 분리

웹팩(Webpack)을 사용하는 프로젝트에서 Vendor 코드 분리는 애플리케이션의 성능을 최적화하는 데 중요한 역할을 합니다. Vendor 코드란 주로 라이브러리와 프레임워크 등과 같이 변경이 적고 자주 사용되는 외부 라이브러리를 말합니다. 이러한 Vendor 코드를 분리함으로써 브라우저가 새로운 버전의 애플리케이션을 로딩할 때 중복 다운로드를 피하고 캐시를 효과적으로 활용할 수 있습니다.

1. Vendor 코드의 중요성

Vendor 코드는 주로 다음과 같은 특징을 가지고 있습니다.

• 변경이 적음: Vendor 코드는 상대적으로 자주 변경되지 않습니다. 예를 들어, React, Vue, lodash와 같은 라이브러리는 프로젝트의 수명 주기 동안 상대적으로 변경이 적습니다.
• 자주 사용됨: Vendor 코드는 애플리케이션 전체에서 자주 사용되는 라이브러리이므로 이를 효율적으로 관리하는 것이 중요합니다.

2. Vendor 코드 분리의 장점

2.1. 브라우저 캐싱 최적화

Vendor 코드를 별도의 파일로 분리하면 이 파일은 변경이 적고 자주 사용되므로 브라우저는 해당 파일을 캐싱하여 재사용할 가능성이 높습니다. 이로 인해 초기 로딩 속도가 향상되고 대역폭 사용이 최소화됩니다.

2.2. 변경 사항의 영향 최소화

애플리케이션 코드와 Vendor 코드를 분리하면 Vendor 코드를 업데이트할 때 애플리케이션 코드에 영향을 최소화할 수 있습니다. 사용 중인 라이브러리의 새로운 버전이 나왔을 때, Vendor 코드만 업데이트하면 됩니다.

2.3. 병렬 로딩 가능

Vendor 코드와 애플리케이션 코드가 분리되면 브라우저는 병렬로 여러 파일을 다운로드할 수 있습니다. 이는 초기 로딩 시간을 단축시키고 성능을 향상시킵니다.

3. Vendor 코드 분리 방법

웹팩을 사용하여 Vendor 코드를 분리하려면 다음과 같은 방법을 사용할 수 있습니다.

3.1. 웹팩의 SplitChunks 플러그인 활용

웹팩에서는 SplitChunks 플러그인을 사용하여 Vendor 코드를 분리할 수 있습니다. 이 플러그인은 코드 분할(Code Splitting)을 통해 공통 모듈을 별도의 청크로 분리하는데 사용됩니다.

웹팩 구성 파일에서 optimization.splitChunks 설정을 추가합니다.

// webpack.config.js

module.exports = {
  // ... 다른 설정
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

 

이렇게 하면 node_modules 디렉터리에서 가져온 모든 모듈이 vendors.js로 분리됩니다.

3.2. 동적 임포트 활용

웹팩 2 이상에서는 동적 임포트(dynamic import)를 사용하여 Vendor 코드를 분리하는 것도 가능합니다. 이를 이용하면 원하는 시점에 모듈을 로딩할 수 있습니다.

// app.js

document.getElementById('loadVendorButton').addEventListener('click', () => {
  import(/* webpackChunkName: "vendors" */ './vendors').then((vendors) => {
    // vendors 모듈 사용
    vendors.init();
  });
});

 

위의 코드에서 webpackChunkName 주석을 통해 해당 청크의 이름을 명시할 수 있습니다.

4. 결론

Vendor 코드를 효과적으로 분리하면 애플리케이션의 초기 로딩 속도를 향상시키고 브라우저 캐싱을 최적화할 수 있습니다. 웹팩의 SplitChunks 플러그인이나 동적 임포트를 적절히 활용하여 프로젝트의 성능을 개선하세요.