Сотрясение дерева в Javascript

В этой статье мы постараемся разобраться

  1. Что такое «тряска деревьев»
  2. Зачем нам нужен «Tree Shaking»
  3. Как включить «Встряхивание дерева»
  4. Как «Tree Shaking» помогает уменьшить размер пакета JS
  5. Некоторые примеры

ЧТО такое "дрожание дерева"?

Встряхивание дерева — это термин, обычно используемый в контексте JavaScript для описания удаления мертвого кода. S0, Tree Shake — это форма устранения мертвого кода.

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

ПОЧЕМУ"дерево трясется"?

Окончательный размер пакета JS имеет значение.

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

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

На изображении ниже показано время выполнения JavaScript размером 170 КБ по сравнению с изображением JPEG размером 170 КБ.

КАКвключить функцию "Tree Shaking"?

У нас есть много упаковщиков, которые могут трясти деревья.

Несколько примеров -

  • Вебпак
  • Эсбилд
  • Свернуть
  • парсел

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

ВРЕМЯ –

ПРИМЕРЫ –

Давайте взглянем на библиотеку lodash и предположим, что мы хотим импортировать одну функцию, то есть add, из библиотеки lodash.
Итак, вот способы, которыми мы импортируем функции lodash в файлы репозитория.

Теперь давайте попробуем проследить влияние такого импорта.

Неправильный способ импорта функций из lodash -

Причина — библиотека lodash написана в модульной системе commonJS, и весь модуль экспортируется, как показано на прикрепленном ниже изображении, поэтому весь модуль будет экспортирован, даже если мы импортируем только определенную функцию. Поскольку библиотеки/модули, написанные в модульной системе commonJS, не должным образом встряхиваются деревом из-за динамического характера require и module.exports.

Лучший способ импорта функций из lodash -

Причина — в node_modules/lodash/add.js мы экспортируем только нужную функцию, т.е. добавляем сюда. Таким образом, даже если экспорт выполняется в модульной системе commonJS, экспортируемый фрагмент кода является лишь нужной функцией.

ПРИМЕЧАНИЕ -

lodash экспортируется как модуль CJS, поэтому этот синтаксис бесполезен —

import { add } from 'lodash';

Здесь у нас есть два варианта
1. import add from 'lodash/add';
2. Использовать библиотеку с включенным модулем ES, т. е. lodash-es

ДАВАЙТЕ ПОПРОБУЕМ С НЕКОТОРЫМИ БУМАЖНЫМИ БИБЛИОТЕКАМИ –

Здесь мы создадим две библиотеки/модуля, один из них на ES, а другой написан на стандартах CommonJS.

Теперь давайте попробуем выполнить импорт из этих фиктивных библиотек:

Итак, вот результаты.

ПРИМЕЧАНИЕ. Способ импорта имеет значение, даже если библиотека соответствует стандартам ES.

ПРИМЕЧАНИЯ -

  • Мы должны использовать только операторы импорта и экспорта ES вместо требований CommonJS и module.exports.
  • Bundler сможет встряхнуть дерево только в том случае, если мы напишем код, который можно встряхнуть.
  • При выборе библиотеки мы должны отдать предпочтение той библиотеке, которая поддерживает встряхивание дерева, потому что библиотека не может быть встряхнута деревом (если библиотека использует синтаксис CommonJS).
    Хотя там и есть какой-то сторонний плагин (на основе бандлера), который может помочь нам встряхнуть дерево даже в таких библиотеках, но мы не получим таких же гарантий, как с модулями ES.
  • Попробуйте написать чистые функции. Это поможет лучше встряхнуть дерево.
  • Импортируйте только необходимые функции из библиотеки, а не всю библиотеку (т. е. с помощью инструкции import * as).

Если вы хотите прочитать о чистых/нечистых функциях, вы можете обратиться к этому -



Чистые и нечистые функции
В функциональном программировании мы часто сталкиваемся с такими терминами, как чистые и нечистые функции. В этой статье мы попробуем…medium.com



ЗАКЛЮЧЕНИЕ -

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

ИСПОЛЬЗОВАННАЯ ЛИТЕРАТУРА -

ДРУГИЕ СТАТЬИ -



Чистые и нечистые функции
В функциональном программировании мы часто сталкиваемся с такими терминами, как чистые и нечистые функции. В этой статье мы попробуем…medium.com