Блог

Я пытаюсь await import для PDF.js , очень большая библиотека. Итак, в моей основной точке входа я делаю следующее:

 {
  (async () => {
    const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry');
    const pdfjsLib = await import('pdfjs-dist/build/pdf');
    pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
      
    // Code using pdfjsLib here...
  })();
}
  

Я ожидал, что мой окончательный размер пакета немного (возможно) больше, чем раньше. Но теперь есть новые чанки 3.aa11bcbe.js 4.d45ca641.js и 5.6292c84a.js (сумма до 600 КБ). Что я делаю не так?

Отбрасывает перед:

И после:

 But now there are new chuncks
  

Это то, что должно произойти.

Если вы выполнили обычный импорт ( import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry' ), то данные нужны сразу, и поэтому webpack поместил бы весь код в существующий фрагмент (вероятно, фрагмент 0). Фрагмент 0 будет примерно на 600 кб больше, и, таким образом, код pdf будет загружен, как только страница будет загружена вместе со всем остальным.

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

В любом случае, общий размер вашего проекта увеличится. Преимущество динамического импорта в том, что вы можете пропустить загрузку части кода, пока он действительно не понадобится. Или, если он никогда не нужен, его вообще не нужно загружать.

Если вы динамически импортируете пакеты для своих библиотек pdf, вы должны ожидать, что размер пакетов, которые были там раньше, уменьшится, но, похоже, здесь это не так. Я предполагаю, что пакеты pdf все еще включены в ваш пакет поставщика (какой бы пакет это ни был).

Это старый пост, но с текущей версией webpack вы бы обновили регулярное выражение для вашего пакета поставщика в конфигурации webpack splitChunks, чтобы исключить библиотеки pdf.