Как динамически импортировать несколько компонентов Vue под одним и тем же именем чанка?

Question

Я пытаюсь импортировать несколько компонентов Vue как чанк, и я бы предпочел использовать только magic comment для присвоения имени чанка.

Это то, что я пробовал:

import(/* webpackChunkName: 'googlemap' */ '@/components/maps');

И файл, который я импортирую:

import Vue from 'vue';

Vue.component('google-map', () => import('@/components/maps/GoogleMapAsync.vue'));
Vue.component('widget', () => import('@/components/maps/widgets/WidgetAsync.vue'));
Vue.component('price-widget', () => import('@/components/maps/widgets/PriceWidgetAsync.vue'));
Vue.component('map-marker', () => import('@/components/maps/marker/MapMarkerAsync.vue'));
Vue.component('map-price-marker', () => import('@/components/maps/marker/MapPriceMarkerAsync.vue'));

Это не создает правильный кусок с именем googlemap.Ранее я просто ставил webpackChunkName перед каждым импортом, но я хотел бы просто назначить webpackChunkName только один раз, так как эти компоненты в любом случае будут сгруппированы.

Что я пытаюсь сделатьсделать необходимо так же, как это:

https://hackernoon.com/effective-code-splitting-in-react-a-practical-guide-2195359d5d49#697a

Есть ли другой способ заставить это работать?

Answer 1

Я использую следующее, которое использует каждое имя файла в качестве имени компонента, и я добавляю к нему префикс vue-

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component('Vue' + key.split('/').pop().split('.')[0], files(key).default))

Это даст вам то, что вы хотите.Вы можете удалить префикс, если хотите, однако, если у вас когда-либо есть элемент, который существует в HTML, или элемент когда-либо создается, я предпочитаю его иметь.