Комплекты TL;DR Browserify слишком велики? Используйте Диск для поиска проблемных мест. Затем замените большие пакеты универсального ножа меньшими узкоспециализированными эквивалентами с таких сайтов, как microjs.com.

Наше совместное веб-приложение занимало слишком много драгоценных секунд (читай: вечность), чтобы появиться в браузере. Мы сосредоточились на добавлении функций, не обращая внимания на неуклонно увеличивающееся время загрузки. Код состоял из 3 пакетов Browserified общим размером 1,9 МБ в минимизированном виде. Я уменьшил этот размер до 730 КБ двумя моими новыми любимыми методами: легкими дисками и ложью.

1. Найдите болевые точки

Первый шаг к потере этих лишних байтов — выяснить, кто и что вносит в ваш пакет. Диск от @hughskennedy — это инструмент, который анализирует каждый модуль внутри вашего пакета и отображает графическую разбивку байтов на модуль. Вы можете установить Disc с помощью [sudo] npm install -g disk
Допустим, вы хотите проанализировать пакет core.js. Создайте диаграмму диска, выполнив следующие действия:

browserify --full-paths core.js > core-bundle.js
discify core-bundle.js > core-bundle.html
open core-bundle.html

Теперь у вас есть радиальная диаграмма всех модулей, составляющих ваш комплект. Каждый цветной сегмент графа представляет один модуль. Наведите указатель мыши на любой сегмент, чтобы увидеть имя и размер модуля. Disc предоставляет дополнительные удобные опции, такие как автоматическое выделение определенных типов модулей; см. официальную страницу Диск для получения дополнительной информации.

2. Сократите свои пакеты

Теперь пришло время действовать в соответствии с информацией, сгенерированной Disc.

  • Удалите неиспользуемые пакеты. Если бы я читал этот пост перед тем, как попробовать Disc, я бы усмехнулся и сказал: «Да, кто забудет удалить ссылку на старый пакет?» В одном из наших файлов я обнаружил один неиспользуемый пакет (aws-sdk), который в уменьшенном виде занимал более 500 КБ. По мере роста кода мертвые ссылки могут скрываться в зарослях.
  • Замените более крупные пакеты эквивалентами меньшего размера. Если вы используете лишь небольшую часть этого огромного пакета канцелярских ножей, рассмотрите возможность замены его меньшим пакетом или пакетами, которые соответствуют вашим потребностям. На сайте microjs.com представлен каталог небольших узкоспециализированных пакетов npm. Например, мы использовали промис-библиотеку Bluebird как на стороне сервера, так и на стороне клиента. Bluebird великолепен, но предлагает гораздо больше функций, чем нам нужно, при этом внося значительный вклад в комплект. Я заменил ее меньшей, но адекватной библиотекой промисов под названием lie.
  • Следите за ненужными прокладками браузера. Browserify достаточно удобен, чтобы условно внедрять прокладки браузера для узловых модулей, таких как крипто. Если вы ссылаетесь на криптографию в своем пакете, в нее входит прокладка криптобраузера. Это здорово, если только, как в нашем случае, все, что нам нужно, это подпрограмма MD5 и вместо этого добавлено 100+ КБ мертвого веса к пакету.

Это все, что у меня есть. Надеюсь, это поможет вашим комплектам Browserify подготовиться к лету.