동적 가져오기를 사용하여 코드 버스트

Defer non-critical resources and boost your page load time.
Over time, as the codebase grows in complexity, the final bundle (the main JavaScript file) would also increase in size.

웹 브라우저는 어느 정도 단일 라인이라는 것을 알 수 있다. 이것은 모든 번거로운 작업이 하나의 라인에서 이루어진다는 것을 의미한다. 즉, 주 라인이다.
이것은 웹 브라우저가 주 루틴에서 자바스크립트 코드를 실행하고 주 루틴에서 해석, 레이아웃, 그리기를 한다는 것이다.
이것은 사용자가 페이지와 상호작용을 할 수 있도록 커다란 자바스크립트 파일을 가지고 있다면, 주 루틴은 코드를 평가하느라 바쁠 것이다.
설령 처음부터 이 패키지의 모든 기능이 필요하지 않더라도 그녀는 기다릴 수밖에 없을 것이다.
따라서 큰 JS 파일 = 느린 페이지가 로드됩니다.
시사통신 구독 폼이 사용자가 구독 버튼을 누르면 팝업된다고 상상해 보세요.
페이지를 불러오는 데는 이 기능이 필요하지 않습니다. 사용자가 구독을 원하는지도 알 수 없습니다.
즉, 왜 사용자가 그녀가 사용하지 않을 수 있는 코드를 기다려야 하는가.
코드 분할 입력
코드 버스트는 코드를 여러 개의 작은 번들로 버스트하는 프로세스입니다.
코드 분리(기타 제외)의 주요 장점은 자원 부하 우선순위를 더욱 잘 제어하는 것이다. 불러올 때 관건적인 코드를 불러오고 나중에 다른 코드를 불러오는 것이다.
코드 버스트를 통해 사용자가 버튼을 클릭할 때와 같이 처음에 로드해야 할 모듈, 필요에 따라 로드해야 할 모듈 또는 브라우저가 비어 있을 때 프리페치를 정의할 수 있습니다.
모듈의 초보자라면 모듈은 파일에 저장된 코드입니다. 모듈을 파일로 가져와 기능을 사용할 수 있습니다. 이로써 처음부터 모든 내용을 만들 필요가 없습니다.
코드 분할의 한 방법은 사용dynamic imports이다.
현대 JavaScript 기반 응용 프로그램에서 모듈을 정적으로 가져옵니다.
우리는 하나의 예로 이 점을 설명합시다.
사용자가 로그인 페이지의 단추를 눌렀을 때, 우리는 데이터의 출처를 추적하는 코드를 가지고 있다고 상상해 보세요.

// ...
import { tracker } from './utils'

let cta = document.querySelector('.cta')

if (cta) {
    cta.addEventListener('click', event => {
        let utmParams = tracker.getUtmParams()
        // Do some cool stuff
    })
}
// ...

위의 자바스크립트 세션은 클릭 이벤트 감청기를 클래스 cta 가 있는 단추에 추가합니다.프로세서는 tracker 파일 (정적 가져오기) 에서 utils 이라는 모듈을 사용하여 데이터의 출처를 추적합니다.
정적 가져오기 모듈tracker은 기본 번들에 포함됩니다(모듈 번들에서 제공).
상술한 코드의 문제는 사용자가 버튼을 클릭한 적이 없어도 코드는 주 라인에서 다운로드하고 실행된다는 것이다.
하지만 이것은 그리 이상적이지 않다.
코드를 동적으로 다시 작성합니다.

// ...
let btn = document.querySelector('button')

btn.addEventListener('click', e => {
    return import('./tracker' )
    .then(({tracker}) => {
        tracker.getUtmParams()  
    })
})
// ...

이번에 사용자가 실제로 단추를 눌렀을 때 모듈은 이벤트 처리 프로그램의 일부분으로 동적 가져옵니다.
모듈 귀속기 (이 예에서 사용한 것은 Webpack) 가 동적 가져오기를 만났을 때, 모듈을 단독 파일로 귀속합니다.
나중에 단독 HTTP 을 통해 동적 (비동기적) 을 요청할 수 있도록 필요한 코드를 생성합니다.

Note: Import() uses promises internally, so you need to make sure the target browser supports JavaScript promises. To support the older web browsers, you can use a promise polyfill as part of the build process.

그러나 여전히 작은 문제가 하나 있다.tracker는 상호작용 이벤트(본 예에서 마우스 클릭)에 응답하여 다운로드한 것이기 때문에 모듈을 다운로드할 때 사용자는 작은 지연을 겪을 수 있습니다.
이 문제를 해결하고 사용자의 체험을 원활하게 하기 위해서 우리는 resource hint link 웹 브라우저가 여가 시간에 모듈을 추출하도록 명령할 수 있다.
마찬가지로 Webpack(직접 또는 간접)을 사용하는 경우 다음과 같이 가져오기를 선언할 때inline directive를 사용할 수 있습니다.

// ...
let btn = document.querySelector('button')

btn.addEventListener('click', e => {
    return import(/* webpackPrefetch: true */ './tracker' )
    .then(({tracker}) => {
        tracker.getUtmParams()  
    })
})
// ...

그러면 Webpack이 런타임 시 리소스 프롬프트 링크를 문서에 삽입하여 유휴 상태에서 모듈을 프리페치하도록 지시합니다.
DevTools에서 테스트할 수 있습니다.

만약 이 간단한 기교를 정확하게 사용한다면 페이지의 성능 지표, 예를 들어 상호작용 시간(TTI)을 현저하게 향상시킬 수 있다.
이 간단한 기교가 매우 편리하다고 생각하고 당신과 당신의 사용자를 위해 시간을 절약하는 데 도움을 주기를 바랍니다.
만약 당신이 의견이나 문제가 있거나, 혹은 내가 무슨 잘못을 저질렀다면, 아래의 평론에서 저에게 알려 주십시오.
감사합니다:)