Tiny Online Tools logoTiny Online ToolssearchПоиск инструментов…grid_viewВсе инструменты
Главнаяchevron_rightИнструменты обратной разработкиchevron_rightВизуализатор Зависимостей JS-бандлаВизуализатор Зависимостей JS-бандла

Визуализатор Зависимостей JS-бандла

Находит границы модулей внутри бандла webpack, Rollup, esbuild или Vite и показывает, какой модуль зависит от какого — по реальной форме AST, а не по угадыванию текста.

Источник бандлаВставить кодЗагрузить файл

Похожие инструменты

Инспектор Webpack-бандла

Инспектор Webpack-бандла

Определяет загрузчик рантайма webpack, карту модулей и метаданные chunk-push по форме AST, показывает реальный исходный код каждого модуля и прямо сообщает, если файл не является продуктом webpack.

Анализатор размера по Source Map

Анализатор размера по Source Map

Распределите байты бандла по исходным файлам и папкам, которые их произвели, с помощью его файла .map — узнайте, что действительно занимает место.

Визуализатор энтропии бинарного файла

Визуализатор энтропии бинарного файла

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

WASM Визуализатор Импорта/Экспорта

WASM Визуализатор Импорта/Экспорта

Узнайте, что модулю WebAssembly нужно от хоста и что он предлагает взамен, сгруппировано по пространству имён, бок о бок.

Base64 в изображение

Base64 в изображение

Декодируйте строки Base64 в файлы изображений.

Генератор favicon

Генератор favicon

Создавайте все размеры favicon из любого изображения, включая готовые HTML-фрагменты с тегами link.

JPG в PDF

JPG в PDF

Преобразуйте изображения JPG в один PDF-документ.

apps

Больше инструментов

Просмотрите нашу полную коллекцию бесплатных онлайн-инструментов.

Что находит инструмент

Современные сайты отдают один JavaScript-файл, собранный из сотен исходных файлов. Этот инструмент заглядывает внутрь такого файла и пытается восстановить исходные границы модулей — независимо от сборщика, опираясь на реальную структуру AST, а не на текстовые шаблоны, которые перестают работать сразу после минификации кода.

Он пробует по порядку:

  1. Форма function-map webpack — IIFE, аргумент которой — объект или массив, где каждая запись — функция (module, exports, require). Это распознаёт и классическую обёртку webpackUniversalModuleDefinition, независимо от того, насколько глубоко вложен настоящий вызов карты модулей.
  2. Форма chunk-push webpack — (self.webpackChunkXxx = self.webpackChunkXxx || []).push([ids, {modules}, runtime]), форма, которую производит разбиение кода на чанки в webpack 5.
  3. Комментарии-баннеры Rollup / esbuild / Vite — некоторые неминифицированные сборки этого семейства сохраняют строчный комментарий // путь/к/файлу.js перед кодом каждого модуля. При наличии они становятся границами модулей.
  4. Честный запасной вариант — если ничего из перечисленного не найдено (почти всегда потому, что бандл — это минифицированная, со сплющенной областью видимости сборка Rollup/esbuild/Vite без каких-либо маркеров границ), инструмент прямо об этом сообщает и вместо выдумывания списка модулей показывает объявления верхнего уровня файла.

Как читать результат

Когда модули найдены, для каждого перечислено, что он require()-ит по буквальному id модуля, и, не менее полезно, какие другие модули зависят от него самого — так можно проследить «что сломается, если убрать это» в любом направлении, ничего не выполняя.

Честность как принцип

Динамические require (require(переменная)) и вызовы import() нельзя разрешить статически, поэтому они просто не попадают в список зависимостей — это может занижать число зависимостей, но никогда не придумает лишнюю. Точно так же id модуля, на который ссылается вызов require(), но которого нет в обнаруженной карте, всё равно показывается как цель связи, хотя своей карточки у него нет; обычно это значит, что он находится в другом чанке, который сюда не вставили.

Приватность

Всё выполняется в браузере через настоящий парсер JavaScript (acorn). Вставленный или загруженный бандл никуда не отправляется.