带有 Webpack 的 vue-cli：如何自定义拆分导入块？答案

【问题标题】：vue-cli with Webpack: how to custom splitting import chunk?带有 Webpack 的 vue-cli：如何自定义拆分导入块？
【发布时间】：2018-07-19 04:09:14
【问题描述】：

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

我有 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 将不会再次加载。

谢谢

【问题讨论】：

标签： javascript webpack vue.js bundle chunks

【解决方案1】：

您可以通过 cmets 功能使用 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/

【讨论】：