javascript - vue-cli 与 Webpack : how to custom splitting import chunk?

Question

我不确定标题是否切中要点，我会尽力解释:

我有 4 个页面，分别是 a1.vue、a2.vue、b1.vue 和 b2.vue
我的router/index.js:

import a1 from '@/components/a1';  
import a2 from '@/components/a2';  
import b1 from '@/components/b1';  
import b2 from '@/components/b2';  

var router = new Router({  
    routes: [{  
        path: '/a1',  
        name: 'name-a1',  
        component: a1  
    }, {  
        path: '/a2',  
        name: 'name-a2',  
        component: a2  
    }, {  
        path: '/b1',  
        name: 'name-b1',  
        component: b1  
    }, {  
        path: '/b2',  
        name: 'name-b2-page',  
        component: b2  
    }]  
});  

然后，如果我运行 npm run build，它将呈现一个 app.js 文件，其中包括我的 a1~b2 页面的资源.
我知道如果我这样写:

const a1 = ()=> import('@/components/a1');  
const a2 = ()=> import('@/components/a2');  
const b1 = ()=> import('@/components/b1');  
const b2 = ()=> import('@/components/b2');  

webpack 将渲染 a1.js、a2.js、b1.js、b2 .js 对我来说，仅在访问映射页面时加载它。
这是问题:

如何对 a.js 和 b.js 进行分块，
其中a.js包括a1.js和a2.js源代码，
b.js 包含 b1.js 和 b2.js 源代码？
当然，如果我在访问 /a1 之后访问 /a2，则 a.js 将不会再次加载。

谢谢

Answer 1

您可以通过注释功能使用 webpack 的特殊参数。

例如，就您而言:

const a1 = ()=> import(/* webpackChunkName: "a" */'@/components/a1');
const a2 = ()=> import(/* webpackChunkName: "a" */'@/components/a2');
const b1 = ()=> import(/* webpackChunkName: "b" */'@/components/b1');
const b2 = ()=> import(/* webpackChunkName: "b" */'@/components/b2');

您还可以使用webpackMode:lazy。

有关更多信息和示例，请阅读:https://webpack.js.org/api/module-methods/