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
关键点
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>
`,
});
结果
参考
- github.com/GoogleChrom…
- juejin.cn/post/684490…
- Photo by JJ Ying on Unsplash