vue-cli 与 Webpack：如何自定义分割导入块？

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.jsand进行分块b.js，
其中a.js包含a1.js和a2.js源，
b.js包含b1.js和b2.js源？
当然，如果我/a2在访问后访问/a1，则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/