用quicklink加速你的Vue頁面

SuperChe發表於2018-12-24
UIVue

quicklink是Google Labs出品的新技術。在頁面空閒時，quicklink會預載入視窗內的連結，來加速潛在頁面的開啟速度。

那麼如何在Vue專案中使用quicklink？首先，需要理解quicklink的原理；接著，用一個簡單的例子展示如何在Vue專案中使用quicklink。

quicklink原理

關鍵技術

quicklink基於4個關鍵點來加速潛在頁面的開啟速度。

  • 檢測視窗(viewport)內的連結 (基於Intersection Observer)
  • 在瀏覽器空閒時進行預載入 (基於requestIdleCallback)
  • 判斷當前使用者不在使用一個很慢的網路 (基於navigator.connection.effectiveType) 或不啟用data-saver配置 (基於navigator.connection.saveData)
  • 預載入URL (基於<link rel=prefetch>或XHR)，並允許開發者用priority實現一些控制邏輯 (如果瀏覽器支援，quicklink可以切換到fetch())

目標

quicklink旨在提出一個預載入viewport中潛在頁面的解決方案，並且不把頁面體積變得臃腫。(<1KB minified/gzipped)

安裝和使用

安裝

npm install --save quicklink

使用

在初始化後，quicklink會自動在空閒時預載入URL。

<script src="dist/quicklink.umd.js"></script>
<script>
quicklink();
</script>
複製程式碼

也可以在load時間的回撥函式初始化。

window.addEventListener('load', () => quicklink());
複製程式碼

也可以用在ES Module。

import quicklink from 'dist/quicklink.mjs';
quicklink();
複製程式碼

如果是單頁應用（SPA）可以針對特定DOM呼叫。

const el = document.getElementById('carousel');
quicklink({ el });
複製程式碼

封裝一個簡單的quicklink Vue Component

案例原始碼：github.com/superche/vu…

關鍵點

quicklink在初始化時可以針對特定DOM呼叫。利用這個特性，我們可以封裝一個Vue元件，用ref拿到容器DOM，並在slot插入業務程式碼。

import quicklink from './quicklink';

const wrapper = {
    template: `<div ref="quicklinkContainer"><slot></slot></div>`,
    props: {
        options: {
            type: Object,
            default: {},
        },
    },
    mounted() {
        const el = this.$refs.quicklinkContainer;
        quicklink({
            ...this.options,
            el,
        });
    },
};

export default wrapper;
複製程式碼

釋出

用Vue plugin的形式釋出。

import quicklink from './wrapper';

export function install(Vue) {
    if (install.installed ||
        !Vue) {
        return;
    }
    install.installed = true;
    Vue.use(install);

    Vue.component('Quicklink', quicklink);
}

const plugin = {
    install,
}

let GlobalVue = null;
if (typeof window !== 'undefined') {
    GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
    GlobalVue = global.Vue;
}
if (GlobalVue) {
    GlobalVue.use(plugin);
}

export default quicklink;
複製程式碼

使用

new Vue({
    el: '#app',
    template: `
        <quicklink>
            <div class="img-container">
                <img src="https://camo.githubusercontent.com/d9e978c30d6e62fa13b4aea5af2560eebb67e20f/68747470733a2f2f692e696d6775722e636f6d2f4e56525a4c48762e706e67">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
                    <metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
                    <g><path d="M962.2,13.3l24.4,24.4L34.4,989.8L10,965.5L962.2,13.3z"/><path d="M39.2,10L990,960.9L960.9,990L10.1,39.1L39.2,10L39.2,10z"/></g>
                </svg>
                <img src="https://cn.vuejs.org/images/logo.png">
            </div>
            <div class="link-container">
                <a href="https://www.bilibili.com/">quicklink bilibili</a>
            </div>
        </quicklink>
    `,
});
複製程式碼

結果

demo

參考

  1. github.com/GoogleChrom…
  2. juejin.im/post/5c177b…
  3. Photo by JJ Ying on Unsplash

相關文章