Turbolinks는 프리페치를 확장하여 웹사이트 속도를 높입니다.

이 기사는 웹 페이지 액세스를 가속화하기 위한 Turbolinks의 확장을 공유합니다.

배경

최근에 웹 페이지를 미리 로드하는 작은 기술인 InstantClick을 발견했는데 웹 사이트 액세스 속도를 효과적으로 향상시킬 수 있습니다.

일반적인 원칙은 사용자가 링크 위에 마우스를 올리면 Ajax에 의해 웹페이지가 미리 캐시에 미리 로드되어 사용자가 클릭하면 이전 캐시로 직접 렌더링된다는 것이다.

그래서 나는 또한 이것에 대해 트윗했습니다.

Rails에 내장된 Turbolinks는 실제로 유사한 캐시 메커니즘을 가지고 있습니다. 사용자가 페이지를 앞뒤로 클릭하면 캐시를 사용하여 미리 렌더링하지만 사용자의 마우스를 가리킬 때 미리 처리하지 않습니다.

Turbolinks' Issue에서도 이에 대해 논의하고turbolinks/turbolinks#313, 구현Reference을 찾았으므로 이를 캡슐화하고 Turbolinks의 확장을 구현하도록 개선했습니다.

https://github.com/huacnlee/turbolinks-prefetch

동시에 구현에서 Turbolinks의 visit 동작을 추가로 조정했습니다. 이미 프리페치 작업이 있는 경우 페이지를 다시 요청하지 않고 직접 렌더링됩니다.

보시다시피, 현재 Ruby China는 이 기능을 활성화했습니다(홍콩 서버). 프리페치가 적용되면 페이지는 기본적으로 로컬 웹 페이지처럼 열립니다.

Turbolinks 프리페치가 작동하는 방식

hover --> [prefetch] --<no cache>--> [XHR fetch] -> [Turbolinks cache.put]
              |
          <exist cache / in fetching>
              |
            ignore

click --<check cache>-- exist --> [isPrefetch] -> [Turbolinks.visit advance] ---> [render page]
             | | |
             | | --async-> [fetch background] -> [render if updated]
             | |
             | <Yes>
             | |--- [Turbolinks.visit restore] --> render -> nothing
          No cahce
             |
             ---> [Turbolinks.visit]

설치

$ yarn add turbolinks-prefetch

용법

import Turbolinks from 'turbolinks';
window.Turbolinks = Turbolinks;

import TurbolinksPrefetch from 'turbolinks-prefetch';
TurbolinksPrefetch.start();

Prefetch 요청이 발생하면 Purpose: prefetch의 추가 HTTP 헤더가 전송됩니다. 특정 작업을 무시해야 하는 경우 사용할 수 있습니다.

예를 들어 읽기 상태 및 방문 횟수 업데이트와 같은 작업은 다음과 같습니다.

class TopicsController < ApplicationController
  def show
    if request.headers["Purpose"] != "prefetch"
      # Do not update visits during prefetch
      @topic.increment_hit
    end
  end
end

일부 링크에 대한 프리페치 비활성화

기본적으로 Turbolinks Prefetch는 모든 링크에 대한 동작을 켭니다.

다음 상황을 제외하고:

다른 웹사이트에 대한 링크(호스트/원본이 다름)

새 창을 여는 링크가 있습니다 target="_blank" ;

data-remote 속성이 있는 링크;

data-method 속성이 있는 링크가 있습니다.

data-prefetch="false" 속성이 있는 링크;

It should be said that you don't need to deal with most of the default situations. The default behaviors like Rails UJS are already handled in Turbolinks Prefetch.

따라서 다음과 같은 일부 링크에 대해 프리페치를 비활성화할 수 있습니다.

<a href="https://google.com">Google</>
<a href="/topics/123" target="_blank">Open in new window</a>
<a href="/topics/123" data-method="PUT" data-remote>Put</a>
<a href="/topics/123" data-method="DELETE">Delete</a>
<a href="/topics/123" data-prefetch="false">Disable by directly</a>

깃허브

🎊 Don't hesitate, immediately use it in your projects that already use Tubrolinks, basically seamless support.

https://github.com/huacnlee/turbolinks-prefetch