Webpack с npm: модуль динамического импорта

Question

Я добавляю некоторые дополнительные функции в существующий проект, который использует npm и webpack.Эта функциональность использует довольно большой модуль (точнее, tfjs), и я хотел бы запретить его загрузку по умолчанию, поскольку он примерно удваивает полезную нагрузку приложения.В идеале, я бы мог импортировать его динамически для пользователей, которые переходят к этой функциональности.

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

Какова общая стратегия динамической загрузки зависимости модуля npm?

Я рассмотрел разделение кода - похоже, это работает только для источников, а не для зависимостей.Я подумываю о создании подкаталога с отдельным package.json и node_modules / и экспортировать их как статические ресурсы.

Answer 1

Да, как сказал schu34, вы определенно на правильном пути.

В общем, настройка в основном:

1) Убедитесь, что библиотека уже загружена на вашей странице,либо другим модулем, либо тегом скрипта.Он должен быть выставлен на объекте window.Например, jQuery выставляется как window.$ и window.jquery на большинстве сайтов, и оба работают.

2) установите библиотеку как зависимость dev

3) в Webpack, настройтебиблиотека как внешняя.Это позволит вам импортировать библиотеку в ваш источник, не включая ее в вывод.См .: Внешние пакеты Webpack

4) Если вы используете Flow, это может быть немного сложно.В этом случае я склонен просто использовать const (const $ = window.$), потому что я ленивый, но есть лучшие решения.

Надеюсь, это поможет.

Answer 2

Разделение кода на самом деле должно работать для вас!Это работает для источников, но это только объединит зависимости, фактически используемые для каждого источника в чанк.Поэтому, если вы просто убедитесь, что импортируете зависимость только на тех страницах, где она используется, и правильно настроите разбиение кода, вы должны получить поведение, описанное выше.Без более подробной информации о структуре ваших проектов, на самом деле невозможно дать более подробный ответ с точной конфигурацией веб-пакета (и, честно говоря, я, вероятно, не потратил бы время на то, чтобы настроить его для вас, даже если вы предоставили эту информацию), ноЯ думаю, что с разделением кода вы на правильном пути.