Нужно ли нам трясти деревья с помощью webpack и typcript / angular2?

Question

Я следовал этому уроку, чтобы добавить веб-пакет в Angular отсюда. Если я правильно понимаю, мы передаем основной модуль в веб-пакет, а затем он пересекает все дерево и добавляет все файлы, на которые есть ссылки, в пакет. Я также читал, что мы можем оптимизировать это с помощью встряхивания деревьев.

Здесь я не понимаю, зачем нам встряхивать дерево, если веб-пакет уже сканирует только "используемые" модули (то есть те, которые мы "импортируем").

Делает ли встряхивание дерева что-то дополнительное (например, проверяет классы из модулей, которые не используются, и удаляет их из модуля, даже если он импортирован?), Или я неправильно понимаю концепцию?

Answer 1

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

Пример:

app.component.ts

export class AppComponent {

    test(): void {
        console.log("12345");
    }
}

export class AppComponentDeadCode {

    test(): void {
        console.log("54321");
    }
}

app.module.ts

import { AppComponent } from './app.component';

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

• Без tree-shaking оба класса будут в полученном модуле / комплекте.
• С tree-shaking класс AppComponentDeadCode будет удален из полученного модуля / пакета (учитывая, что нет других модулей, которые его импортируют).

PS К сожалению, состояние этой блестящей игрушки довольно "бета", и трудно легко добиться результата, если вообще используется машинопись /angular2. Подробнее об этом здесь.