用quicklink加速你的Vue页面

2,847 阅读2分钟

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.cn/post/684490…
  3. Photo by JJ Ying on Unsplash