그 Vue.js 페이지, 정말 비동기 구성 요소로 가속화할 수 있습니까?

소개

이 기사에서는 Vue.js (+ TypeScript)로 만든 SPA 페이지의 초기 그리기 속도를 향상시키고 싶을 때의 노력 중 하나가 소개되어 있습니다.

비동기 컴포넌트라는 생각은 이해할 수 있었습니다만, 실제로 시도하면 뭔가 느려진 것처럼 느껴져 포기하고 있었습니다.
실은 사용법이 능숙하지 않은 것 같고, 그 대처법을 알았으므로 정리해 두고 싶습니다.
prefetch 를 사용하면 컴퍼넌트가 벌써 로드되고 있기 때문에 페이지 천이는 빨라집니다만, SPA 사이트의 초기 묘화가 늦어져 버린다고 하는 트레이드 오프가 있을 것 같네요.
이번에는 초기 드로잉을 가속화하는 것에 스팟을 맞추고 있습니다.

TL; DR;

공식 페이지 에 있는 것처럼, 컴퍼넌트를 비동기로 호출해 묘화를 고속화할 수 있어!

그것만이라면 prefetch가 행해져 고속화하지 않기 때문에, vue.config.js 에 1행 추가하는 거야!

비동기 컴포넌트 호출

SPA의 사이트입니다만, 초기 묘화를 개선하고 싶기 때문에 무언가 없을까와 여러가지 시험하고 있던 곳이었습니다.

비동기 컴포넌트라는 생각을 발견하고 공식 페이지 을 본대로 시도해 보자.

우선, 이것은 TypeScript에서의 전통적인 호출 방법 (아마).

구성 요소 동기화 로드

import MyComponent from "./MyComponent";

@Component({
  components: {
    MyComponent
  }
})

그에 대해, 다음과 같이 변경하는 것만으로 비동기 컴퍼넌트를 사용할 수 있군요. 코드 변경은 정말 이것뿐.

비동기 로드로 변경

- import MyComponent from "./MyComponent";

@Component({
  components: {
-     MyComponent
+     MyComponent: () => import("./MyComponent")
  }
})

라고 하는 변경을 실시해, 막상 SPA 페이지를 리로드 해 표시해 보면, 지금까지는 없었던 수수께끼의 js 파일의 로드가.
분명히 이것이 비동기 읽을 때 발생하는 것 같습니다.

비동기 컴포넌트의 수만큼, js가 분할되어 prefetch된다. (게다가, 실제로 컴퍼넌트가 사용될 때 prefetch가 아니고 읽힌다)
이걸로 빨라졌어, ,?


그렇지만 실제로 로드 시간을 보면, 뭔가 체감 늦어지고 있어? ? ?
병렬 로딩이 부족한가? HTTP2 를 사용할 수 있다는 무언의 압력? ?


라는 느낌으로, 잘 모르게 되어 버렸기 때문에 일단 보류로 해, 만든 PR는 닫아 두었습니다.

prefetch를 수행하지 않기

그런 다음 잠시 후 한 기사를 찾았습니다. 여기입니다.
How to make lazy loading actually work in Vue (CLI 3)

이거야! 이것을 원했습니다!actually-work 라든지 쓰고 있고, 기사의 타이틀을 본 순간에 쭉 왔습니다, 진짜로.

그렇다면 기사에도 쓰여진 것처럼 vue.config.js 에 prefetch를 제한하기 위한 한 줄을 추가합시다.

vue.config.js

chainWebpack: (config) => {
  config.plugins.delete("prefetch");  # この行を追加
  ...
}

이 변경을 적용하면 비동기 컴포넌트의 prefetch가 없어져, 필요할 때가 되면 필요한 컴퍼넌트가 로드되는 구조로 할 수 있었습니다.

Matias Rodal 씨, 고마워.

결론

그렇다면 궁금했던 비동기 컴포넌트를 사용하면 느려지는 문제를 해결할 수 있었을까 생각합니다.

필요한 때에 필요한 것을 준비한다는 물건을 가지지 않는 현대적인 삶의 방식에 매치한 구현이 가능합니다.

사생활에서도 미니멀리스트로 살고 싶다. 잘라내라.

이상