JavaScript 번들 크기를 줄이고 성능을 향상시키는 검증된 기술

베스트셀러 작가로서 Amazon에서 제 책을 탐색해 보시기 바랍니다. Medium에서 저를 팔로우하고 지지를 표시하는 것을 잊지 마세요. 감사합니다! 당신의 지원은 세상을 의미합니다!

개발자로서 저는 JavaScript 번들 크기를 최적화하는 것이 빠르고 효율적인 웹 애플리케이션을 만드는 데 중요하다는 것을 배웠습니다. 수년에 걸쳐 나는 지속적으로 우수한 결과를 낳는 몇 가지 기술을 발견했습니다. JavaScript 번들 크기를 줄이는 6가지 강력한 방법에 대한 내 경험과 통찰력을 공유하겠습니다.

코드 분할은 내 개발 과정의 판도를 바꿔 놓았습니다. 동적 가져오기를 사용하여 요청 시 JavaScript 모듈을 로드할 수 있었고 초기 로드 시간이 크게 단축되었습니다. 이 접근 방식은 복잡한 기능 세트가 있는 대규모 애플리케이션에 특히 유용했습니다. 다음은 코드 분할을 구현하는 방법의 예입니다.

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);

이 예에서는 초기 번들 크기를 작게 유지하면서 사용자가 버튼을 클릭할 때만 무거운 모듈이 로드됩니다.

나무 흔들기는 제가 자주 사용하는 또 다른 기술입니다. ES6 모듈과 Webpack 또는 Rollup과 같은 빌드 도구를 활용하면 번들에서 데드 코드를 제거할 수 있습니다. 이 프로세스는 사용되지 않은 내보내기를 제거하여 최종 번들 크기를 크게 줄입니다. 다음은 효과적인 트리 쉐이킹을 활성화하기 위해 코드를 구성하는 방법에 대한 간단한 예입니다.

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

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

usedFunction();

이 경우 트리 쉐이킹을 지원하는 도구와 함께 번들링할 경우 사용하지 않는 함수는 최종 번들에서 제외됩니다.

최소화는 내 최적화 툴킷의 표준 관행입니다. 저는 UglifyJS나 Terser 같은 도구를 사용하여 공백을 제거하고, 변수 이름을 줄이고, 코드를 최적화합니다. 이 프로세스를 사용하면 기능을 변경하지 않고도 파일 크기를 크게 줄일 수 있습니다. 축소 전후의 예는 다음과 같습니다.

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

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);

압축은 제가 항상 구현하는 또 다른 중요한 기술입니다. 서버에서 Gzip 또는 Brotli 압축을 활성화하면 파일 전송 크기를 크게 줄일 수 있습니다. 이는 일반적으로 서버 수준에서 구성됩니다. 예를 들어 Apache .htaccess 파일에서는 다음과 같습니다.

<ifmodule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
</ifmodule>

지연 로딩은 성능 최적화 분야에서 강력한 도구였습니다. 중요하지 않은 리소스가 필요할 때까지 로드를 연기함으로써 초기 페이지 로드 시간을 크게 향상시킬 수 있습니다. 다음은 이미지에 대한 지연 로딩을 구현하는 방법의 예입니다.

<img  src="/static/imghwm/default1.png" data-src="placeholder.jpg" class="lazy" data- alt="JavaScript 번들 크기를 줄이고 성능을 향상시키는 검증된 기술" >



<p>This code uses the Intersection Observer API to load images only when they're about to enter the viewport.</p>

<p>Lastly, I always perform bundle analysis to visualize my bundle composition and identify optimization opportunities. Tools like webpack-bundle-analyzer have been invaluable in this process. Here's how I typically set it up in my Webpack configuration:<br>
</p>

<pre class="brush:php;toolbar:false">const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ... other webpack config
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

이렇게 하면 큰 종속성과 잠재적인 최적화 영역을 식별하는 데 도움이 되는 대화형 트리맵이 생성됩니다.

이러한 기술은 JavaScript 번들 크기를 지속적으로 줄여 웹 애플리케이션의 로드 시간을 단축하고 성능을 향상시키는 데 도움이 되었습니다. 그러나 최적화는 지속적인 프로세스라는 점에 유의하는 것이 중요합니다. 웹 기술이 발전함에 따라 새로운 최적화 기술이 등장하므로 최신 상태를 유지하고 그에 따라 전략을 조정하는 것이 중요합니다.

제가 특히 어려웠던 점 중 하나는 최적화와 개발 속도의 균형을 맞추는 것입니다. 공격적인 최적화로 인해 코드베이스를 유지 관리하거나 디버깅하기가 더 어려워질 수 있습니다. 예를 들어, 축소는 프로덕션에는 좋지만 디버깅을 더 어렵게 만들 수 있습니다. 이것이 바로 제가 디버깅 목적으로 사용할 수 있는 소스 맵을 항상 확보하는 이유입니다.

제가 직면한 또 다른 과제는 타사 라이브러리를 다루는 것입니다. 자체 코드를 최적화할 수 있지만 타사 종속 항목이 사전 번들로 제공되는 경우가 많아 번들 크기가 크게 늘어날 수 있습니다. 그러한 경우에는 더 가벼운 대체 라이브러리를 찾거나 동적 가져오기와 같은 기술을 사용하여 필요할 때만 이러한 라이브러리를 로드하는 것이 도움이 된다는 것을 알았습니다.

