En Vue.js (2.X), puedo hacer que un componente se cargue de forma asincrónica, lo que significa que el código de ese componente se almacenará en un paquete separado, cambiando la definición de la ruta correspondiente de
// routes.js import Messages from '@/views/messages' export default [ { path: '/messages', name: 'messages', component: Messages } ]a
// routes.js export default [ { path: '/messages', name: 'messages', component: () => import('@/views/messages') } ]¿Hay alguna manera de que pueda agrupar 2 (o más) componentes de ruta juntos, de modo que el código para ellos se almacene en el mismo paquete y se cargue (asincrónicamente) simultáneamente?
La razón por la que quiero hacer esto es porque los componentes de este grupo solo son accesibles para un usuario con un determinado rol, por lo que todos ellos son accesibles para un usuario o ninguno lo es.
Documentación aquí .
Si desarrolla usando @vue/cli , está usando webpack debajo del capó y necesita decirle a webpack cómo agrupar sus fragmentos, usando comentarios dentro de import() :
const Foo = () => import(/* webpackChunkName: "foo-bar" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "foo-bar" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "baz" */ './Baz.vue') En su desarrollo usando vite , está usando rollup debajo del capó y necesita decirle a rollup cómo agrupar fragmentos, en 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' ] }, }, }, })