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

【问题标题】：Why await-import inside a function instead of top level import?为什么在函数内部等待导入而不是顶级导入？
【发布时间】：2020-04-01 13:58:55
【问题描述】：

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

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）。

【问题讨论】：

标签： javascript async-await es6-modules dynamic-import

【解决方案1】：

静态imports 也应该可以正常工作。两个代码都应该工作。

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

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

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

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

【讨论】：