用quicklink加速你的Vue頁面

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> `,
});
複製代碼

結果

參考

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