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.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/

vue-cli 使用 Webpack：如何自定义拆分导入块？

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

javascript

bundle

chunks

webpack

vue.js