В чем же тогда профит? Профит в том, что с помощью этого можно уменьшить Total Blocking Time.
Проблема
Представьте, что вы используете в приложении модуль
Если вы проимпортируете этот модуль стандартным импортом:
— эти 100 мс добавятся к времени инициализации бандла и увеличат Total Blocking Time.
import()
Функция
на
то эти 100 мс не будут потрачены, пока вы не вызовите
Если
Проблема
Представьте, что вы используете в приложении модуль
vimeo-player, и этот модуль при импорте выполняет какой-то дорогой код:// vimeo-player/index.js
...
const { deviceKind } = parseUserAgent() // занимает 100 мсЕсли вы проимпортируете этот модуль стандартным импортом:
import vimeo from 'vimeo-player'— эти 100 мс добавятся к времени инициализации бандла и увеличат Total Blocking Time.
import()
Функция
import(/* webpackMode: 'eager' */) позволяет отложить модуль до момента, когда он становится нужен. Если вы замените import vimeo from 'vimeo-player'на
import(/* webpackMode: 'eager' */ 'vimeo-player')
.then(vimeo => ...)то эти 100 мс не будут потрачены, пока вы не вызовите
import().Если
vimeo-player нужен редко, то это здорово уменьшит общий Total Blocking Time. А благодаря /* webpackMode: 'eager' */ модуль останется в том же бандле — и будет доступен сразу же, без траты ещё 200 мс на загрузку.
