异步加载一组模块

Question

在Vue.js (2.X)中，我可以让一个组件异步加载——这意味着该组件的代码将存储在一个单独的bundle中——通过从

更改相应的路由定义

// routes.js
import Messages from '@/views/messages'
export default [
{
path: '/messages',
name: 'messages',
component: Messages
}
]  

// routes.js
export default [
{
path: '/messages',
name: 'messages',
component: () => import('@/views/messages')
}
]  

是否有一种方法可以将2个(或更多)路由组件捆绑在一起，使它们的代码存储在同一个捆绑包中并同时(异步)加载?

我想这样做的原因是因为该组中的组件只能由具有特定角色的用户访问，所以要么所有组件都可以被用户访问，要么它们都不可以。

Answer 1

文档在此。

---

@vue/cli

如果你使用@vue/cli开发，你在使用webpack，你需要告诉webpack如何分组，在import()中使用注释:

const Foo = () =>
import(/* webpackChunkName: "foo-bar" */ './Foo.vue')
const Bar = () =>
import(/* webpackChunkName: "foo-bar" */ './Bar.vue')
const Baz = () =>
import(/* webpackChunkName: "baz" */ './Baz.vue')

---

急速地

在您使用vite开发时，您在hood下使用rollup，您需要告诉rollup如何对块进行分组，在vite.config.js:

export default defineConfig({
build: {
rollupOptions: {
// https://rollupjs.org/guide/en/#outputmanualchunks
output: {
manualChunks: {
'foo-bar': [
'./src/Foo',
'./src/Bar',
],
baz: [
'./src/Baz'
]
},
},
},
})