在 HTML 中一次性使用的大型 Vue 组件

Question

I have an editor vue component <editor></editor> that I want to use on only a few sites. This component is fairly big (400kb), so I don't want to register it globally. Is there a way to do this? The site is a traditional server side app that uses normal blade.

I'm thinking about manually importing it only on the sites that use it.

Answer 1

Just add the editor component like this:

...
import EditorComponent from 'path/to/editor/'

export default {
  components: {
    'editor': EditorComponent
  }
}
...

Then you can use the <editor></editor> without troubles in your HTML.

Answer 2

Chunk your javascript with Webpack, this way you only load what you need in the front end. Example of code splitting

Then use different new Vue functions to render only what is needed

import Editor from './Editor.vue'
import OtherVueInstance from './OtherVueInstance.vue'
window.onload = function () {
    if (pageContainsEditor) {
        new Vue({
            render: h => h(Editor)
        }).$mount('#editor');   
    } else if (somethingElse) {
        new Vue({
            render: h => h(OtherVueInstance)
        }).$mount('#OtherVueInstance');   
    }
}

In the blade file:

<div id="editor"></div>
<div id="OtherVueInstance"></div>

Also you can just create a whole new Vue application, with its own seperate JS and CSS. Then just load that on the pages where it is needed.

Answer 3

Just use your Editor component as async component

Instead of this:

import Editor from './editor'
export default {
  components: {
    Editor
  }
}

Do this:

export default {
  components: {
    Editor: () => import('./editor')  
  }
}

Webpack will split Editor component code into separate chunk and Vue will load it on demand only when it is actually needed...