Одна из самых прекрасных составляющих полнофункционального JavaScript - это то, насколько открыто сообщество, насколько легко начать работу и сколько вариантов у вас есть. При таком выборе трудно найти драгоценные камни. Итак, в этой статье я поделюсь всеми замечательными пакетами и практиками, которые делают меня настолько безумно продуктивным, что у меня есть достаточно времени, чтобы ... написать статью среднего размера о повышении продуктивности.

Local-npm: локальное и оффлайн-первое зеркало npm

npm3 - собака, когда дело касается скорости загрузки. Да, мы знаем, что он делает больше проверок и плоские папки хороши, бла-бла, но это не имеет большого значения, когда запуск npm install занимает 10 долбаных минут. Этот отличный пакет кэширует все загруженные вами пакеты npm, а затем пытается получить локальную копию, прежде чем перейти в реестр npm. Если у вас хороший интернет, это сэкономит вам часы. Если вы похожи на меня и живете в стране, где хороший Интернет не всегда доступен, тем более. Чтобы увидеть, что он делает, просто запустите журналы pm2, чтобы отслеживать все обращения к кешу. Это сделает твой день.

Отключить индикатор выполнения npm

Теперь, когда вы видите, что local-npm загружает все ваши зависимости, нет причин для индикатора выполнения npm, особенно когда он необъяснимо замедляет вас. Итак, просто отключите его, запустив в терминале следующее:

npm set progress=false

N: интерактивное управление всеми версиями вашего узла

n - действительно простой инструмент для установки / обновления / понижения версии узла. Хотите перейти на новый узел v6.0.0? sudo n latest. Нужно понизить версию? Введите n и выберите версию. Это действительно не могло быть проще.

Ncu: поиск новых версий зависимостей пакетов.

Обновление пакетов в npm по-прежнему болезненно и неудобно. Выпала новая мажорная версия? Я не знаю, лучше вручную проверить каждую зависимость или поставить гринкипера на работу и чувствовать себя плохо, когда у вашего репо есть 30 выдающихся PR для различных исправлений babel. Или вы можете бросить им кости и принять любой пакет, более поздний, чем версия x.y.z. Проблема в том, что даже патч (помните, major.minor.patch) может заблокировать вашу сборку, и когда это произойдет, вам нужно убедиться, что вы используете ту же версию, что и человек, сообщивший об ошибке.

Вместо этого я предпочитаю использовать node-check-updates (ncu). Просто введите ncu и просмотрите все доступные свежие версии. Если вы хотите обновить свой package.json, просто запустите ncu -a, и у вас будет последняя версия. Теперь вы можете держать свои депы заблокированными.

npm запустить часы + символическая ссылка

Довольно часто, когда вы создаете веб-приложение, вы выделяете большой кусок в отдельный пакет, возможно, даже публикуете его в npm, и одновременно разрабатываете два. Сделать это плавно - совсем другая история. Если вы сохранили копию в том же каталоге, вам пришлось бы делать много копирования и вставки каждый раз, когда вы хотели обновить ее в npm (плюс, если вы имеете дело с синглтонами или проверяете равенство конструкторов, у вас будет плохое время). Поэтому, естественно, вы захотите сохранить его в своем собственном каталоге и сделать символическую ссылку на свой большой проект (ссылка npm из вашей зависимости, а затем ссылка npm fooPackage из вашего проекта) .

Это работает, но если вы похожи на меня, вам нравятся ваши node_modules, предварительно перенесенные в ES5, поэтому ваши сборки веб-пакетов будут быстрыми. Итак, вы можете сделать исключение в конфигурации своего веб-пакета (например, include: / fooPackage /), но вы должны обязательно удалить его, прежде чем нажимать фиксацию.

В качестве альтернативы вы можете настроить наблюдатель babel в своей зависимости. Например, в сценариях package.json вы можете написать:

"watch": "babel -w --presets es2015,stage-0 -d lib/ src/"

Теперь, когда вы вносите изменения в эту зависимость, она автоматически переносится в Es5. Самое приятное то, что вам не нужно ничего менять, когда приходит время продвигать или публиковать.

Ускорение webpack

Существует множество улучшений производительности, которые вы можете внести в webpack, и все они хорошо задокументированы:

  • PrefetchPlugin
  • Отключение всех плагинов оптимизации (особенно uglify!)
  • Использование DLL для пакетов поставщика
  • devtool: ‘eval’
  • включить / исключить свободно для всех преобразователей
  • только babel-register #, чтобы исключить файлы сборки

Тем не менее, новый, который меня очень взволновал, - это happypack. Он не только кэширует ваши предыдущие сборки, но также использует несколько потоков для создания вашей новой сборки. Хотя я не добился 400% прироста, показанного в readme, я увидел уверенный прирост на 20–30% при работе с 4 потоками на моем MBA 2013 года. Хотя это и не так много, этого достаточно, чтобы мне не заскучать, не пойти на YouTube, не забыть, что я делаю, а затем вернуться через 5 минут, задаваясь вопросом, что я отлаживаю. Таким образом, эти сэкономленные секунды превращаются в сохраненные минуты очень быстро.

Заключительное слово

Итак, это мой набор инструментов. Что насчет твоего? Есть ли какой-нибудь отличный инструмент или шаблон, который вы используете, чтобы ускорить сборку или сделать обновление менее болезненным? Продолжайте и поделитесь этим в комментариях.