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

Question

在大型代码库中，有这样的等待导入语句

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

一切似乎都奏效了。但我担心我错过了什么。

问题

为什么不简单地将那些等待导入和其他导入放在文件顶部？

这可能与性能有关吗？在示例中，只有 2 个等待导入，但代码库具有例如一个包含 60 个函数的文件，每个函数中有 2 个等待导入。每个函数都导入不同的东西。

这可能与 UI 体验相关(即避免阻塞 UI)。

Answer 1

使用静态 import 应该一切正常s 也是。两个代码都应该工作。

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

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

这样，我们可以推迟导入模块的执行，直到真正需要它们。如果 onRender永远不会被调用，这些模块根本不会被导入。

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