사용하지 않는 코드 삭제하기

Houssein Djirdeh

이 Codelab에서는 사용되지 않고 불필요한 종속 항목을 삭제하여 다음 애플리케이션의 성능을 개선합니다.

측정

최적화를 추가하기 전에 항상 웹사이트의 실적을 측정하는 것이 좋습니다.

• 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면을 누릅니다.

좋아하는 새끼 고양이를 클릭해 보세요. 이 애플리케이션에서는 Firebase의 실시간 데이터베이스가 사용되므로 점수가 실시간으로 업데이트되고 애플리케이션을 사용하는 다른 모든 사용자와 동기화됩니다. 🐈

1. `Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
2. 네트워크 탭을 클릭합니다.
3. 캐시 사용 중지 체크박스를 선택합니다.
4. 앱을 새로고침합니다.

이 간단한 애플리케이션을 로드하기 위해 거의 1MB에 달하는 JavaScript가 전송됩니다.

DevTools에서 프로젝트 경고를 살펴봅니다.

• 콘솔 탭을 클릭합니다.
• Filter 입력 옆의 수준 드롭다운에서 Warnings가 사용 설정되어 있는지 확인합니다.

• 표시된 경고를 살펴봅니다.

이 애플리케이션에서 사용되는 라이브러리 중 하나인 Firebase는 개발자에게 전체 패키지가 아닌 사용되는 구성요소만 가져오라고 알리는 경고를 제공하여 선한 사마리아인의 역할을 하고 있습니다. 즉, 더 빨리 로드되도록 이 애플리케이션에서 삭제할 수 있는 미사용 라이브러리가 있습니다.

특정 라이브러리가 사용되지만 더 간단한 대안이 있을 수도 있는 경우도 있습니다. 필요하지 않은 라이브러리를 삭제하는 개념은 이 튜토리얼의 뒷부분에서 살펴봅니다.

번들 분석

애플리케이션에는 두 가지 주요 종속 항목이 있습니다.

• Firebase: iOS, Android 또는 웹 애플리케이션에 여러 가지 유용한 서비스를 제공하는 플랫폼입니다. 여기서 실시간 데이터베이스는 각 새끼 고양이의 정보를 실시간으로 저장하고 동기화하는 데 사용됩니다.
• Moment.js: JavaScript에서 날짜를 더 쉽게 처리할 수 있는 유틸리티 라이브러리입니다. 각 새끼 고양이의 생년월일은 Firebase 데이터베이스에 저장되며 moment을 사용하여 나이를 주 단위로 계산합니다.

단 두 개의 종속 항목이 어떻게 거의 1MB의 번들 크기에 기여할 수 있을까요? 그 이유는 종속 항목마다 자체 종속 항목이 있을 수 있으므로 종속 항목 '트리'의 모든 깊이/브랜치를 고려하면 두 개가 훨씬 넘기 때문입니다. 종속 항목이 많이 포함되면 애플리케이션이 비교적 빠르게 커질 수 있습니다.

번들러를 분석하여 상황을 더 잘 파악합니다. 이를 지원하는 다양한 커뮤니티 제작 도구(예: webpack-bundle-analyzer)가 있습니다.

이 도구의 패키지는 이미 앱에 devDependency로 포함되어 있습니다.

"devDependencies": {
  //...
  "webpack-bundle-analyzer": "^2.13.1"
},

즉, webpack 구성 파일에서 직접 사용할 수 있습니다. webpack.config.js의 맨 처음에 가져옵니다.

const path = require("path");

//...
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

이제 plugins 배열 내 파일 끝에 플러그인으로 추가합니다.

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

애플리케이션이 새로고침되면 앱 자체 대신 전체 번들의 시각화가 표시됩니다.

새끼 고양이 🐱를 보는 것만큼 귀엽지는 않지만 매우 유용합니다. 패키지 위로 마우스를 가져가면 크기가 세 가지 방식으로 표시됩니다.

webpack-bundle-analyzer 도구를 사용하면 번들의 많은 부분을 차지하는 미사용 패키지나 불필요한 패키지를 더 쉽게 식별할 수 있습니다.

사용하지 않는 패키지 삭제

시각화에서 firebase 패키지는 데이터베이스 외에도 훨씬 더 많은 항목으로 구성되어 있음을 알 수 있습니다. 다음과 같은 추가 패키지가 포함됩니다.

• firestore
• auth
• storage
• messaging
• functions

이것들은 모두 Firebase에서 제공하는 놀라운 서비스이지만 (자세한 내용은 문서 참조) 애플리케이션에서 사용되지 않으므로 모두 가져올 필요가 없습니다.

webpack.config.js에서 변경사항을 되돌려 애플리케이션을 다시 확인합니다.

• 플러그인 목록에서 BundleAnalyzerPlugin를 삭제합니다.

plugins: [
  //...
  new BundleAnalyzerPlugin()
];

• 이제 파일 상단에서 사용되지 않는 가져오기를 삭제합니다.

const path = require("path");

//...
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

이제 애플리케이션이 정상적으로 로드됩니다. src/index.js를 수정하여 Firebase 가져오기를 업데이트합니다.

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

이제 앱이 새로고침될 때 DevTools 경고가 표시되지 않습니다. DevTools Network 패널을 열면 번들 크기가 확실히 줄어든 것을 확인할 수 있습니다.

번들 크기의 절반 이상이 삭제되었습니다. Firebase는 다양한 서비스를 제공하며 개발자는 실제로 필요한 서비스만 포함할 수 있습니다. 이 애플리케이션에서는 firebase/database만 사용하여 모든 데이터를 저장하고 동기화했습니다. 각 서비스의 API 노출 영역을 설정하는 firebase/app 가져오기는 항상 필요합니다.

lodash와 같은 다른 여러 인기 라이브러리도 개발자가 패키지의 여러 부분을 선택적으로 가져올 수 있습니다. 많은 작업을 하지 않고도 애플리케이션에서 사용 중인 라이브러리만 포함하도록 라이브러리 가져오기를 업데이트하면 성능이 크게 개선될 수 있습니다.

번들 크기가 상당히 줄었지만 아직 할 일이 더 있습니다. 😈

불필요한 패키지 삭제

Firebase와 달리 moment 라이브러리의 일부를 가져오는 작업은 쉽지 않지만 완전히 삭제할 수는 있을까요?

귀여운 새끼 고양이의 생일은 Firebase 데이터베이스에 Unix 형식 (밀리초)으로 저장됩니다.

1970년 1월 1일 00:00(UTC) 이후 경과된 밀리초 수를 나타내는 특정 날짜와 시간의 타임스탬프입니다. 현재 날짜와 시간을 동일한 형식으로 계산할 수 있는 경우 각 새끼 고양이의 나이를 주 단위로 찾는 작은 함수를 구성할 수 있습니다.

항상 그렇듯이 따라 진행하면서 복사하여 붙여넣지 마세요. 먼저 src/index.js의 가져오기에서 moment를 삭제합니다.

import firebase from 'firebase/app';
import 'firebase/database';
import * as moment from 'moment';

데이터베이스의 값 변경을 처리하는 Firebase 이벤트 리스너가 있습니다.

favoritesRef.on("value", (snapshot) => { ... })

그 위에 특정 날짜로부터 경과한 주 수를 계산하는 작은 함수를 추가합니다.

const ageInWeeks = birthDate => {
  const WEEK_IN_MILLISECONDS = 1000 * 60 * 60 * 24 * 7;
  const diff = Math.abs((new Date).getTime() - birthDate);
  return Math.floor(diff / WEEK_IN_MILLISECONDS);
}

이 함수에서 현재 날짜 및 시간((new Date).getTime())과 생년월일(birthDate 인수, 이미 밀리초 단위) 사이의 차이(밀리초)를 계산하고 단일 주의 밀리초 수로 나눕니다.

마지막으로 moment의 모든 인스턴스는 이 함수를 대신 활용하여 이벤트 리스너에서 삭제할 수 있습니다.

favoritesRef.on("value", (snapshot) => {
  const { kitties, favorites, names, birthDates } = snapshot.val();
  favoritesScores = favorites;

  kittiesList.innerHTML = kitties.map((kittiePic, index) => {
    const birthday = moment(birthDates[index]);

    return `
      <li>
        <img src=${kittiePic} onclick="favKittie(${index})">
        <div class="extra">
          <div class="details">
            <p class="name">${names[index]}</p>
            <p class="age">${moment().diff(birthday, 'weeks')} weeks old</p>
            <p class="age">${ageInWeeks(birthDates[index])} weeks old</p>
          </div>
          <p class="score">${favorites[index]} ❤</p>
        </div>
      </li>
    `})
});

이제 애플리케이션을 새로고침하고 네트워크 패널을 다시 살펴봅니다.

번들 크기가 다시 절반 이상 줄었어요!

결론

이 Codelab을 통해 특정 번들을 분석하는 방법과 사용하지 않거나 불필요한 패키지를 삭제하는 것이 매우 유용한 이유를 충분히 이해할 수 있습니다. 이 기법으로 애플리케이션 최적화를 시작하기 전에 대규모 애플리케이션에서는 훨씬 더 복잡해질 수 있다는 점을 알아두는 것이 중요합니다.

사용되지 않는 라이브러리 삭제와 관련하여 번들의 어떤 부분이 사용되고 어떤 부분이 사용되지 않는지 알아보세요. 어디에서도 사용되지 않는 것처럼 보이는 신비로운 패키지의 경우 한 걸음 물러서서 어떤 최상위 종속 항목에 필요한지 확인합니다. 서로 연결된 부분을 분리할 수 있는 방법을 찾아보세요.

불필요한 라이브러리 삭제는 조금 더 복잡할 수 있습니다. 팀과 긴밀하게 협력하여 코드베이스의 일부를 간소화할 수 있는지 확인하는 것이 중요합니다. 이 애플리케이션에서 moment를 삭제하는 것이 매번 해야 하는 일처럼 보일 수 있지만 처리해야 하는 시간대와 다른 언어가 있다면 어떻게 해야 할까요? 또는 더 복잡한 날짜 조작이 있다면 어떨까요? 날짜/시간을 조작하고 파싱할 때는 매우 까다로울 수 있으며 moment 및 date-fns와 같은 라이브러리는 이를 크게 간소화합니다.

모든 것은 절충점이 있으며 서드 파티 라이브러리를 사용하는 대신 맞춤 솔루션을 출시하는 데 드는 복잡성과 노력이 그만한 가치가 있는지 판단하는 것이 중요합니다.