웹 개발 실무 기술 A to Z # 13 - 웹 애플리케이션 성능 최적화: 코드 스플리팅, Gzip 압축, 웹팩 최적화

웹 개발 실무 기술 A to Z

고성능 웹 애플리케이션을 구축하려면 페이지 로딩 속도 및 데이터 전송 효율성을 최적화해야 합니다.
✔️ 코드 스플리팅 (Code Splitting) → 불필요한 코드 로딩 방지
✔️ Gzip 압축 (Compression) → 전송 데이터 크기 감소
✔️ 웹팩(Webpack) 최적화 → 프론트엔드 번들 크기 최소화

이번 글에서는 프론트엔드 및 백엔드 성능 최적화 방법을 소개하겠습니다.

---

1. 웹 애플리케이션 성능 최적화의 필요성

✔️ 초기 로딩 속도 개선 → 사용자 이탈률 감소
✔️ 네트워크 트래픽 절감 → 비용 및 서버 부하 감소
✔️ 더 빠른 사용자 경험 제공 → SEO(검색 엔진 최적화)에도 긍정적인 영향

✅ 최적화를 적용하면 페이지 로딩 속도가 빨라지고 사용자 경험이 향상됨!

---

2. 코드 스플리팅 (Code Splitting)

2-1. 코드 스플리팅이란?

✔️ 초기 로딩 시 불필요한 코드 로드를 방지
✔️ 필요한 코드만 동적으로 로딩하여 성능 향상
✔️ React, Vue, Webpack 등에서 지원

2-2. React에서 코드 스플리팅 적용

(1) React.lazy() 및 Suspense 사용

import React, { Suspense, lazy } from "react";

const LazyComponent = lazy(() => import("./LazyComponent"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

✅ 필요할 때만 해당 컴포넌트를 로딩하여 성능 최적화 가능!

(2) React Router에서 코드 스플리팅 적용

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Suspense, lazy } from "react";

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

✅ 라우트 기반 코드 스플리팅을 통해 초기 번들 크기 감소!

---

3. Gzip 압축을 활용한 최적화

3-1. Gzip 압축이란?

✔️ HTML, CSS, JavaScript 파일을 압축하여 전송 속도 향상
✔️ 브라우저가 압축된 파일을 자동으로 해제하여 표시
✔️ 서버 및 CDN에서 지원 (Nginx, Express, Apache 등)

3-2. Express에서 Gzip 압축 적용

npm install compression

const compression = require("compression");
const express = require("express");

const app = express();
app.use(compression());

app.get("/", (req, res) => {
  res.send("Hello, Gzip Compression!");
});

app.listen(3000, () => console.log("Server running on port 3000"));

✅ Gzip을 활성화하면 API 응답 크기가 줄어들어 네트워크 성능이 향상됨!

---

3-3. Nginx에서 Gzip 압축 적용

server {
    listen 80;
    server_name example.com;

    location / {
        gzip on;
        gzip_types text/html text/css application/javascript;
        gzip_vary on;
    }
}

✅ Nginx에서도 Gzip을 활성화하여 정적 파일을 압축 가능!

---

4. 웹팩(Webpack) 최적화

4-1. 웹팩(Webpack)이란?

✔️ 자바스크립트, CSS, 이미지 등을 번들링하여 최적화
✔️ 코드 스플리팅, 트리 쉐이킹(Tree Shaking) 등의 기능 지원
✔️ React, Vue 프로젝트에서 가장 많이 사용

---

4-2. 웹팩 최적화 방법

(1) 코드 압축 (TerserPlugin 사용)

npm install terser-webpack-plugin --save-dev

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

✅ 코드를 압축하여 번들 크기 감소!

---

(2) CSS 압축 (MiniCssExtractPlugin 사용)

npm install mini-css-extract-plugin css-minimizer-webpack-plugin --save-dev

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
  },
};

✅ CSS 파일 크기를 최소화하여 로딩 속도 향상!

---

(3) 트리 쉐이킹 (Tree Shaking)

✔️ 사용되지 않는 코드를 제거하여 번들 크기를 줄이는 기술
✔️ ES6 모듈(import/export)을 사용하면 자동 적용

// utils.js
export function usedFunction() {
  console.log("This function is used!");
}

export function unusedFunction() {
  console.log("This function is NOT used!");
}

// main.js
import { usedFunction } from "./utils";

usedFunction();

✅ 웹팩에서 자동으로 unusedFunction을 제거하여 최적화!

---

5. 성능 최적화 적용 전후 비교

5-1. 적용 전

• 초기 번들 크기가 커서 페이지 로딩 속도가 느림
• 압축되지 않은 파일로 인해 네트워크 트래픽 증가
• 모든 코드를 한 번에 로딩하여 불필요한 리소스 사용

5-2. 적용 후

✔️ 코드 스플리팅 적용 → 필요한 코드만 동적으로 로딩하여 최적의 로딩 속도 유지
✔️ Gzip 압축 적용 → 데이터 크기 감소로 전송 속도 향상
✔️ 웹팩 최적화 적용 → 불필요한 코드 제거로 프론트엔드 성능 극대화

✅ 최적화를 적용하면 웹 애플리케이션이 훨씬 빠르고 효율적으로 동작 가능!

---

6. 마무리 및 다음 글 예고

이번 글에서는 웹 애플리케이션 성능 최적화를 위한 코드 스플리팅, Gzip 압축, 웹팩 최적화 방법을 살펴봤습니다.
다음 글에서는 **SEO 최적화 및 웹 접근성 개선 (Next.js, Lighthouse, ARIA 적용)**을 소개하겠습니다.

다음 글 예고: "SEO 최적화 및 웹 접근성 개선 – Next.js, Lighthouse, ARIA 적용" 🚀