如何动态导入同一个chunk名下的多个Vue组件？

Posted 2023-02-19

【中文标题】如何动态导入同一个chunk名下的多个Vue组件？

【英文标题】：How to dynamically import multiple Vue components under the same chunk name?

【发布时间】：2018-11-17 01:33:00

【问题描述】：

我正在尝试将多个 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

还有其他方法可以让它工作吗？

【问题讨论】：

遇到类似问题，解决这个问题有什么乐趣吗？

并非如此。我已采取一一导入它们并为每个设置正确的webpackChunkName。目前它似乎无法正常工作，但我没有花太多时间来解决这个问题。

也许是 webpack 4，github.com/vuejs-templates/webpack/issues/1280。注意到一条评论已命名为块。

我认为你必须使用 double quotes 作为块名称。按照webpack.js.org/guides/code-splitting 的官方指南和对我的 webpack 配置的调整，我成功地使用了命名块的代码拆分。

【参考方案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 中的元素，或者曾经创建过一个元素，我更喜欢拥有它。

【讨论】：

这不是 OP 要求的动态导入。或者，您可以将 require.context 与第四个字符串参数一起使用，其值为：'lazy'，然后删除“files(key)”的“.default”部分。