javascript - 为什么在函数内部等待导入而不是顶级导入？

Question

在大型代码库中，存在这样的await import语句

const { "default": MenuView } = await import('./menu/MenuView');
const { "default": MenuViewModel } = await import('./menu/MenuViewModel');

这是一个更大的背景:

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
    }));
  }
});

我将导入移至文件顶部:

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
    }));
  }
});

一切似乎都很顺利。但我担心我错过了什么。

问题

1. 为什么不简单地将这些等待导入与其他导入一起放在文件顶部？
2. 这可能与性能有关吗？在示例中只有 2 个等待导入，但代码库有例如一个文件包含 60 个函数，每个函数中有 2 个等待导入。每个函数都会导入不同的东西。
3. 这是否与 UI 体验相关(即避免阻塞 UI)。

Answer 1

静态导入也应该可以正常工作。两个代码都应该有效。

但是当您动态导入这些模块时，在这种情况下可能会更好一些:

模块是静态导入的，它们将在执行导入它们的模块之前执行。与此相反，当导入在 onRender 函数中时，导入的模块将在第一次调用该函数时进行评估。

这样，我们就可以推迟导入模块的执行，直到真正需要它们为止。如果从未调用 onRender，则根本不会导入这些模块。

因此，虽然您的版本也可以工作，但原始版本可能会更好一些(但这也取决于 onRender 函数的调用方式)。