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

이 Codelab에서는 다음과 같은 방법으로 다음 애플리케이션의 성능을 개선합니다. 불필요한 종속 항목을 삭제할 수 있습니다.

앱 스크린샷

측정

먼저 웹사이트 실적을 측정하기 전에 최적화가 추가됩니다.

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

이제 좋아하는 고양이를 클릭하세요. Firebase의 실시간 데이터베이스는 사용되기 때문에 점수가 실시간으로 업데이트되어 다른 모든 사람과 동기화될 수 있습니다. 🐈

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

원래 번들 크기: 992KB

이 간단한 애플리케이션을 로드하기 위해 약 1MB의 JavaScript가 제공되고 있습니다.

DevTools에서 프로젝트 경고를 살펴보세요.

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

경고 필터

  • 표시된 경고를 살펴보세요.

콘솔 경고

이 애플리케이션에서 사용하는 라이브러리 중 하나인 Firebase는 개발자들에게 리소스를 가져오지 않도록 경고하여 사용된 구성 요소만 할 수 있습니다. 다시 말해 로드하기 위해 이 애플리케이션에서 삭제할 수 있는 미사용 라이브러리 보다 빠르게 만들 수 있습니다.

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

번들 분석

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

  • Firebase: 다양한 앱을 제공하는 유용한 서비스를 제공합니다. 여기에서는 실시간 데이터베이스는 다음을 위해 사용됩니다. 실시간으로 각 새끼 고양이에 대한 정보를 저장하고 동기화할 수 있습니다.
  • 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 번들 분석기

새끼 고양이를 보는 것만큼 귀엽진 않긴 하지만 후에도 정말 도움이 돼요. 패키지 위로 마우스를 가져가면 크기가 세 가지로 표시됩니다. 있습니다.

통계 크기 압축 또는 압축 전의 크기입니다.
파싱된 크기 컴파일된 번들 내의 실제 패키지 크기 이 애플리케이션에서 사용되는 webpack 버전 4는 자동으로 컴파일된 파일이므로 통계보다 크기가 작음 있습니다.
Gzip으로 압축된 크기 gzip 인코딩으로 압축한 후 패키지의 크기입니다. 이 주제에 대해서는 별도의 가이드에서 다룹니다.

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 패널에도 번들 크기가 멋지게 줄었습니다.

번들 크기가 480KB로 감소

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

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

번들 크기가 상당히 줄었지만, 할 수 있습니다! 😈

불필요한 패키지 삭제

Firebase와 달리 moment 라이브러리의 일부를 가져오는 작업은 아니면 완전히 제거할 수도 있을까요?

귀여운 새끼 고양이의 생일은 Unix 형식 (밀리초)으로 저장됩니다. 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 인수, 이미 밀리초 단위로 계산됨)을 밀리초 단위로 나눈 후 1주일 이내

마지막으로 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>
    `})
});

이제 애플리케이션을 새로고침하고 Network 패널을 한 번 더 살펴봅니다.

번들 크기가 225KB로 감소

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

결론

이 Codelab을 통해 AI로 인코더-디코더 아키텍처를 분석하고 사용하지 않거나 불필요한 번들을 삭제하는 것이 유용한 이유 패키지입니다 이 기법으로 애플리케이션 최적화를 시작하기에 앞서 먼저 규모가 크면 훨씬 더 복잡할 수 있다는 점을 애플리케이션입니다.

사용하지 않는 라이브러리 삭제와 관련해서는 라이브러리의 어떤 부분을 어떤 부분이 사용되지 않는지를 확인할 수 있습니다. 신비로운 어디에도 사용되지 않는 것으로 보이는 패키지, 한 걸음 물러서서 최상위 종속 항목이 필요할 수 있습니다 문제를 해결할 수 있는 서로 분리합니다

불필요한 라이브러리를 삭제하는 경우에는 복잡합니다 팀과 긴밀히 협력하여 코드베이스의 일부를 단순화할 수 있습니다. 이 항목에서 moment 삭제 중 하는 것이 옳은 일처럼 보이겠지만 처리해야 하는 시간대와 다른 로캘이 있는가? 또는 더 복잡한 날짜 조작이 있다면 어떨까요? 사람들은 날짜/시간, moment와 같은 라이브러리를 조작하고 파싱할 때 까다롭습니다. 그리고 date-fns는 이를 크게 단순화합니다.

모든 것은 절충점이며, 가치가 있는지 여부를 측정하는 것이 중요합니다. 자체 머신러닝 모델에 의존하는 대신 커스텀 솔루션을 서드 파티 라이브러리도 있습니다