0

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

我在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'
})

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

<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？

4

1 回答 1

1

我试图寻找解决方案，但似乎没有任何信息。经过几次尝试（包括通过 cdn 加载tiptap）后，我设法将其与主捆绑包分离。

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

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

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 组件在延迟加载的组件中工作，如果需要则加载。

于 2021-06-02T19:16:42.883 回答