laravel - Laravel 中的 VUE2 组件注册

Question

Laravel(5.8) 和 VUE 一起工作得很好，但我的 app.js 变得越来越大。

例如，我有以下 app.js:

window.Vue = require('vue');

window.Vue.component('Comp1', require('./components/Comp1.vue').default);
window.Vue.component('Comp2', require('./components/Comp2.vue').default);
window.Vue.component('Comp3', require('./components/Comp3.vue').default);

window.mainApp = new Vue({
  el: '#app'
});

在实际情况下，我有大约 30 个组件 + 第三方，结果是 1.2mb 的 JS 用于生产。

所以，我试图在许多“区域相关”js 中破坏 app.js 文件，只是拆分，所以我会有类似的东西:

应用程序.js:

window.Vue = require('vue');
window.mainApp = new Vue({
  el: '#app'
});

appMainComp.js:

window.Vue.component('Comp1', require('./components/Comp1.vue').default);
window.Vue.component('Comp2', require('./components/Comp2.vue').default);

appOtherComp.js:

window.Vue.component('Comp3', require('./components/Comp3.vue').default);

现在，捕获了。我在 app.js “window.mainApp = new Vue({ el: '#app'});”之后注册的所有东西不要注册。

那么，有没有办法在我的“mainApp”创建后注册一个组件？就像是

mainApp.addComponent('./components/Comp1.vue');

或者任何其他方式来破坏多个文件中的 app.js ？

Answer 1

而不是将组件分成组(顺便说一句有趣的想法)。你能做这样的事情吗？
Dynamic Imports in Vue.js

Whenever it’s possible, I’d recommend to use dynamic imports to import components. They will be lazily loaded (by Webpack) when needed.

//Instead of a usual import
import MyComponent from "~/components/MyComponent.js";

//do this
const MyComponent = () => import("~/components/MyComponent.js");