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

只要有可能，我建议使用动态导入来导入组件。它们将在需要时延迟加载（通过 Webpack）。

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

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