Медленный процесс сборки и перегруженная папка node_modules - проблемы, с которыми сталкиваются многие разработчики, но, похоже, не замечают их. Почему так происходит? Из-за сложной сети зависимостей npm. Каждый раз, когда вы запускаете npm install, в дополнение к пакетам, которые вам явно нужны, ваш проект также принимает все их зависимости, что значительно увеличивает размер вашей кодовой базы. Таким образом, это может помешать вашему ежедневному рабочему процессу и сделать его менее эффективным, а также создать потенциальные риски для безопасности.

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

В терминах проекта под "зависимостями" понимаются все те сторонние библиотеки и другие инструменты, которые необходимы вашему проекту для корректной работы как в производственном, так и в тестовом режиме. Размещение библиотек в нужном месте помогает улучшить сборку. Чтобы лучше понять это, давайте рассмотрим зависимости и devDependencies.

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

Например, когда вы собираете проект с React, вам нужно включить React и ReactDOM в качестве основных зависимостей, потому что эти две библиотеки необходимы для рендеринга ваших компонентов React в браузере. Все, что вы укажете в 'dependencies', будет включено в сборку для производства. Это влияет на размер приложения, производительность и безопасность.

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

Например, в React-приложении Babel часто используется для преобразования JSX в форму JavaScript, понятную браузерам; Jest или Storybook часто применяются для создания модульных тестов для вашего кода. Подобные инструменты очень важны для процесса разработки, но после этого они не играют особой роли и могут считаться накладными.

Изолирование devDependencies помогает снизить нагрузку на производственную среду. Когда вы используете эту команду для установки пакетов для производства, npm исключает все пакеты из devDependencies. Это приводит к уменьшению площади приложения и может привести к ускорению развертывания и снижению использования полосы пропускания, что очень важно для производственной среды.
Время сборки может быть сокращено с помощью простой техники: оптимизации сторонних библиотек и использования только необходимых частей.

Используйте маленькие модули Node вместо больших везде, где это возможно. Например, в одном из моих недавних проектов я использовал date-fns для форматирования дат в определенном стиле. В этой библиотеке более 200 функций для работы с датами; это около 5 000 файлов общим размером 22 МБ. Я не стал импортировать всю библиотеку. Я импортировал только один файл, необходимый для форматирования дат, и это значительно уменьшило ненужный объем.

Аналогично, lodash - это популярная библиотека утилит, которая предоставляет множество функций. Для одного проекта я взял из lodash функцию _compact. Вместо того чтобы импортировать всю библиотеку, я решил импортировать только эту функцию, добавив строку: "import compact from 'lodash/compact'". Таким образом, мне удалось оптимизировать сборку и сохранить малое количество зависимостей.

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

Тряска деревьев - подходящий термин для метода, который напоминает тряску дерева, чтобы избавиться от мертвых листьев. Он обнаруживает и удаляет неиспользуемый код, используя статическую структуру синтаксиса модулей ES2015.

Включить "встряхивание деревьев" в Webpack так же просто, как переключиться в режим "production". Однако прежде чем переходить в производственную среду, необходимо протестировать все в среде разработки. Для этого измените режим на 'development' и включите его в конфигурации Webpack. Когда вы запустите сборку, Webpack создаст файлы, содержащие комментарии о неиспользуемом коде (например, "/* неиспользуемый квадрат экспорта гармонии */").

Просмотрев неиспользуемые экспорты, верните режим на 'production' в конфигурации Webpack. Это поможет запустить процесс разметки и удалить неиспользуемый код из производственного пакета. Разбивая код на модули с четкими линиями экспорта и импорта, такие бандлеры, как Webpack, могут легко находить граф зависимостей и удалять ненужные экспорты, что делает сборку проще и быстрее.

Неиспользуемые зависимости - это как неиспользуемый код; они дают легкую возможность уменьшить размер сборки npm в больших проектах. В течение жизненного цикла проекта многие библиотеки могут устареть или даже создать проблемы с безопасностью. Эти зависимости часто остаются незамеченными до тех пор, пока к ним не обратится инструмент безопасности или пока сборка не начнет давать сбой. Есть поговорка, которая как нельзя лучше отражает подобную ситуацию: если не сломалось, не чини.

Depcheck - это отличный инструмент для просмотра ссылок в проекте Node и поиска тех, которые не нужны. После того как вы установите npm на свою систему, его можно будет запускать с помощью npx, программы для запуска пакетов, которая поставляется вместе с npm.

Другой популярный линковщик - ESLint, который имеет встроенные плагины и правила, помогающие найти неиспользуемые импорты. Он также покажет все неиспользуемые переменные в вашей кодовой базе. Вы можете добавить ESLint в конвейер CI/CD, чтобы тестирование проводилось при каждом новом коммите. Это поможет сократить ежедневные усилия по управлению неиспользуемыми зависимостями и сохранить чистую и эффективную структуру проекта.

Основными способами уменьшения размера сборки являются минификация и сжатие, которые хорошо поддерживает Webpack. Вместе эти методы позволяют уменьшить размер текстовых ресурсов на 70 %. Минификация - это удаление ненужных символов из файлов кода с сохранением функциональности. В режиме Webpack prod для минификации JavaScript за кулисами используется плагин TerserPlugin.

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

Осознание влияния размера установленных модулей очень важно для поддержания эффективности проекта. Инструмент cost-of-modules CLI предлагает простой способ оценить размер библиотек, указанных в вашем проекте. Установив и запустив этот инструмент, вы сможете выявить существенные зависимости, которые могут неоправданно раздувать ваш проект.

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

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

Объекты могут представлять собой несколько интересных аспектов. Чтобы сократить избыточность и позволить минификаторам оптимизировать код более эффективно, при многократном обращении к одному и тому же полю объекта стоит деструктурировать объект и присвоить его переменной.

Стрелочные функции позволяют использовать более компактный синтаксис, что может привести к уменьшению общего размера кода при минификации. Когда несколько стрелочных функций объявляются последовательно с помощью const или let, все они, кроме первого объявления, имеют сокращенную форму. Стрелочные функции могут возвращать значения без использования ключевого слова return.

Хотя минификатор может вставлять код в строку, сокращение количества переменных увеличивает большинство усилий по оптимизации.

Правильное управление зависимостями npm поможет сохранить управляемость, безопасность и производительность ваших проектов. Лучшие практики, описанные выше, выведут ваши процессы сборки на новый уровень. Таким образом, использование таких инструментов, как и , плюс тщательная практика кодирования внесут конкретный вклад в уменьшение раздутости и улучшение качества кода.

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