Within a vast code base, you will find await import statements similar to these:
const { "default": MenuView } = await import('./menu/MenuView');
const { "default": MenuViewModel } = await import('./menu/MenuViewModel');
Presented here is a broader context:
import { View } from 'backbone.marionette';
import RivetsBehavior from 'behaviors/RivetsBehavior';
import tpl from './Mask.HeaderView.html';
import './Mask.HeaderView.scss';
export default View.extend({
behaviors: [RivetsBehavior],
template: tpl,
regions: {
menu: ".mask-menu"
},
async onRender() {
const { "default": MenuView } = await import('./menu/MenuView'); // <---------------
const { "default": MenuViewModel } = await import('./menu/MenuViewModel'); // <-----
const oMenuViewModel = new MenuViewModel();
oMenuViewModel.setOptions(this.options);
this.showChildView('menu', new MenuView({
model: oMenuViewModel
}));
}
});
I have relocated the imports to the top of the file:
import { View } from 'backbone.marionette';
import RivetsBehavior from 'behaviors/RivetsBehavior';
import tpl from './mask.HeaderView.html';
import './mask.HeaderView.scss';
import MenuView from './menu/MenuView'; // <---------------------------- here
import MenuViewModel from './menu/MenuViewModel'; // <------------------- here
export default View.extend({
behaviors: [RivetsBehavior],
template: tpl,
regions: {
menu: ".maskn-menu"
},
async onRender() {
// const { "default": MenuView } = await import('./menu/MenuView'); <------------ no
// const { "default": MenuViewModel } = await import('./menu/MenuViewModel'); <-- no
const oMenuViewModel = new MenuViewModel();
oMenuViewModel.setOptions(this.options);
this.showChildView('menu', new MenuView({
model: oMenuViewModel
}));
}
});
Everything appears functional. However, I am concerned that there may be something overlooked.
Interrogations
- What prevents simply situating those await imports alongside other imports at the beginning of the file?
- Could this potentially impact performance? In the provided example, only 2 await-imports exist, but consider a scenario with a file containing 60 functions, each with 2 await-imports importing different entities.
- Is this relevant to user interface experience considerations (e.g., preventing UI blockage)?