킹 크림슨.js【Guess.js】

대답 m 히코시 사무라이 인 c. & 아테아 m 이런 ct 니 c. 아 dゔ t t ぇ r 2019 7일째는, 19신졸@ 히노라이 보내 드립니다.

여러분은 애니메이션 조조 5부, 보셨습니까?
저는 지금 더 최근에 되어서 끝났습니다. (엄청 재미있었습니다)

이야기의 마지막 적, 디아볼로의 스탠드 "킹 크림슨"의 능력, 매우 강력하네요 ...!

본인의 설명에 따르면 ...

「읽을 수 있다」…… 움직임의 「궤적」을 읽을 수 있다…
『미래로의 움직임의 궤적』이…

『킹 크림슨』의 능력 속에서는 이 세상의 시간은 사라져…
그리고 모든 인간은 이 시간 속에서 움직인 발자국을 기억하지 못한다!

요컨대
1. 👁‍🗨 미래로의 움직임 읽기
2. ⌛️ 시간을 없애

라는 두 가지 능력을 가지고 있지만,
이번에는 그것과 대략 같은 일을 할 수 있다Guess.js를 Nuxt.js에 도입해 보겠습니다.

※Nuxt는 v2.4 이후, 화면내의 nuxt-link의 링크처에 Prefetch가 걸리므로 컴퍼넌트의 미리 읽기만 하면 거의 무의미합니다;;

Guess.js란?

Guess.js(GitHub)

분석 모델, 기계 학습 모델, Google Analytics 등의 데이터를 이용하여 사용자가 액세스하는 페이지를 예측하여 프리렌더링/프리페치해 줍니다.
즉, 「액세스한 유저의 미래에의 움직임을 미리 읽어, (읽어들인) 시간을 지우고 바삭하다👊」일 수 있습니다!

👁‍🗨 미래로의 움직임 읽기

사용자가 방문하는 페이지를 예측합니다.
이번 예측 데이터에는 Google Analytics의 데이터를 이용해 갑니다.

패키지 추가

패키지

yarn add -D guess-webpack

설정

~/nuxt.config.js

import { readFileSync } from 'fs';
import { GuessPlugin } from 'guess-webpack';

export default {
// ...省略
  build: {
    extend(config, { isClient }) {
      if (isClient) {
        const guessOptions = {};
        if (GA) {
          guessOptions.GA = 'xxxxx'; // GAのビューID
        } else {
          guessOptions.reportProvider = () =>
            // Fallback
            Promise.resolve(JSON.parse(readFileSync('./routes.json')));
        }
        config.plugins.push(new GuessPlugin(guessOptions));
      }
    },
  },
}

GA에서 읽을 수 없을 때 폴백 JSON

~/routes.json

{
  "/": {
    "/dog": 80,
    "/cat": 20
  },
  "/dog": {
    "/": 20,
    "/cat": 80
  },
  "/cat": {
    "/": 80,
    "/dog": 20
  }
}

GuessPlugin 옵션에 Google Analytics의보기 ID를 설정합니다.
폴백으로 수동으로 probabilities를 설정한 routes.json을 로드합니다.

설정이 끝나면 1도yarn build 합니다.
그러면 GA 데이터 읽기를 위해 Google 계정의 인증이 실행되므로 내용을 확인하고 승인합니다.

여기서 시도해

index.vue

<template lang="pug">
  ul.list
    li
      nuxt-link(to='/dog') Dog
    li
      nuxt-link(to='/cat') Cat
</template>
<script>
  import { guess } from 'guess-webpack/api';

  export default {
    computed: {
      probabilities() {
        return guess();
      },
  },
};
</script>

위와 같이 Vue.jsDevTools 등에서 probabilities를 살펴보면 사용자의 전환 대상 예측 데이터를 볼 수 있습니다.


「읽을 수 있다」…… 움직임의 「궤적」을 읽을 수 있다…

⌛️ (로드) 시간을 끄고

플러그인 아래에 새 파일을 만듭니다.

플러그인

~/plugins/guess.js

import Vue from 'vue';
import { guess } from 'guess-webpack/api';

export default ({ app: { router } }) => {
  router.afterEach(to => {
    Vue.nextTick(() => {
      const predictions = Object.keys(guess()).sort(
        (a, b) => a.probability - b.probability
      );
      predictions.forEach(path => {
        router.getMatchedComponents(path).forEach(Component => {
          if (typeof Component === 'function') {
            try {
              Component(); // ⏳ -> ⌛️
              //Other
            } catch (e) {}
          }
        });
      });
    });
  });
};

guess()에서 GA 데이터에서 전환 대상을 예측하고 전환 확률이 높은 순서대로 Component() 해당 페이지의 구성 요소를 읽습니다.
또 다른 이벤트도 실행할 여지가 있으므로, 천이 예상처에 대해서 무언가 하는 경우에 유효할 것 같습니다.

DevTools의 Network 탭에서 확인하면 전환 예상 index.js을 읽었는지 확인할 수 있습니다. 1

이것이 우리 '킹 크림슨'의 능력!
『(읽기) 시간을 지우고』 뛰어넘게 했다···! ! (친절)

일단 데모도 만들었으므로 둡니다.

여러분도 Guess.js로 멋진 디아볼로 체험을!

🚩 참고 사이트

공식 - 소개 문서

Monotalk - guess-webpack 사용

공식 문서에는 그 밖에도 정적 페이지, React 등에의 도입 방법도 소개되고 있습니다.

내일은 동기화 @wakky_404입니다.
무엇을 쓰는지 전혀 듣지 않으므로 나도 기대합니다.



nuxt-link에 no-prefetch를 붙이지 않으면 Guess.js에 의한 것인지 확인할 수 없습니다 ↩