Подтвердить что ты не робот

Как включить дрожание дерева для нового проекта Angular 4

Я только что создал новый проект Angular 4 с CLI: ng new test

Версии:

@angular/cli: 1.0.0
node: 6.10.0
os: win32 x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

Однако дрожание дерева работает некорректно, так как мой неиспользуемый класс FooBar все еще находится в файле main.*.js.

Мой примерный TS файл (FooBar не должен быть на выходе):

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

export class FooBar {
  foo = "hello";
}

Я попытался использовать rollup (как описано в документах), но это не сработало...

Есть ли простой способ включить дрожание дерева? (Я ожидал, что он будет включен по умолчанию при создании проекта через CLI).

Обновление: Я использую ng build --prod, и он все еще не встряхнулся.

4b9b3361

Ответ 1

Обновление: из angular-cli Wiki:

Все сборки используют связывание и ограниченное встряхивание дерева, в то время как --prod также выполняют ограниченное удаление мертвого кода через UglifyJS.

Смотрите ниже тоже.

Опережающий компилятор (AOT)

--prod сборка по умолчанию --aot=true; это какое-то время

На сайте angular.io я не нашел никаких документов, которые бы содержали много подробностей о точном процессе тряски деревьев. Угловое CLI использует Webpack в течение некоторого времени, и есть некоторая информация о том, что инструмент делает дерево пожимая здесь. UglifyJS, кажется, общая тема.

Если вы будете следовать рекомендациям, приведенным в ссылке выше об АОТ, у вас должны быть хорошие результаты. Если вам трудно выполнить компиляцию AOT с библиотеками сторонних производителей, всегда существует риск, что библиотека не была написана для поддержки AOT. Хотя в настоящее время ожидается совместимость с AOT.

Ответ 2

Для встряхивания дерева используйте ng build --prod --build-optimizer. Таким образом, vendor.js и main.js объединены в файле main.js. Чтобы избежать этого, вам нужно добавить --vendor-chunk=true

Ответ 3

Попробуйте сделать ng build --prod --aot