Laravel 中的 VUE2 组件注册

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 文件，只是拆分，所以我会得到类似的东西：

app.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.mail App = new Vue({ el: '#app'});" 之后注册的所有内容不要注册。

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

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

或者有其他方法可以将 app.js 分解为多个文件吗？

而不是将组件分成组（顺便说一句，有趣的想法）。你能做这样的事吗？Dynamic Imports in Vue.js https://vuedose.tips/tips/dynamic-imports-in-vue-js-for-better-performance/

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

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

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