Зависимость глубокое погружение / аудит / анализ происхождения / обзор импорта пакета Webpack Bundle для проекта TypeScript & React

Откуда я иду...

Я новичок в этом проекте, и глубокое погружение заняло бы значительное время. Я новичок в TypeScript и не имею глубокого понимания WebPack.

Что мы имеем

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

Что было опробовано:

  • webpack-bundle-analyzer оказать полезное графическое представление того, что находится в комплекте.
  • webpack-visualizer-plugin сделать красивый диск, который аналогичным образом показывает, что находится в комплекте, пропорционально.
  • yarn list | grep ^├ | wc -l кажется, не делает то, что мне нужно. Я считаю, что существует пара тысяч "зависимостей" верхнего уровня. К сожалению, это во всех рабочих пространствах.
  • yarn why core-js - кроме расплывчатой ​​иерархии, не дает достаточно подробностей, чтобы я мог определить, "почему" он включен. Это не похоже на ссылки на пакеты Webpack.

Я не большой поклонник инструментов (инструментов) анализа, которые визуализируют графический график из-за непростого усвоения формата.

Цели

Уменьшите размер связки с помощью более ограничительных включений, где это возможно

Уменьшите размер упаковки, удалив дубликаты включений.
По крайней мере, я бы хотел лучше понять, как дедуплицировать rxjs, webpack-bundle-analyzer, увеличенный в rxjs

Возможно использование преобразования Webpack будет уловкой.

Детальный анализ включения

Я надеюсь найти инструмент, который может "объяснить" (показать / проиллюстрировать / список), почему включена зависимость (файл / библиотека / пакет), с верхнего уровня вниз. Например, rxjs - это включения в этот файл и строку, которые включены в этот файл и строку... пока мы не достигнем верхнего уровня.

core-js
  +- polyfill @ line#
     +- babel @ line#
       +- myPackage/file @ line#
         +- mySourceFile @ line#

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

0 ответов

Другие вопросы по тегам