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的来源吗？
当然，如果我在访问/a2之后访问了/a1，则a.js将不会再次加载。

thx

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/

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

1 个答案: