webpack
webpack은 SplitChunksPlugin라는 플러그인과 함께 제공됩니다. 이 플러그인을 사용하면
번들러가 JavaScript 파일을 분할하는 방법을 구성합니다. webpack은
동적 import() 및 정적 import 문을 사용합니다. 동작
SplitChunksPlugin은 chunks 옵션을 지정하여 수정할 수 있습니다.
구성:
chunks: async는 기본값이며 동적 import() 호출을 나타냅니다.chunks: initial는 정적 import 호출을 나타냅니다.chunks: all는 동적 import() 및 정적 가져오기를 모두 처리하므로
async 및 initial 가져오기 간에 청크를 공유합니다.
기본적으로 webpack에서 동적 import() 문을 만날 때마다 이 항목
해당 모듈을 위한 별도의 청크를 만듭니다.
/* main.js */
// An application-specific chunk required during the initial page load:
import myFunction from './my-function.js';
myFunction('Hello world!');
// If a specific condition is met, a separate chunk is downloaded on demand,
// rather than being bundled with the initial chunk:
if (condition) {
// Assumes top-level await is available. More info:
// https://v8.dev/features/top-level-await
await import('/form-validation.js');
}
위 코드 스니펫의 기본 webpack 구성으로 두 개의
여러 개의 개별 청크로 분할합니다.
- webpack이
initial 청크로 분류되는 main.js 청크는
main.js 및 ./my-function.js 모듈을 포함합니다.
form-validation.js만 포함된 async 청크(
파일 해시(구성된 경우) 이 청크는
condition이 true인 경우와
이 구성을 사용하면 다음 시점까지 form-validation.js 청크 로드를 연기할 수 있습니다.
실제로 필요합니다 이렇게 하면 스크립트를 줄임으로써 로드 응답성을 개선할 수
평가 시간을 측정합니다. 스크립트 다운로드 및 평가
form-validation.js 청크는
동적으로 가져온 모듈이 다운로드됩니다. 한 가지 예는
또는
가져온 모듈이 사용자 상호작용에 필요합니다.
반면에 SplitChunksPlugin 구성을 변경하여
chunks: initial는 코드가 초기 청크에서만 분할되도록 합니다. 이는
정적으로 가져오거나 webpack의 entry에 나열된 것과 같은 청크
속성을 사용합니다. 앞의 예를 보면 결과 청크는
단일 스크립트 파일에서 form-validation.js 및 main.js 조합
초기 페이지 로드 성능이 저하될 수 있습니다.
SplitChunksPlugin의 옵션을 구성하여 더 큰 광고 단위를 분리할 수도 있습니다.
여러 개의 작은 스크립트로 분할(예: maxSize 옵션 사용)
청크가 청크를 초과하는 경우
maxSize에 의해 지정됩니다. 큰 스크립트 파일을 더 작은 파일로 나누면
로드 응답성을 개선할 수 있습니다.
작업이 작은 태스크로 분할되어 주요 작업을 차단할 가능성이
할 수 있습니다.
또한 더 큰 자바스크립트 파일을 생성하면 스크립트가
캐시 무효화가 발생할 가능성이 높습니다 예를 들어 대량의
큰 스크립트를 사용하려면 프레임워크와 자사 애플리케이션 코드가 모두 포함된
프레임워크만 업데이트되고 그 외에는 없는 경우에만 번들이 무효화될 수 있습니다.
리소스입니다
반면에 스크립트 파일의 크기가 작을수록
캐시에서 리소스를 검색하여 사이트에서
재방문 하지만 작은 파일은 큰 파일보다 압축하는 것이 더 유리합니다.
가공되지 않은 프레임으로 페이지 로드 시 네트워크 왕복 시간을
있습니다. 캐싱 간의 균형을 유지하기 위해 주의를 기울여야 함
효율, 압축 효과, 스크립트 평가 시간 등의 측정항목을 기준으로 삼을 수 있습니다.
주의: SplitChunksPlugin을 사용 중지하는 경우
애플리케이션의 webpack에
splitChunks: false를 지정하여
구성되면
./my-function.js가 번들링됩니다.
main.js 및
form-validation.js 모두
webpack 데모
참고: 이 데모에서는 번들러를 사용하므로 Glitch 데모는
삽입할 수 없습니다. 실행하려면 다음 GitHub 저장소를 클론하세요.
확인하고 저장소의 안내에 따라
README
webpack SplitChunksPlugin 데모
학습한 내용 테스트
코드를 실행할 때 사용되는 import 문 유형은 무엇인가요?
어떻게 해야 할까요?
다음 중 상단에 있어야 하는 import 문 유형은 무엇인가요?
다른 위치에 있지 않나요?
Webpack에서 SplitChunksPlugin를 사용할 때
async 청크와 단일 덩어리의 차이를
청크 initial개를 삭제하시겠습니까?
async 청크가 동적 import()를 사용하여 로드됩니다.
및 initial 청크는 정적
import입니다.
정답입니다.
async 청크가 정적 import를 사용하여 로드됩니다.
및 initial 청크는 동적
import()입니다.
다시 시도하세요.
다음: 이미지 및
