huacnlee / Turbolinks Prefetch
Turbolinks extends for prefetch links to speeds up your website.
Stars: ✭ 57
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Turbolinks Prefetch
Nasa Cli
🚀 Download NASA Picture of the Day from your terminal!
Stars: ✭ 45 (-21.05%)
Mutual labels: npm
Npm Git Install
Clones and (re)installs packages from remote git repos. See npm/npm#3055
Stars: ✭ 49 (-14.04%)
Mutual labels: npm
Framework
IONDV. Framework is a high level framework for enterprise web applications development.
Stars: ✭ 54 (-5.26%)
Mutual labels: npm
Nodejs Socketio Chat App
MEAN Stack & Socket.IO Real-time Chat App | A MEAN stack based Real Time chat application
Stars: ✭ 45 (-21.05%)
Mutual labels: npm
Awesome Node Utils
some useful npm packages for nodejs itself
Stars: ✭ 51 (-10.53%)
Mutual labels: npm
Vscode Search Node Modules
Simple plugin for VS Code that allows you to quickly navigate the file inside your project's node_modules directory.
Stars: ✭ 44 (-22.81%)
Mutual labels: npm
Postcss Import
PostCSS plugin to inline @import rules content
Stars: ✭ 1,048 (+1738.6%)
Mutual labels: npm
Gitpkg
use a sub directory of a github repo as yarn / npm dependency directly
Stars: ✭ 54 (-5.26%)
Mutual labels: npm
Automatic Release
Automates the release process for GitHub projects.
Stars: ✭ 46 (-19.3%)
Mutual labels: npm
React Use Api
Async HTTP request data for axios. Designed for diverse UI states, SSR and data pre-caching.
Stars: ✭ 49 (-14.04%)
Mutual labels: npm
Harmoware Vis
Spatial-Temporal Visualization Library using Deck.GL
Stars: ✭ 51 (-10.53%)
Mutual labels: npm
Node Blink Security
This is an npm module for communicating with Blink Home Security System
Stars: ✭ 54 (-5.26%)
Mutual labels: npm
Floatsidebar.js
Lightweight (2kb gzipped), zero-dependency javascript library for making float sidebars based on the finite state machine
Stars: ✭ 56 (-1.75%)
Mutual labels: npm
React Webpack Tutorial
This is a tutorial on how to get started developing a client side application using ReactJS, Webpack and Npm
Stars: ✭ 54 (-5.26%)
Mutual labels: npm
Graphql Upload
Middleware and an Upload scalar to add support for GraphQL multipart requests (file uploads via queries and mutations) to various Node.js GraphQL servers.
Stars: ✭ 1,071 (+1778.95%)
Mutual labels: npm
Turbolinks Prefetch
Turbolinks extend for prefetch links to speeds up your website.
WorkFlow
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]
Installation
$ yarn add turbolinks-prefetch
Usage
import Turbolinks from 'turbolinks';
window.Turbolinks = Turbolinks;
import TurbolinksPrefetch from 'turbolinks-prefetch';
TurbolinksPrefetch.start();
Prefetch request will send Purpose: prefetch
header, so you may need this to ignore some thing.
For example views count increment:
class TopicsController < ApplicationController
def show
if request.headers["Purpose"] != "prefetch"
# Ignore hit counter for prefetch request
@topic.increment_hit
end
end
end
Disable prefetch
By default, TurbolinksPrefetch will enable prefetch for all links.
Except:
- Links not have same host (Origin);
- Open in new window links
target="_blank"
; - The links has
data-remote
attribute; - The links has
data-method
attribute; - The links has
data-prefetch="false"
attribute;
If you wants disable prefetch, you can do like this:
<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>
Demo
https://github.com/ruby-china/homeland/commit/e1378468703b8c3cfd7e33a17dc703ff8294a3e9
Demo site
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].