I am using NextJS's dynamic import feature to optimise my server-side rendering. This code works, but how can I optimise it to avoid calling import on the same path so many times? My code:

Index.js

export { default as A } from ‘./A’;
export { default as B } from ‘./B’;
export { default as C } from ‘./C’;

App.js

const A = dynamic(() => import(‘../abcs’).then(module => module.A));
const B = dynamic(() => import(‘../abcs’).then(module => module.B)); 
const C = dynamic(() => import(‘../abcs’).then(module => module.C)); 

...

Use A, B, C