Angular 청크 파일과 Node.js 제어 방식

1. Angular에서 청크 파일 생성 원리

Angular CLI는 Webpack을 기반으로 빌드하며, 코드 스플리팅을 통해 여러 청크 파일(예: chunk-{hash}.js)을 생성합니다. 이는 다음과 같은 이유로 발생합니다:

• 코드 스플리팅: 큰 JavaScript 번들을 여러 작은 파일로 나누어 초기 로드 시간을 줄임.
• 지연 로딩: Angular의 동적 임포트(import())를 사용한 모듈(예: 라우팅 모듈)은 별도의 청크 파일로 분리됨.
• 의존성 분리: 외부 라이브러리(예: Angular, RxJS)는 vendor.js 같은 별도 청크로 분리될 수 있음.

예: ng build 실행 시 dist 폴더에 다음 파일이 생성될 수 있음:

dist/
  main.js
  polyfills.js
  runtime.js
  chunk-abc123.js
  chunk-def456.js

2. Node.js에서 청크 파일 제어 가능 여부

Node.js 자체는 Angular의 빌드 프로세스를 직접 제어하지 않지만, 다음과 같은 방식으로 청크 파일을 간접적으로 제어하거나 관리할 수 있습니다:

1. Webpack 설정 조정 (Angular CLI 커스터마이징):
   • Angular CLI는 내부적으로 Webpack을 사용하므로, angular.json 또는 커스텀 Webpack 설정을 통해 청크 파일 생성을 제어할 수 있습니다.
   • 방법:
     • @angular-builders/custom-webpack 패키지를 설치해 Webpack 설정을 커스터마이징.
     • extra-webpack.config.js 파일에서 청크 파일 생성 전략을 수정:

       module.exports = {
         optimization: {
           splitChunks: {
             chunks: 'all', // 모든 청크를 최적화
             minSize: 30000, // 최소 30KB 이상 모듈만 청크로 분리
             maxInitialRequests: 3, // 초기 로드 시 최대 3개 청크 요청
             cacheGroups: {
               vendors: {
                 test: /[\\/]node_modules[\\/]/,
                 priority: -10,
                 name: 'vendor', // 외부 라이브러리를 단일 vendor 청크로 묶음
               },
               default: {
                 minChunks: 2,
                 priority: -20,
                 reuseExistingChunk: true,
               },
             },
           },
         },
       };

     • Angular CLI에서 커스텀 Webpack 설정 사용:

       ng add @angular-builders/custom-webpack

       angular.json에서 빌더를 custom-webpack:browser로 변경하고 설정 파일을 연결.
2. 청크 파일 수 최소화:
   • 지연 로딩 최적화: Angular 라우팅에서 불필요한 동적 임포트를 줄여 청크 파일 수를 감소.

     // app-routing.module.ts
     const routes: Routes = [
       { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) },
     ];

     • 필요한 모듈만 지연 로딩하도록 설계.
   • 번들 최적화: ng build --prod로 프로덕션 빌드 시 Webpack이 자동으로 청크를 최적화하지만, minSize와 같은 옵션으로 청크 크기를 조정 가능.
3. Node.js 서버에서 청크 파일 관리:
   • Node.js 서버(예: Express)에서 청크 파일을 동적으로 제공하거나 캐싱 제어 가능:

     const express = require('express');
     const app = express();
     const path = require('path');
     
     app.use('/assets', express.static('dist', {
       setHeaders: (res, filePath) => {
         if (filePath.endsWith('.js') || filePath.endsWith('.js.map')) {
           res.set('Cache-Control', 'public, max-age=31536000'); // 1년 캐싱
         }
       },
     }));
     
     app.listen(3000, () => console.log('Server running'));

   • 조건부 제공: 특정 조건(예: ?dev=1)에서만 청크 파일이나 소스 맵을 제공:

     app.get('/*.js.map', (req, res) => {
       if (req.query.dev === '1') {
         res.sendFile(path.join(__dirname, 'dist', req.path));
       } else {
         res.status(404).send('Not available');
       }
     });

4. 청크 파일 분석 및 최적화:
   • source-map-explorer 또는 webpack-bundle-analyzer를 사용해 청크 파일의 구성과 크기를 분석:

     npm install --save-dev source-map-explorer
     source-map-explorer dist/main.js

   • 분석 결과를 바탕으로 불필요한 모듈을 제거하거나 청크를 통합.

3. 청크 파일 과다 생성 문제 해결

"청크 파일이 많이 발생"하는 문제는 주로 과도한 코드 스플리팅이나 동적 임포트로 인해 발생합니다. 이를 줄이는 방법:

• 동적 임포트 최소화: 모든 모듈을 지연 로딩하지 말고, 필수 모듈은 초기 번들에 포함.
• SplitChunks 설정 최적화: Webpack의 splitChunks 설정에서 minSize를 늘리거나 maxInitialRequests를 줄여 청크 수 제한.
• 모듈 통합: 중복된 의존성을 단일 청크로 묶도록 cacheGroups 설정 조정.

4. AngularJS와의 비교

AngularJS는 Webpack 같은 현대적인 번들러를 기본적으로 사용하지 않으므로, 청크 파일 생성은 주로 수동으로 관리됩니다(예: Grunt, Gulp로 파일 분할). Angular는 CLI와 Webpack 덕분에 청크 파일 생성이 자동화되고 제어가 용이합니다. Node.js에서 AngularJS의 청크 파일을 제어하려면, 빌드 후 파일을 수동으로 관리하거나 서버 측에서 동적 로드를 구현해야 합니다.