【Vue.js】지연 로딩과 vue-cli3의 prefetch의 구조

소개

일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다.
제대로 기억하지 않으면 우선 그런 것을 비망록으로 하나하나 남겨둔다.

지연 로딩과 vue-cli3의 prefetch 메커니즘

지연 로딩

SPA의 성능을 향상시키기 위해 특정 구성 요소가 필요할 때 로드해야 합니다.

왜 지연 로딩 메커니즘이 있습니까?

router로 정의하고 있는 컴퍼넌트가 늘어나고, 실제로는 특정의 조작을 할 때 밖에 사용하지 않는 컴퍼넌트도 나온다.
그 때, 디폴트의 vue-router에서는, SPA의 컴퍼넌트 모두를 로드하는 구조로 되어 있어, 절각 로드해도 그것을 사용하지 않는 일도 있다고 하는 상황이 된다.
그러면 성능으로 비효율적인 상태가 된다. . .
→ (그렇다면) 필요할 때, 필요한 컴퍼넌트만을 로드하면 된다! 라는 생각

지연 로딩 구현

지연 로딩의 구현은 Webpack의 기능을 사용해 이하와 같이 구현한다.

router.js

import Vue from "vue";
import Router from "vue-router";

// 普通のimport
// import Home from "./views/Home.vue";
// import Users from "./views/User.vue";
// import UserPosts from "./views/UsersPosts.vue";
// import UsersProfile from "./views/UsersProfile.vue";
// import HeaderHome from "./views/HeaderHome.vue";
// import HeaderUsers from "./views/HeaderUsers.vue";

// 遅延ローディングのimport
const Home = () => import(/* webpackChunkName: "Home" */ "./views/Home.vue");
const Users = () => import(/* webpackChunkName: "Users" */ "./views/User.vue");
const UserPosts = () => import(/* webpackChunkName: "UserPosts" */ "./views/UsersPosts.vue");
const UsersProfile = () => import(/* webpackChunkName: "UsersProfile" */ "./views/UsersProfile.vue");
const HeaderHome = () => import(/* webpackChunkName: "HeaderHome" */ "./views/HeaderHome.vue");
const HeaderUsers = () => import(/* webpackChunkName: "HeaderUsers" */ "./views/HeaderUsers.vue");

vue-cli3를 사용할 때 지연 로딩의 특징적인 거동

vue-cli3를 사용하는 경우 prefetch라는 구조가 자동으로 작동합니다.

prefetch 앞으로 필요한 컴퍼넌트의 리스트를 모두 HTML의 head 에 link 자바스크립트 파일)은 prefetch cache 에 보관 유지되고 실제로 필요하면 그 cache 로부터 읽어들이게 되어 있다.

이 prefetch가 태어난 경위로서는,

(원래 SPA에서는) 페이지 천이시에 컴퍼넌트등의 HTML·JavaScript등을 취득할 필요가 없기 때문에 고속으로 움직인다

이 지연 로딩을 수행하면 페이지 전환 중에 구성 요소가로드되므로 느려집니다.

그렇다고 해서 최초로 전부 가져오는 것에도 가지 않는다・・・

그렇다면, 향후 필요한 컴퍼넌트를 여가 시간에 자동적으로 가져와, 그것을 캐쉬 해 두면 좋다

라는 느낌.

어떠한 거동이 되는지, 실제로 보면 이하의 동영상대로, prefetch cache 가 되어 있는 것이 cache 로부터 가져오고 있는 부분.

※이번은 "/"에 액세스한 후, 컴퓨터상은 여가로 볼 수 있는 시간이 있어, 그 때 모든 JS파일이 로드되어 있으므로 Network에서 모두 JS파일이 로드 되고 있는 것이 표시되고 있다.

동영상의 소스 코드 전체는 이하.

Vue.js 공부 메모 목록 기사 링크

Vue.js에 대해 공부했을 때 작성한 공부 메모 기사 링크를 집계 한 기사.