Skip to content

SSR 和 Tree-shaking 的优化

也是优化手段

SSR 优化

  • 静态节点直接输出,绕过了 vdom
  • 动态节点,还是需要动态渲染

还是看 https://vue-next-template-explorer.netlify.app/ 这个

html
<div>
  <span>hello vue3</span>
  <span>hello vue3</span>
  <span>hello vue3</span>
  <span>{{ mgs }}</span>
</div>

生成 AST 树

js
import {
  createElementVNode as _createElementVNode,
  toDisplayString as _toDisplayString,
  openBlock as _openBlock,
  createElementBlock as _createElementBlock,
} from 'vue';

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (
    _openBlock(),
    _createElementBlock('div', null, [
      _createElementVNode('span', null, 'hello vue3'),
      _createElementVNode('span', null, 'hello vue3'),
      _createElementVNode('span', null, 'hello vue3'),
      _createElementVNode(
        'span',
        null,
        _toDisplayString(_ctx.mgs),
        1 /* TEXT */,
      ),
    ])
  );
}

// Check the console for the AST

然后在 Options 里勾选 SSR, AST 树变化

静态节点直接输出,绕过了 vdom

js
import { mergeProps as _mergeProps } from 'vue';
import {
  ssrRenderAttrs as _ssrRenderAttrs,
  ssrInterpolate as _ssrInterpolate,
} from 'vue/server-renderer';

export function ssrRender(
  _ctx,
  _push,
  _parent,
  _attrs,
  $props,
  $setup,
  $data,
  $options,
) {
  const _cssVars = { style: { color: _ctx.color } };
  _push(
    `<div${_ssrRenderAttrs(
      _mergeProps(_attrs, _cssVars),
    )}><span>hello vue3</span><span>hello vue3</span><span>hello vue3</span><span>${_ssrInterpolate(
      _ctx.mgs,
    )}</span></div>`,
  );
}

// Check the console for the AST

Tree-shaking 的优化

  • 编译时,根据不同的情况,引入不同的 API

只用到 reactive,编译时只会引入 reactive

js
import { toRefs, reactive } from 'vue';

export default {
  setup() {
    // 对象实现响应式,使用 reactive
    const state = reactive({
      name: 'lzw.',
      age: 20,
    });
    return state;
  },
};

基于 MIT 许可发布