一种用于服务端渲染的即时编译技术。在运行时使用 Diff 算法推导动静节点,生成并运行新的渲染树,从而大幅提升渲染性能。
如下 vue 模板:
<template>
<div>
<router-link to="/">{{name}}</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
name: 'vue-ssr-jit'
}
}
}
</script>
官方编译器生成的代码:
_c("div", [
_c("router-link", {attrs: { to: "/" }}, [
_vm._v(_vm._s(_vm.name))
]),
_c("router-view")
], 1)
使用 vue-ssr-jit 生成的代码:
_c("div", [
_vm._ssrNode(
"<a href=\"/\" class=\"router-link-active\">vue-ssr-jit</a>"
),
_c("router-view")
], 1);
npm install --save vue-ssr-jit
const { createBundleRenderer } = require('vue-ssr-jit')
createBundleRenderer
与官方同名函数接口一致,参考 vue ssr 指南
推荐使用 serverPrefetch 预取数据,也支持使用 asyncData 预取数据,参考 demo
这项技术目前处于试验阶段