이 Codelab에서는 다음과 같은 방법으로 다음 애플리케이션의 성능을 개선합니다. 불필요한 종속 항목을 삭제할 수 있습니다.
측정
먼저 웹사이트 실적을 측정하기 전에 최적화가 추가됩니다.
- 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음
전체 화면
입니다.
이제 좋아하는 고양이를 클릭하세요. Firebase의 실시간 데이터베이스는 사용되기 때문에 점수가 실시간으로 업데이트되어 다른 모든 사람과 동기화될 수 있습니다. 🐈
- `Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- 네트워크 탭을 클릭합니다.
- 캐시 사용 중지 체크박스를 선택합니다.
- 앱을 새로고침합니다.
이 간단한 애플리케이션을 로드하기 위해 약 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 버전 4는 자동으로 컴파일된 파일이므로 통계보다 크기가 작음 있습니다. |
| Gzip으로 압축된 크기 | gzip 인코딩으로 압축한 후 패키지의 크기입니다. 이 주제에 대해서는 별도의 가이드에서 다룹니다. |
webpack-bundle-analyzer 도구를 사용하면 사용되지 않은 것이나 번들의 많은 부분을 차지하는 불필요한 패키지가 포함되어 있습니다.
사용하지 않는 패키지 삭제
시각화를 통해 firebase 패키지가 훨씬 더 많이 구성되어 있습니다.
훨씬 효율적입니다 다음과 같은 추가 패키지가 포함됩니다.
firestoreauthstoragemessagingfunctions
이것들은 모두 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만 사용되었습니다.
모든 데이터가 표시됩니다 firebase/app 가져오기: 다음 항목의 API 노출 영역을 설정합니다.
각 서비스가 항상 필요합니다
lodash와 같은 다른 여러 인기 라이브러리도 개발자가
패키지의 여러 부분을 선택적으로 가져옵니다. 많은 작업을 하지 않고도
사용 중인 항목만 포함하도록 애플리케이션의 라이브러리 가져오기를 업데이트
성능을 크게 향상할 수 있습니다.
번들 크기가 상당히 줄었지만, 할 수 있습니다! 😈
불필요한 패키지 삭제
Firebase와 달리 moment 라이브러리의 일부를 가져오는 작업은
아니면 완전히 제거할 수도 있을까요?
귀여운 새끼 고양이의 생일은 Unix 형식 (밀리초)으로 저장됩니다. Firebase 데이터베이스로 이동합니다.
이 것은 특정 날짜 및 시간의 타임스탬프로서 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 패널을 한 번 더 살펴봅니다.
번들 크기가 다시 절반 이상 줄었어요!
결론
이 Codelab을 통해 AI로 인코더-디코더 아키텍처를 분석하고 사용하지 않거나 불필요한 번들을 삭제하는 것이 유용한 이유 패키지입니다 이 기법으로 애플리케이션 최적화를 시작하기에 앞서 먼저 규모가 크면 훨씬 더 복잡할 수 있다는 점을 애플리케이션입니다.
사용하지 않는 라이브러리 삭제와 관련해서는 라이브러리의 어떤 부분을 어떤 부분이 사용되지 않는지를 확인할 수 있습니다. 신비로운 어디에도 사용되지 않는 것으로 보이는 패키지, 한 걸음 물러서서 최상위 종속 항목이 필요할 수 있습니다 문제를 해결할 수 있는 서로 분리합니다
불필요한 라이브러리를 삭제하는 경우에는
복잡합니다 팀과 긴밀히 협력하여
코드베이스의 일부를 단순화할 수 있습니다. 이 항목에서 moment 삭제 중
하는 것이 옳은 일처럼 보이겠지만
처리해야 하는 시간대와 다른 로캘이 있는가? 또는
더 복잡한 날짜 조작이 있다면 어떨까요? 사람들은
날짜/시간, moment와 같은 라이브러리를 조작하고 파싱할 때 까다롭습니다.
그리고 date-fns는 이를 크게 단순화합니다.
모든 것은 절충점이며, 가치가 있는지 여부를 측정하는 것이 중요합니다. 자체 머신러닝 모델에 의존하는 대신 커스텀 솔루션을 서드 파티 라이브러리도 있습니다