Webpack과 CI/CD 최적화: 실무 가이드

안녕하세요!

오늘은 프론트엔드 개발자들이 실무에서 흔히 마주하는 Webpack 최적화와 CI/CD 파이프라인 최적화에 대해 다뤄보겠습니다.

프로젝트가 커질수록 빌드 속도와 배포 효율성이 점점 중요해지죠. 이번 글에서는 실용적인 코드와 함께 Webpack과 CI/CD를 최적화하는 방법을 소개합니다.

1. Webpack 최적화

Webpack은 프론트엔드에서 모듈 번들링을 담당하며, 개발자 경험(DX)을 크게 개선해줍니다.

하지만 프로젝트 규모가 커지면 빌드 속도가 느려지고 번들 크기가 커지는 문제가 발생하죠.

이를 해결하기 위해 Webpack 설정을 최적화할 필요가 있습니다.

1-1. Mode 설정

Webpack의 mode는 개발(development) 환경과 프로덕션(production) 환경을 구분해 빌드 설정을 조정합니다.

module.exports = {
  mode: process.env.NODE_ENV || "development", // production or development
  entry: "./src/index.js",
  output: {
    filename: "[name].[contenthash].js",
    path: __dirname + "/dist",
    clean: true, // 이전 번들 제거
  },
};

• development: 디버깅과 핫 리로드(Hot Module Replacement)에 최적화.

• production: 번들 크기를 줄이고 성능 최적화.

1-2. Tree Shaking 활성화

사용하지 않는 코드를 제거해 번들 크기를 줄이는 기술입니다.

ES6 모듈(import/export)을 사용하면 Tree Shaking이 기본 활성화됩니다.

설정 예시:

module.exports = {
  mode: "production",
  optimization: {
    usedExports: true, // 사용되지 않는 코드 제거
  },
};

주의점:

⚠️CommonJS(require) 모듈은 Tree Shaking이 작동하지 않으니 ES Modules를 사용하세요.

1-3. Code Splitting

코드 스플리팅은 파일을 여러 번들로 나눠 초기 로딩 속도를 개선합니다.

Dynamic Import 예시:

// 기존 방식: 모든 코드를 한 번에 불러옴
import { heavyFunction } from "./heavyModule";

// 코드 스플리팅: 필요한 시점에 모듈 로드
const loadHeavyFunction = async () => {
  const { heavyFunction } = await import("./heavyModule");
  heavyFunction();
};

Webpack 설정 예시:

module.exports = {
  optimization: {
    splitChunks: {
      chunks: "all", // 공통 모듈을 자동으로 분리
    },
  },
};

1-4. 이미지와 에셋 최적화

이미지 압축:
image-webpack-loader를 사용해 이미지를 자동으로 최적화합니다.

npm install image-webpack-loader --save-dev

Webpack 설정:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: "file-loader",
          },
          {
            loader: "image-webpack-loader",
            options: {
              mozjpeg: { progressive: true },
              optipng: { enabled: true },
            },
          },
        ],
      },
    ],
  },
};

1-5. Cache 설정

Webpack 캐싱을 통해 빌드 속도를 크게 단축할 수 있습니다.

module.exports = {
  output: {
    filename: "[name].[contenthash].js", // 캐싱을 위한 해시 추가
  },
  cache: {
    type: "filesystem", // 파일 시스템 캐싱
  },
};

2. CI/CD 파이프라인 최적화

CI/CD는 코드 변경 사항을 자동으로 테스트하고 배포하는 과정입니다.

최적화된 파이프라인은 개발 효율성과 배포 속도를 크게 개선합니다.

2-1. CI/CD 기본 구성

GitHub Actions 예시:

name: CI/CD Pipeline

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install Dependencies
        run: npm install

      - name: Run Build
        run: npm run build

      - name: Deploy to S3
        run: aws s3 sync ./dist s3://your-bucket-name --delete

2-2. 병렬화로 속도 향상

여러 작업(테스트, 빌드, 린트)을 병렬로 처리해 시간을 절약합니다.

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - run: npm run test

  lint:
    runs-on: ubuntu-latest
    steps:
      - run: npm run lint

2-3. Cache 활용

의존성 파일(node_modules)을 캐싱해 빌드 시간을 단축합니다.

GitHub Actions 캐시 설정:

- name: Cache Node Modules
  uses: actions/cache@v3
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

2-4. Build 환경 분리

테스트, 스테이징, 프로덕션 환경에 따라 빌드와 배포 설정을 분리하세요.

// .env.production
API_URL=https://api.production.com

// .env.development
API_URL=https://api.development.com

Webpack 설정:

const dotenv = require("dotenv");
dotenv.config();

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      "process.env.API_URL": JSON.stringify(process.env.API_URL),
    }),
  ],
};

2-5. 배포 자동화

CD(Continuous Deployment)를 활용해 빌드된 결과물을 자동 배포합니다.

Netlify Example:

Netlify는 CI/CD를 통합적으로 지원하며, 간단히 설정 가능합니다.

build:
  command: npm run build
  publish: dist

---

Webpack과 CI/CD 최적화는 개발 생산성과 사용자 경험 모두를 높이는 데 필수적인 과정입니다.


Webpack 최적화를 통해 빌드 속도를 높이고 번들 크기를 줄이세요.

CI/CD 파이프라인에서는 병렬화, 캐싱, 환경 분리를 통해 효율성을 극대화하세요.