主页 / 问题 / 623075
Accepted
Kostiantyn Okhotnyk
Asked:2020-02-04 00:19:44 +0000 UTC2020-02-04 00:19:44 +0000 UTC

Angular2 应用程序缩小。加载时间优化

  • 772

请帮助我了解应用程序的优化。Angular2上有应用。我按照这篇文章做了最小化。没有网络包。团队

 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 ]
})

与此相关，有一些问题。在这种情况下，模块的延迟加载是否有帮助，如果有帮助，那么如何将这个结构分解成单独的模块（原理本身不清楚）？
有没有其他方法可以优化应用程序？

angular2

1 个回答

  1. Best Answer

    问题就这样解决了。首先我决定用拐杖，然后我用 angular-cli 创建了一个新项目并将我的模块添加到它

    解决方法（拐杖）

    由于无法在没有 angular-cli 的情况下编译项目，因此我不得不使用加载程序制作一个 html 主干并将其插入 index.html。

    索引.html

    <body>

<div id="auth_" style="display: none; height: 100%;">
  <div class="start-wrapper">
    <div class="popup-main-wrapper">
      <div class="tax-wrapper">

      </div>
      <div class="popup-title-wrapper">
        <p class="popup-title">Авторизация</p>
      </div>
      <div class="popup-body-wrapper" style="position: relative">
        <div id="ajax-loader__auth" class="ajax-loader__auth">
          <img src="/img/3.gif" />
        </div>
      </div>
    </div>
  </div>
</div>
 .....
 <my-app></my-app>
 ...

  $(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
    • 5

相关问题