[웹 최적화] 웹 페이지 번들 사이즈 줄이기

Minify

1. 주석 공백, 줄바꿈 등을 삭제하여 소스코드의 사이즈를 줄이는 것을 말합니다.
2. 가독성에는 문제가 생기지만, 단순히 불필요한 코드를 제거하는 것이므로 코드 구조는 변하지 않습니다.

// Before minification
function add(a, b) {
    return a + b;
}

// After minification
function add(a,b){return a+b;}

Uglify

1. 코드의 크기를 줄이는 것뿐만 아니라, 변수명 축약과 같은 난독화 과정을 포함합니다.
2. 코드를 읽기 어렵게 만들어서 보안성을 강화하는 동시에 파일 크기를 더 줄이기 위한 목적으로 사용됩니다.

// Before uglification
function addNumbers(a, b) {
    return a + b;
}

// After uglification
function a(b,c){return b+c;}

Tree Shaking

1. 자바스크립트 애플리케이션에서 사용되지 않는 코드를 제거하는 최적화 기법
2. 트리 쉐이킹은 주로 정적 분석을 통해 사용되지 않는 코드를 탐지하고 제거함으로서 번들 사이즈를 줄일 수 있게 됩니다.
3. 코드의 구조를 분석하여 어떤 부분이 사용되는지, 어떤 부분이 사용되지 않는지 파악하는 과정
4. ES6 모듈 시스템에서 import와 export 키워드를 통해 모듈 간 의존성을 명확하게 정의할 수 있기 때문에, 트리 쉐이킹은 이러한 의존성을 분석하여 사용되지 않는 코드를 쉽게 탐지할 수 있습니다.

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add } from './math.js';

console.log(add(2, 3));

function add(a, b) {
  return a + b;
}

console.log(add(2, 3));

Gzip (번들 압축)

1. Gzip은 데이터 중복을 제거하여 파일 크기를 줄입니다.
2. 일반적으로 LZ77 알고리즘과 허프만 코딩을 사용해 반복적인 데이터 패턴을 찾아내고, 이를 더 짧은 형태로 표현함으로써 압축합니다.

+-------------+      +--------------+      +------------+      +-----------------+
| 클라이언트 요청 | ---> | 압축 파일 전송  | --->  | 네트워크 전송 | ---> | 클라이언트 압축 해제 |   
+-------------+      +--------------+      +------------+      +-----------------+

• 클라이언트가 웹 페이지를 요청할 때, 헤더에 Accept-Encoding: gzip을 포함하여 서버가 Gzip으로 파일을 압축해 전송하도록 요청합니다.
• 서버는 요청된 파일을 Gzip으로 압축한 후, 헤더에 Content-Encoding: gzip을 포함하여 압축된 데이터를 전송합니다.

Code Splitting (코드 분할)

1. 웹 애플리케이션의 자바스크립트 파일을 하나의 큰 번들로 묶는 대신, 필요한 시점에만 특정 코드를 로드하여 초기 로딩 시간을 단축할 수 있습니다.

Code Splitting | 웹팩

 

• Entry Point Code Splitting:
  • 엔트리 포인트에서 애플리케이션을 여러 파일로 나누는 방식입니다. 웹팩(Webpack) 같은 번들러 도구에서 기본적으로 지원하는 방식이며, 애플리케이션의 각 기능이나 페이지별로 코드를 나눌 수 있습니다.
• Dynamic Import:
  • ES6의 import() 구문을 사용하여 특정 코드가 필요할 때 동적으로 모듈을 로드하는 방식입니다. 주로 라우팅 시스템에서 사용되어, 특정 페이지를 로드할 때 필요한 자바스크립트만 로드합니다.
• Vendor Splitting:
  • 외부 라이브러리(예: React, Lodash 등)와 같은 제3자 라이브러리를 별도의 번들로 분리하여 애플리케이션 코드와 독립적으로 로드할 수 있게 합니다. 이를 통해 외부 라이브러리를 변경하지 않는 한, 브라우저가 이를 캐싱해 재사용할 수 있습니다.

React에서의 Dynamic Import를 이용한 Code Splitting

import { HashRouter as Router, Route, Routes } from 'react-router-dom';

import Home from './pages/Home/Home';
import Search from './pages/Search/Search';

import NavBar from './components/NavBar/NavBar';
import Footer from './components/Footer/Footer';

import './App.css';

const App = () => {
  return (
    <Router>
      <NavBar />
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/search" element={<Search />} />
        </Routes>
      </Suspense>
      <Suspense>
        <Footer />
      </Suspense>
    </Router>
  );
};

export default App;

위와 같은 코드를 React의 기능을 통해 Dynamic Import하여 Code Splitting을 진행합니다.

Webpack 환경에서 Script 사이즈 줄이기

Tree Shaking

Tree Shaking | 웹팩

1. Webpack은 기본적으로 Production 환경에서의 번들링에는 Tree Shaking과정을 포함합니다.
2. 하지만 안정적으로 Tree Shaking을 하기 위해선 Side Effect에 유의해야 합니다.
3. 웹팩 공식문서의 문장은 다음과 같습니다. 
4. { "name": "your-project", "sideEffects": false }
5. 100% ESM 모듈에서는 사이드 이펙트를 쉽게 식별할 수 있습니다. 그러나 우리는 아직 거기까지는 도달하지 않았으므로, 도달하기 까지는 코드의 "순수성"에 대한 힌트를 webpack 컴파일러에 제공해야 합니다.
6. Package.json에 sideEffects 값을 false로 해줌으로서 사용하지 않는 export를 완전히 제거한다는 것을 명시할 수 있습니다.

Terser?

GitHub - terser/terser: 🗜 JavaScript parser, mangler and compressor toolkit for ES6+

1. Terser는 Minify와 Uglify 도구입니다.
2. Terser는 ES6(ECMAScript 2015)와 그 이후 버전의 최신 자바스크립트 문법을 지원합니다. 최신 모듈 시스템, 화살표 함수, 템플릿 리터럴 등 다양한 최신 자바스크립트 기능을 다룰 수 있습니다.

Webpack에서의 Terser

TerserWebpackPlugin | 웹팩

1. webapck 5 버전에는 기본적으로 탑재되어 있습니다. 미만 버전에서는 Terser 플러그인을 이용하여 Minify와 Uglify을 진행할 수 있습니다.
2. optimization: { minimizer: [new TerserPlugin()] }

Webpack 환경에서 CSS 파일 사이즈 줄이기

CssMinimizerPlugin를 사용하여 css파일 용량 줄이기

1. 우선 mini-css-extract-plugin 을 통해 CSS를 분리해줍니다.
2. 그리고 mini-css-extract-plugin 플러그인을 통해 분리된 CSS파일의 용량을 줄일 수 있습니다. npm install --save-dev mini-css-extract-plugin

   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   
   module.exports = {
     plugins: [new MiniCssExtractPlugin()],
     module: {
       rules: [
         {
           test: /\\.css$/i,
           use: [MiniCssExtractPlugin.loader, "css-loader"],
         },
       ],
     },
   };
   

3. ‘…’ 은 기존 webpack 5에 기본값으로 포함된 minimizer값(Terser 등)을 사용합니다.CssMinimizerPlugin을 사용하여 css크기는 다음과 같이 줄었습니다.
4. optimization: { minimizer: ['...', new CssMinimizerPlugin()] }

MiniCssExtractPlugin | 웹팩

 

Webpack 환경에서 gzip을 이용하여 압축하기

1. compression-webpack-plugin을 통해서 webpackt설정에서 쉽게 bundle.js를 압축할 수 있습니다.

   const CompressionPlugin = require("compression-webpack-plugin");
   
   module.exports = {
     plugins: [new CompressionPlugin()],
   };
   

2. github page와 cloudFront와 같은 호스팅 서비스에서는 따로 설정하지 않아도 됩니다. 기본적으로 요청의 Header값에 Accept-Encoding: gzip을 포함하고, gz파일이 있다면 이 파일을 응답으로 보내줍니다.
3. cloudFront의 경우 gzip 설정 압축을 통해서 gz파일이 없더라도 압축파일을 만들어 배포가 됩니다

GitHub - webpack-contrib/compression-webpack-plugin: Prepare compressed versions of assets to serve them with Content-Encoding