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