Uncertain if the title is effective, but here's my attempt to clarify:
I have a total of 4 pages: a1.vue, a2.vue, b1.vue, and
b2.vue.<br>
In my <code>router/index.jsimport 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: '/b2',
name: 'name-b2-page',
component: b2
}]
});
Upon running npm run build, a app.js file is generated containing resources for pages a1~b2.
Furthermore, I understand that by writing:
const a1 = ()=> import('@/components/a1');
const a2 = ()=> import('@/components/a2');
const b1 = ()=> import('@/components/b1');
const b2 = ()=> import('@/components/b2');
webpack will create files a1.js, a2.js, b1.js, b2.js and only load them when their respective page is visited.
Now, onto the question at hand:
How can I chunk a.js and b.js,
where a.js contains sources from a1.js and a2.js, while b.js includes sources from b1.js and b2.js?
Also, ensure that upon visiting /a2 after /a1, a.js does not reload.
Thank you.