대부분의 웹페이지와 애플리케이션은 여러 부분으로 구성되어 있습니다. 대신 애플리케이션을 구성하는 모든 자바스크립트를 페이지가 로드되어 자바스크립트를 여러 청크로 분할 페이지 성능을 개선합니다.
이 Codelab에서는 코드 분할을 사용하여 애플리케이션의 성능을 개선하는 방법을 간단한 애플리케이션입니다.
측정
늘 그렇듯, 웹사이트의 실적을 측정하기 전에 최적화 작업을 추가하려고 할 때 발생합니다.
- 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음
전체 화면
입니다. - `Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- 네트워크 탭을 클릭합니다.
- 캐시 사용 중지 체크박스를 선택합니다.
- 앱을 새로고침합니다.
간단한 애플리케이션에서 몇 개의 숫자를 정렬할 수 있는 71.2KB의 JavaScript 크기입니다. 어떻게 된 일인가요?
소스 코드 (src/index.js)에서 lodash 라이브러리를 가져와 사용합니다.
사용할 수 있습니다. Lodash는 다량의 유용한 유틸리티를 제공합니다.
함수를 지원하지만 여기서는 패키지의 단일 메서드만 사용됩니다.
크기가 작은 애플리케이션일 때만 전체 서드 파티 종속 항목을 설치하고 가져오면
일부는 흔한 실수입니다.
최적화
다음과 같은 몇 가지 방법으로 번들 크기를 줄일 수 있습니다.
- 서드 파티 라이브러리를 가져오는 대신 맞춤 정렬 방법 작성
- 내장된
Array.prototype.sort()메서드를 사용하여 숫자로 정렬 - 전체 라이브러리가 아닌
lodash에서sortBy메서드만 가져옵니다. - 사용자가 버튼을 클릭할 때만 정렬 코드를 다운로드합니다.
옵션 1과 2는 번들 크기를 줄이고 실제 애플리케이션에 가장 적합할 것입니다.) 하지만 🏈을 가르치기 위한 목적으로 이 튜토리얼에서 사용되지 않습니다.
옵션 3과 옵션 4 모두 이 애플리케이션의 성능을 개선하는 데 도움이 됩니다. 이 이 Codelab의 다음 몇 가지 섹션에서는 이러한 단계를 다룹니다. 다른 코딩과 마찬가지로 튜토리얼에서 항상 코드를 복사하여 붙여넣지 말고 직접 작성해 보세요.
필요한 항목만 가져오기
lodash에서 단일 메서드만 가져오도록 일부 파일을 수정해야 합니다.
먼저 package.json에서 이 종속 항목을 바꿉니다.
"lodash": "^4.7.0",
다음과 같이 바꿉니다.
"lodash.sortby": "^4.7.0",
이제 src/index.js에서 다음 특정 모듈을 가져옵니다.
import "./style.css";
import _ from "lodash";
import sortBy from "lodash.sortby";
그런 다음 값의 정렬 방식을 업데이트합니다.
form.addEventListener("submit", e => {
e.preventDefault();
const values = [input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber];
const sortedValues = _.sortBy(values);
const sortedValues = sortBy(values);
results.innerHTML = `
<h2>
${sortedValues}
</h2>
`
});
애플리케이션을 새로고침하고 DevTools를 연 다음 Network 패널을 살펴봅니다. 다시 한 번
이 애플리케이션의 경우 번들 크기가 4배 이상 줄어든 것은 여전히 개선의 여지가 있습니다.
코드 분할
webpack은 가장 인기 있는 오픈소스 중 하나입니다. 오늘날 사용되는 모듈 번들러에 관해 자세히 알아보세요. 간단히 말해서 모든 JavaScript 모듈번들을 기타 자산)이 포함될 수 있는 정적 파일로 웹 애플리케이션을 구성합니다. 브라우저에서 읽을 수 없습니다.
이 애플리케이션에 사용되는 단일 번들은 청크:
- 초기 경로를 구성하는 코드를 담당하는 것
- 정렬 코드가 포함된 보조 청크
동적 가져오기를 사용하면 보조 청크를 지연 로드하거나 Google Cloud 스토리지 서비스를 사용하세요 이 애플리케이션에서 청크를 구성하는 코드는 사용자가 버튼을 누를 때만 로드됩니다.
먼저 src/index.js에서 정렬 메서드의 최상위 가져오기를 삭제합니다.
import sortBy from "lodash.sortby";
버튼을 누를 때 실행되는 이벤트 리스너 내에서 가져옵니다.
form.addEventListener("submit", e => {
e.preventDefault();
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
import() 기능은
제안서 (현재 단계)
3) 모듈을 동적으로 가져오는 기능을 포함합니다.
webpack에는 이 작업에 대한 지원이 이미 포함되어 있으며
알게 될 것입니다.
import()는 프로미스를 반환하고 해결 시 선택한
모듈이 제공됩니다. 모듈이
반환되면 module.default가 기본값을 참조하는 데 사용됩니다.
lodash에서 제공하는
내보내기를 볼 수 있습니다 프로미스가 다른 .then와 체이닝됨
sortInput 메서드를 호출하여 세 입력 값을 정렬합니다.
프라미스 체인 .catch()는 프로미스가 거부된 사례를 처리하는 데 사용됩니다.
오류가 있을 수 있습니다.
마지막으로 해야 할 작업은 sortInput 메서드를
있습니다. 이는 다음과 같은 함수를 반환하는 함수여야 합니다.
lodash.sortBy에서 가져온 메서드를 가져옵니다. 그러면 중첩 함수가
세 입력 값을 정렬하고 DOM을 업데이트합니다.
const sortInput = () => {
return (sortBy) => {
const values = [
input1.valueAsNumber,
input2.valueAsNumber,
input3.valueAsNumber
];
const sortedValues = sortBy(values);
results.innerHTML = `
<h2>
${sortedValues}
</h2>
`
};
}
모니터링
애플리케이션을 마지막으로 한 번 새로고침하고 네트워크를 주시하세요. 패널을 다시 한 번 클릭합니다. 앱이 다운로드되는 즉시 작은 규모의 초기 번들만 다운로드됩니다. 있습니다.
버튼을 눌러 입력 번호를 정렬하고 나면 정렬 코드를 가져와 실행합니다.
숫자가 어떻게 정렬되는지 확인하세요.
결론
코드 분할과 지연 로드는 지연 시간을 줄이는 데 매우 유용한 기법일 수 있습니다. 애플리케이션의 초기 번들 크기이며, 이로 인해 페이지 로드 시간을 단축할 수 있습니다. 하지만 설정 시 고려해야 하는 몇 가지 중요한 사항은 이 최적화 기능을 애플리케이션에 포함하기 전에 고려해야 합니다.
지연 로드 UI
특정 코드 모듈을 지연 로드할 때는 네트워크 연결이 약한 사용자에게 유용할 것입니다. 분할 및 사용자가 작업을 제출할 때 매우 큰 코드 청크를 로드하면 애플리케이션이 작동을 멈춘 것처럼 보이므로 로딩 표시기를 볼 수 있습니다.
서드 파티 노드 모듈 지연 로드
애플리케이션에서 서드 파티 종속 항목을 지연 로드하는 것이
사용하는 위치에 따라 다릅니다 일반적으로 서드 파티
종속 항목은 캐시될 수 있는 별도의 vendor 번들로 분할됩니다.
자주 업데이트되지 않습니다. 자세한 내용은
SplitChunksPlugin은
도움이 될 것입니다.
JavaScript 프레임워크를 사용한 지연 로드
webpack을 사용하는 많은 인기 있는 프레임워크 및 라이브러리는 중간에 동적 가져오기를 사용하는 것보다 지연 로드가 애플리케이션입니다.
동적 가져오기의 작동 방식을 이해하는 것은 유용하지만 항상 메서드를 사용하여 특정 모듈을 지연 로드할 수 있습니다.
미리 로드 및 미리 가져오기
가능하면 <link rel="preload">와 같은 브라우저 힌트를 활용하세요.
또는 <link rel="prefetch">를 사용하여
합니다. webpack은 가져오기에 매직 주석을 사용하여 두 가지 힌트를 모두 지원합니다.
합니다. 이 내용은
중요 청크 미리 로드 가이드
코드 이상의 지연 로드
이미지는 애플리케이션의 중요한 부분을 차지할 수 있습니다. 실행 중인 리소스를 웹사이트 속도를 높일 수 있습니다. 읽기 자세한 내용은 Lazysizes 가이드