Angular2 минимизация приложения. Оптимизация времени загрузки

#angular2 #минификация

Помогите, пожалуйста, разобраться с оптимизацией приложения. Есть приложения на Angular2.
Минимизацию делал по этой статье. Без webpack. 
Командами 

 browserify -s main dist/main.js > dist/bundle.js


и 

uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js


получилось минимизировать бандл, но он занимает 1.7 метра. 
Структура app.module.ts проекта очень большая на мой взгляд.  

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    Ng2PaginationModule,
    HttpModule,
    FormsModule,
    DatePickerModule,
    Ng2GoogleChartsModule,
    routing,
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyAqIBAiCeLH9A5I5lqEK3iK1j3gAmL3yIg',
      libraries:['geometry', 'places']
    })
  ],
  declarations: [
    MainComponent,
    AuthComponent,
    RecoveryComponent,
    BaseComponent,
    IndexComponent,
    UsersComponent,
    ActiveDriversComponent,
    AdminsComponent,
    ClientComponent,
    DriversApplicationsComponent,
    ActiveDriverComponent,
    ActivationComponent,
    OrdersCanceledComponent,
    AllOrderForDriverComponent,
    NewUserComponent,
    DriverRateComponent,
    DeterminationErrors,
    HttpPopupErrors,
    TranslatePipe,
    CKEditorComponent,
    OrdersComponent,
    SelectLanguageComponent,
    SelectRoleComponent,
    SelectNoticeComponent,
    CurrentOrdersComponent,
    NotConfirmedComponent,
    DeferredOrdersComponent,
    CompletedOrdersComponent,
    AbolishedOrdersComponent,
    DriversOffersComponent,
    EvaluationEditorComponent,
    NewOrderComponent,
    OrderInfoComponent,
    PermissionDeniedComponent,
    SelectBoxComponent,
    NewsComponent,
    CreateNewsComponent,
    EditNewsComponent,
    PublishedNewsComponent,
    SelectFilterComponent,
    ChangeStatusComponent,
    PaymentsTemplatesComponent,
    PaymentsComponent,
    NewTemplateComponent,
    NewTemplateComponent,
    ChangePasswordComponent,
    EditTemplateComponent,
    SupportComponent,
    TemplatesComponent,
    DraftsComponent,
    AppealsMessagesComponent,
    NotificationsComponent,
    NotificationComponent,
    CountriesComponent,
    AddCountryComponent,
    AddCityComponent,
    EditCountryComponent,
    EditCityComponent,
    CurrentBalanceComponent,
    MarkerClusterDirective,
    DriverMapDirective,
    PersonalDirective,
    AllInfoDirective,
    StatisticDirective,
    SearchDirective,
    DateRangePickerDirective,
    PersonalAutoDirective,
    DocumentsDirective,
    PaginationDirective,
    HelpersDirective,
    SimpleRateDirective,
    FilterPipe,
    PluralPipe
  ],
  providers: [
    Urls,
    User,
    SearchModel,
    HttpService,
    CurrencyService,
    Md5,
    DeterminationErrorService,
    TRANSLATION_PROVIDERS,
    TranslateService,
    LocationService
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  bootstrap:    [ MainComponent ]
})


В связи с этим есть вопросы. Поможет ли в данной ситуации ленивая загрузка модулей,
и если поможет то как разбить на отдельные модули данную структуру (не понятен сам
принцип)?
Возможно ли как то ещё оптимизировать приложение?
    

Ответы

Ответ 1

Проблему решил так. Сначала решил костылём, а потом создал новый проект с angular-cli
и добавил в него свои модули

Обходное решение (костыль)   

Так как скомпилировать проект без angular-cli не получилось - пришлось сделать html
костяк с лоудером и вставить в index.html.

index.html




  

    

      


      
      

        
Авторизация
      
      

        

          
        
      
    
  

 .....
 
 ...

  $(document).ready(function() {$('#auth_').show();)} // Показывает html блок с лоудер


В файле скрывал блок auth.component.ts

ngOnInit() {
    $('#auth_').hide();
}


Это решение быстрое и не требует большого количества времени.

Второй путь более сложный и трудоёмкий.

Создание приложения с помощью angular-cli

Устанавливаем локально angular-cli. Для этого выполнить в консоли.

npm install -g @angular/cli


Второй шаг перенос кода. Это самый сложный и рутинный этап, так как на проекте была
версия 2.0.0, а версия с которой создаётся проект - 2.3. Поэтому пришлось переписывать
импорты некоторых компонентов. Но в результате что бы релизнуть 

Создаём билд AOT

ng build --prod --aot
ng serve --prod --aot