Зачем ждать импорт внутри функции вместо импорта верхнего уровня? - PullRequest
Новая
       33

Зачем ждать импорт внутри функции вместо импорта верхнего уровня?

2 голосов
/ 01 апреля 2020

В большой кодовой базе есть ожидающие операторы импорта, подобные этому 

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 await-импорта, но база кода имеет, например, один файл с 60 функциями, и в каждой функции есть 2 await-импорта. Каждая функция импортирует что-то свое.
  3. Может ли это быть связано с пользовательским интерфейсом (т.е. избегать блокировки пользовательского интерфейса).

1 Ответ

2 голосов
/ 01 апреля 2020

Все должно хорошо работать и со c import с. Оба кода должны работать.

Но когда вы динамически импортируете эти модули, в этом случае может быть немного лучше:

Модули импортируются статически, они будут выполняться перед выполнением модуля, который импортировал их. В противоположность этому, когда импорт выполняется в функции onRender, импортированные модули оцениваются при первом вызове функции.

Таким образом, мы можем отложить выполнение импортированных модулей до тех пор, пока они действительно не понадобятся. Если onRender никогда не вызывается, эти модули вообще не импортируются.

Итак, хотя ваша версия также будет работать, оригинал может быть немного лучше (но это также зависит от того, как вызывается функция onRender).

...