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

Хорошо, почему это намного важнее ?. Ответ ниже,

Ни один пользователь не будет ждать загрузки страницы более 3 секунд.

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

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

Напишите или скомпилируйте код для ES6

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

Если ваши браузеры не поддерживают коды ES6, то для преобразования доступно множество транспилеров (например: Babel).

Используйте функциональный модуль (Слабая связь)

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

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

Функциональные модули должны быть слабо связаны с основным модулем, а также избегать явного использования классов функциональных модулей или функций внутри основного модуля. Создайте шаблон pub-sub для вашего веб-сайта / библиотеки для взаимодействия между модулями.

Научитесь использовать парадигму функционального программирования

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

  • Напишите чистый класс / функции.
  • Используйте методы массива, такие как filter, some, map etc.
  • Избегайте использования общего состояния.
  • Избегайте мутирующего состояния.

Вы можете найти полное объяснение функционального программирования в интервью Освойте JavaScript: что такое функциональное программирование? составлен Эриком Эллиоттом.

Установить sideEffects - уменьшить размер пакета в Webpack

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

Последнее, о чем мне нужно рассказать, - это использование ключевого слова settings sideEffects как false в вашем файле package.json. Настройки это проинформирует веб-пакет о том, что ваш код / ​​проект безопасен для исключения реэкспортированных классов / функций.

Пожалуйста, просмотрите официальную документацию webpack для получения дополнительной информации о том, как пометить ваш проект ключом sideEffects.

Вывод

В этой статье мы увидели, как использовать код записи, который можно правильно встряхнуть, и установить sideEffects keyword в package.json, чтобы пометить проект как безопасный, чтобы исключить реэкспортированные коды.

Если вам понравилась эта статья, пожалуйста, хлопните в ладоши. А также оставьте комментарий, если обнаружите ошибки. Удачного кодирования .. :-)