Уявіть дерево. Красиве розкидисте дерево.
Візуалізуйте його до найменших деталей.
Бачите життєдайні зелені листочки?
Це ваш код, який виконує всі необхідні функції.
А сухі, коричневі листочки — це невикористаний код, який лише займає місце.
Так от, Tree Shaking — це немов струшування дерева восени, щоб позбутися опалого листя. Так само, ця технологія «струшує» ваш код, видаляючи все зайве. Залишається тільки життєздатний, продуктивний код, який робить вашу програму легшою і швидшою.
Отож, Tree Shaking — це техніка оптимізації, яка дозволяє зменшити розмір фінального файлу з вашим кодом, видаливши невикористані частини.
Ще одним плюсом є швидше завантаження. Менший розмір файлу означає, що сторінка завантажується швидше — і це позитивно впливає на користувацький досвід, особливо на повільних з’єднаннях.
Як це працює? Tree Shaking особливо ефективний з ES6-модулями завдяки їхній статичній структурі. Збирач, такий як Webpack або Rollup, аналізує ваш код і видаляє все, що не використовується. Він робить це, виходячи з того, як ви імпортуєте в модулі. Наприклад, якщо ви імпортуєте тільки одну функцію з модуля, інші функції з цього модуля будуть видалені з фінального файлу.
Цей текст взято з особистого блогу після отримання дозволу автора.
Зайшов на сторінку, а там — спінери, skeleton і порожнеча? Це не баг, це —…
Таке запитання мені поставив мій знайомий, коли побачив мій профіль. Я настільки над цим задумалась,…
Нещодавно я вписався в один цікавий проєкт. Довелося розібратись з процесом звітності американських фармацевтичних компаній…
Одного разу я сильно посварився з СЕО компанії. Він кричав на мене, а я у…
Одразу два офтопи: Я також виконувала тестові; Тестове має бути коротким, чітким, і, бажано, оплачуваним.…
Давайте відразу розставимо крапки над «і». Ви не працюєте в Google. Я теж. Більшість з…