证实延迟加载tiptap编辑器

Question

我的项目JS大约是680kb。我已经添加了vuetify tiptap编辑器，现在JS是1338kb。

我在https://www.npmjs.com/package/tiptap-vuetify#installation中像这样加载插件

在vuetify.js中

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import { TiptapVuetifyPlugin } from 'tiptap-vuetify'
import 'tiptap-vuetify/dist/main.css'

const vuetify = new Vuetify()

Vue.use(Vuetify)
Vue.use(TiptapVuetifyPlugin, {
    // the next line is important! You need to provide the Vuetify Object to this place.
    vuetify, // same as "vuetify: vuetify"
    // optional, default to 'md' (default vuetify icons before v2.0.0)
    iconsGroup: 'mdi'
})

然后我在一个组件(Editor.vue)中使用tiptap

<tiptap-vuetify v-if="!disabled"
        v-model="content"
        :extensions="extensions"
        :disabled="disabled"
    />

JS：

import { TiptapVuetify, Heading, Bold, Italic, Strike, Underline, Code, Paragraph, BulletList, OrderedList, ListItem, Link, Blockquote, HardBreak, HorizontalRule, History } from 'tiptap-vuetify'
components: { TiptapVuetify },
  data() {
    return {
      // declare extensions you want to use
      extensions: [
        History,
        Blockquote,
        Link,
        Underline,
        Strike,
        Italic,
        ListItem,
        BulletList,
        OrderedList,
        [Heading, {
          options: {
            levels: [1, 2, 3]
          }
        }],
        Bold,
        Code,
        HorizontalRule,
        Paragraph,
        HardBreak
      ],
      // starting editor's content
      content: this.model
    }
  }

有没有办法只在需要的时候加载或者减少chunk-vendors.js？

Answer 1

我试着寻找解决方案，但似乎没有任何信息。经过几次尝试，包括通过cdn加载tiptap，我设法将其从主包中分离出来。

基本上需要做的是从所需的组件内部调用Vue.use，该组件本身是延迟加载的。唯一要记住的是Vuetify实例需要存储，加载脚本的人可以访问它。

我使用的是Nuxt和ts支持，所以对我来说，它看起来像这样：

import { Component, Vue } from "nuxt-property-decorator";

import {
    TiptapVuetify,
    TiptapVuetifyPlugin,
    // ...other imports
} from "tiptap-vuetify";

import dvue from 'vue';
dvue.use(TiptapVuetifyPlugin, {
    vuetify: window['Vuetify']
});

@Component({ components: { TiptapVuetify } })
export default class HtmlEditor extends Vue {}

保存实例的Nuxt插件：

export default ({ app }) => {
    if (window) {
        window["Vuetify"] = app.vuetify;
    }
};

就是这样，tiptap-vuetify组件在延迟加载的组件中工作，所以如果需要就加载。