다양한 애플리케이션이 다양한 최적화 전략을 통해 이점을 얻을 수 있다는 점도 언급할 가치가 있습니다. 예를 들어 단일 페이지 애플리케이션(SPA)은 코드 분할 및 지연 로딩에서 더 많은 이점을 얻을 수 있는 반면, 더 단순한 다중 페이지 사이트는 축소 및 압축에 더 중점을 둘 수 있습니다.

이러한 최적화를 구현할 때는 그 영향을 측정하는 것이 중요합니다. 나는 최적화를 구현하기 전후에 항상 성능 감사를 실행하여 원하는 효과가 있는지 확인합니다. Lighthouse 또는 WebPageTest와 같은 도구는 이 점에서 매우 중요했습니다.

더 복잡한 예를 통해 이러한 기술 중 일부를 더 자세히 살펴보겠습니다.

React 애플리케이션에서 코드 분할을 위해 React.lazy와 Suspense를 사용할 수 있습니다.

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);

이 설정을 사용하면 각 경로를 별도로 로드하여 초기 번들 크기를 줄일 수 있습니다.

트리 쉐이킹의 경우 ES6 모듈 구문에서 가장 잘 작동한다는 점에 유의하는 것이 중요합니다. 다음은 트리 쉐이킹을 최대한 활용하기 위해 유틸리티 모듈을 구성하는 방법에 대한 예입니다.

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

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

usedFunction();

이 경우 빼기 및 나누기 기능은 애플리케이션의 다른 곳에서 사용되지 않으면 최종 번들에서 흔들립니다.

최신 빌드 도구에는 축소와 관련하여 기본적으로 이 단계가 포함되는 경우가 많습니다. 그러나 때로는 설정을 조정하여 더 나은 결과를 얻을 수도 있습니다. 예를 들어 Terser의 경우 다음과 같은 구성을 사용할 수 있습니다.

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

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);

이 구성은 코드를 축소할 뿐만 아니라 프로덕션 빌드에 도움이 될 수 있는 콘솔 문도 제거합니다.

압축의 경우 서버측 구성이 중요하지만 웹팩 플러그인을 사용하여 자산을 사전 압축할 수도 있습니다. CompressionWebpackPlugin은 다음과 같은 경우에 적합합니다.

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);

이 플러그인은 원본 자산과 함께 자산의 gzip 버전을 생성하므로 서버가 해당 자산을 사용하도록 구성된 경우 콘텐츠를 더욱 빠르게 전달할 수 있습니다.

지연 로딩은 단순한 이미지 이상으로 확장될 수 있습니다. 즉시 필요하지 않은 모든 리소스에 이를 적용할 수 있습니다. 예를 들어, 무거운 타사 라이브러리를 지연 로드할 수 있습니다.

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

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

usedFunction();

이렇게 하면 사용자가 차트를 보고 싶어할 때만 차트 라이브러리가 로드되어 초기 번들을 간결하게 유지합니다.

번들 분석과 관련하여 얻은 통찰력은 놀라운 최적화로 이어질 수 있습니다. 예를 들어, 날짜 형식 지정 라이브러리가 내 번들에 상당한 비중을 추가하고 있다는 사실을 발견한 적이 있습니다. 특정 사용 사례를 다루는 몇 가지 사용자 정의 기능으로 교체함으로써 번들 크기를 상당히 줄일 수 있었습니다.

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

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);

번들 분석을 통해 정보를 얻은 이러한 종류의 타겟 최적화는 상당한 성능 개선으로 이어질 수 있습니다.

결론적으로 JavaScript 번들 크기를 최적화하는 것은 애플리케이션의 구조와 요구 사항을 잘 이해해야 하는 다면적인 프로세스입니다. 코드 분할, 트리 쉐이킹, 축소, 압축, 지연 로딩, 번들 분석 등의 기술을 구현함으로써 번들 크기를 크게 줄이고 애플리케이션 성능을 향상시킬 수 있습니다. 목표는 단순히 번들의 크기를 줄이는 것이 아니라 사용자에게 더 빠르고 효율적인 경험을 제공하는 것입니다. 웹에서 가능한 것의 한계를 계속 확장함에 따라 이러한 최적화 기술은 더욱 중요해질 것입니다.

---

101권

101 Books는 작가 Aarav Joshi가 공동 창립한 AI 기반 출판사입니다. 고급 AI 기술을 활용하여 출판 비용을 믿을 수 없을 정도로 낮게 유지합니다. 일부 도서의 가격은 $4만큼 저렴하여 모든 사람이 양질의 지식에 접근할 수 있습니다.

아마존에서 구할 수 있는 Golang Clean Code 책을 확인해 보세요.

업데이트와 흥미로운 소식을 계속 지켜봐 주시기 바랍니다. 책을 쇼핑할 때 Aarav Joshi를 검색해 더 많은 책을 찾아보세요. 제공된 링크를 이용하여 특별할인을 즐겨보세요!

우리의 창조물

저희 창작물을 꼭 확인해 보세요.

인베스터 센트럴 | 투자자 중앙 스페인어 | 중앙 독일 투자자 | 스마트리빙 | 시대와 메아리 | 수수께끼의 미스터리 | 힌두트바 | 엘리트 개발자 | JS 학교

---

우리는 중간에 있습니다

테크 코알라 인사이트 | Epochs & Echoes World | 투자자중앙매체 | 수수께끼 미스터리 매체 | 과학과 신기원 매체 | 현대 힌두트바

위 내용은 JavaScript 번들 크기를 줄이고 성능을 향상시키는 검증된 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!