Динамический импорт добавляется в пакет веб-пакетов

Question

Я хочу импортировать модуль при определенных условиях, поэтому я делаю это с помощью динамического синтаксиса импорта:

  if (showModal) {
    import('fancy-modal').then(({ initModal }) => {
      initModal();
    });
  }

Это работает, но добавляет «причудливо-модальный» код библиотеки в пакет веб-пакета независимо от значения showModal.

Я думал, что при динамическом импорте библиотека будет загружена, только если условие истинно, почему она загружается веб-пакетом, несмотря ни на что?

Answer 1

Webpack всегда будет собирать весь ваш код, если только переменная не гарантированно будет false, например при использовании плагина define и if(process.env.NODE_ENV !== 'production'){ // do some dev only stuff}.

По умолчанию веб-пакет 4 будет разбивать динамический импорт на куски с помощью плагина разделения кусков https://webpack.js.org/plugins/split-chunks-plugin/

Если вы импортировали fancy-modal где-либо еще в вашем коде «нединамическим» способом, веб-пакет поймет это и просто соберет его один раз в одном пакете, поэтому вы не получите никакой выгоды от динамического импорта .