이 글은 IT와 번역가 David가 안토니 맥스(Anthony Max)의 <How to Reduce Web Application Bundle Size?>를 번역한 것입니다. 필자는 6년 이상의 웹 개발 경력을 가지고 있으며, 현재 HMPL 템플릿 언어와 Cample 프레임워크를 개발 중입니다. 이번 글에서는 웹 애플리케이션의 번들 크기를 줄이는 방법을 설명합니다.

이번 글은 필자의 허락을 받고 번역하였으며, 각주(*)는 ‘번역자주’로 표시되었습니다.

기능 추가가 느림을 초래할 수 있으며, 초기 로딩 시간이 10~30초 이상 소요될 수 있습니다. 따라서 이를 해결하기 위한 조언과 팁을 제공합니다.

플랫폼 의존성

웹 애플리케이션의 크기를 줄이기 위해 기본 플랫폼에서 시작해야 합니다. 프레임워크나 라이브러리를 통합하고 기능 설정을 변경하여 성능을 개선할 수 있습니다.

같은 라이브러리를 사용하면 더 나은 결과를 얻을 수 있으며, 서버 응답 캐싱이나 이미지 애드온과 같은 기능을 활용할 수 있습니다.

CSR에서 SSR(SSG, ISG 등)로 이관

번들 크기를 줄이는 방법 중 하나는 페이지 렌더링을 클라이언트에서 서버로 이동하는 것입니다. 이를 통해 HTML 및 JS 파일의 크기를 줄일 수 있습니다.

index.html

                
<%= data.title %>
    
<%= data.content %>

server.js

const express = require('express');const app = express();const PORT = 3000;// EJS를 템플릿 엔진으로 설정app.set('view engine', 'ejs');// 샘플 데이터const data = {    title: '서버 사이드 렌더링 예제',    content: '이것은 Node.js와 EJS를 사용한 서버 사이드 렌더링의 예시입니다.'};// 루트 정의app.get('/', (req, res) => {    // EJS를 사용하여 HTML 렌더링    res.render('index', { data });});// 서버 시작app.listen(PORT, () => {    console.log(`서버가 http://localhost:${PORT}에서 실행 중입니다`);});

EJS와 Express를 통해 모든 것을 서버에서 렌더링할 수 있으며, Next.js를 사용하면 동적 페이지도 가능합니다. 그러나 기존 클라이언트 측 프레임워크를 사용하는 경우 재구성이 어려울 수 있습니다.

HMPL.js로 구현하기

이 모듈은 페이지 인덱싱은 할 수 없지만 다양한 웹 애플리케이션에 연결할 수 있습니다.

index.html

client.js

const templateFn = hmpl.compile(  `
      Click!      
Clicks: {{ src: "/api/clicks", after: "click:#btn" }}
  
`);const clicker = templateFn(({ request: { event } }) => ({  body: JSON.stringify({ action: event.target.getAttribute("data-action") })})).response;document.querySelector("#app").append(clicker);

모듈을 활성화하거나 비활성화할 수 있어 유연하게 사용할 수 있습니다.

번들 크기 감소를 위한 일반적 방법

1. 불필요한 의존성 제거

사용하지 않는 패키지를 삭제하여 번들 크기를 줄일 수 있습니다. depcheck로 종속성을 분석할 수 있습니다.

npm install depcheckdepcheck /path/to/my/project

또한 npm prune 명령어로 불필요한 패키지를 제거할 수 있습니다.

2. 작은 크기의 미디어 파일 사용

이미지 및 비디오 크기를 줄이면 전체 애플리케이션 크기를 줄일 수 있습니다.

3. CDN 사용

외부 모듈을 CDN에서 불러오는 방법을 사용하면 효율적입니다.

4. 코드 분할

동적으로 모듈을 불러오는 방식으로 코드를 분할할 수 있습니다.

document.getElementById('loadButton').addEventListener('click', () => {    import('./module.js')        .then(module => {            module.default();        })        .catch(err => {            console.error('모듈 로딩 오류:', err);        });});

5. 코드 압축

코드를 압축하면 번들 크기를 줄일 수 있습니다. Uglify.js를 사용하는 것이 좋은 방법입니다.

결론

위의 방법들은 대부분의 웹 애플리케이션에 적용할 수 있으며, 실무에서 유용한 조언입니다. 이러한 방법들을 통해 웹사이트의 로딩 속도를 개선할 수 있습니다. 감사드립니다.

*DRY(Don’t Repeat Yourself): 중복 최소화 원칙

*KISS(Keep It Simple, Stupid): 단순함 추구 원칙

<원문>

How to Reduce Web Application Bundle Size?