如何加快Nativescript Angular应用的速度？

Question

我有一个Nativescript Angular应用，启动速度非常慢。在我的iPhone X上大约需要5秒钟，这对我来说是可以接受的，但是在我的iPad Air上则需要9秒钟，而在较旧的Android Oneplus One上则需要12秒钟，这太长了。我使用了很多插件，如我的package.json

所示。

我已经在构建过程中使用uglify，Webpack和aot，这使android的加载时间从18秒恢复到12秒，但这还不够。我该怎么做才能加快速度？

package.json：

{
  "nativescript": {
    "id": "nl.pingcloud.schedules",
    "tns-android": {
      "version": "5.4.0"
    },
    "tns-ios": {
      "version": "5.4.2"
    }
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "scripts": {
    "lint": "tslint \"src/**/*.ts\""
  },
  "dependencies": {
    "@angular/animations": "8.0.0",
    "@angular/common": "8.0.0",
    "@angular/compiler": "8.0.0",
    "@angular/core": "8.0.0",
    "@angular/forms": "8.0.0",
    "@angular/http": "8.0.0-beta.10",
    "@angular/platform-browser": "8.0.0",
    "@angular/platform-browser-dynamic": "8.0.0",
    "@angular/router": "8.0.0",
    "crypto-js": "^3.1.9-1",
    "nativescript-angular": "^8.0.1",
    "nativescript-appversion": "^1.4.2",
    "nativescript-bottom-navigation": "^1.5.1",
    "nativescript-camera": "^4.5.0",
    "nativescript-datetimepicker": "^1.2.1",
    "nativescript-drop-down": "^5.0.2",
    "nativescript-feedback": "^1.3.9",
    "nativescript-filterable-listpicker": "^2.2.5",
    "nativescript-fingerprint-auth": "^6.2.0",
    "nativescript-imagecropper": "^1.0.5",
    "nativescript-imagepicker": "^6.2.0",
    "nativescript-iqkeyboardmanager": "^1.5.1",
    "nativescript-loading-indicator": "^2.5.2",
    "nativescript-multi-select": "^1.0.6",
    "nativescript-ngx-fonticon": "^4.2.1",
    "nativescript-phone": "^1.4.0",
    "nativescript-photoviewer": "^2.1.1",
    "nativescript-picker": "^2.1.2",
    "nativescript-plugin-firebase": "^8.3.2",
    "nativescript-pulltorefresh": "^2.3.0",
    "nativescript-secure-storage": "^2.4.0",
    "nativescript-social-share": "^1.5.2",
    "nativescript-theme-core": "^1.0.6",
    "nativescript-toolbox": "^3.0.1",
    "nativescript-ui-chart": "^4.0.2",
    "nativescript-ui-core": "^2.0.1",
    "nativescript-ui-sidedrawer": "^6.0.0",
    "nativescript-uuid": "0.0.1",
    "nativescript-windowed-modal": "^5.0.6",
    "plugin": "^0.3.3",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.3.3",
    "tns-core-modules": "~5.4.0",
    "typescript": "~3.4.5",
    "webpack": "^4.35.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^8.0.4",
    "@angular/compiler-cli": "8.0.0",
    "@nativescript/schematics": "^0.5.2",
    "@ngtools/webpack": "8.0.0",
    "codelyzer": "~4.5.0",
    "nativescript-dev-sass": "~1.7.0",
    "nativescript-dev-typescript": "^0.10.0",
    "nativescript-dev-webpack": "^0.24.1",
    "tns-platform-declarations": "^5.4.3",
    "tslint": "~5.11.0"
  },
  "gitHead": "803cec054c44c99eaa59cdc267993e6346f6cb3a",
  "readme": "NativeScript Application"
}

app.module.ts

// Modules and plugins
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
import { NativeScriptFormsModule, registerElement } from "nativescript-angular";
import { NativeScriptDateTimePickerModule } from "nativescript-datetimepicker/angular";
registerElement("PreviousNextView", () => require("nativescript-iqkeyboardmanager").PreviousNextView);
import { AppRoutingModule } from "./app-routing.module";
import { FingerprintAuth } from "nativescript-fingerprint-auth";
import { TNSFontIconModule } from "nativescript-ngx-fonticon";
import { NativeScriptUIChartModule } from "nativescript-ui-chart/angular";
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
import { NativeScriptPickerModule } from "nativescript-picker/angular";
import { NativescriptBottomNavigationModule} from "nativescript-bottom-navigation/angular";

// Components
import { ShiftComponent } from "./components/schedule/shift/shift.component";
import { DaySpecComponent } from "./components/schedule/day-spec/day-spec.component";
import { DepSpecComponent } from "./components/schedule/dep-spec/dep-spec.component";
import { ShiftDetailsComponent } from "./components/schedule/shift-details/shift-details.component";
import { EmployeesModalComponent } from "./components/schedule/shift-details/employees.modal";
import { NewShiftModalComponent } from "./components/schedule/new-shift.modal";
import { AppComponent } from "./app.component";
import { AuthComponent } from "./components/auth/auth/auth.component";
import { BottomNavComponent } from "./components/nav/bottom-nav/bottom-nav.component";
import { ScheduleComponent } from "./components/schedule/schedule.component";
import { HomeComponent } from "./components/home/home.component";
import { ProfileComponent } from "./components/profile/profile.component";
import { ProfilePageComponent } from "./components/profile/profile-page.component";
import { HoursComponent } from "./components/hours/hours.component";
import { ChooseRoleComponent } from "./components/choose-role/choose-role.component";
import { AddressbookComponent } from "./components/addressbook/addressbook/addressbook.component";
import { LoadScreenComponent } from "./components/load-screen/load-screen.component";
import { AvailabilityComponent } from "./components/availability/availability.modal";
import { PersonalInfoComponent } from "./components/personal-info/personal-info.component";
import { NewChallengeComponent } from "./components/scorebord/new-challenge/new-challenge.component";
import { ScorebordComponent } from "./components/scorebord/scorebord.component";
import { ChallengeSpecsComponent } from "./components/scorebord/challenge-specs/challenge-specs.component";
import { AnnouncementsComponent } from "./components/announcements/announcements.component";
import { NewAnnouncementComponent } from "./components/announcements/new-announcement/new-announcement.component";
import { NoInternetComponent } from "./components/no-internet/no-internet.component";

// Services
import { ServerService } from "./shared/services/server.service";
import { TimeService } from "./shared/services/time.service";
import { RestaurantService } from "./shared/services/restaurant.service";
import { UserService } from "./shared/services/user.service";
import { AuthService } from "./shared/services/auth/auth.service";
import { ScheduleService } from "./shared/services/schedule.service";
import { UserShiftsService } from "./shared/services/user-shifts.service";
import { ShiftService } from "./shared/services/shift.service";
import { ScorebordService } from "./shared/services/scorebord.service";
import { AvailabilityService } from "./shared/services/availability.service";
import { ModalDialogService } from "nativescript-angular/modal-dialog";
import { PersonalInfoService } from "./shared/services/personal-info.service";
import { FetchDataService } from "./shared/services/fetch-data.service";
import { AnnouncementsService } from "./shared/services/announcements.service";
import { MessageService } from "./shared/services/message.service";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    entryComponents: [
        EmployeesModalComponent,
        NewShiftModalComponent,
        AvailabilityComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptHttpClientModule,
        NativeScriptFormsModule,
        NativeScriptDateTimePickerModule,
        NativeScriptUIChartModule,
        NativeScriptUISideDrawerModule,
        NativeScriptPickerModule,
        NativescriptBottomNavigationModule
    // TNSFontIconModule.forRoot({
    //  'fa': './assets/font-awesome.css'
    // })
    ],
    declarations: [
        AppComponent,
        AuthComponent,
        BottomNavComponent,
        ScheduleComponent,
        HomeComponent,
        ProfileComponent,
        ProfilePageComponent,
        HoursComponent,
        ChooseRoleComponent,
        ShiftComponent,
        DaySpecComponent,
        DepSpecComponent,
        ShiftDetailsComponent,
        EmployeesModalComponent,
        NewShiftModalComponent,
        AddressbookComponent,
        LoadScreenComponent,
        AvailabilityComponent,
        PersonalInfoComponent,
        ScorebordComponent,
        ChallengeSpecsComponent,
        AnnouncementsComponent,
        NewAnnouncementComponent,
        NewChallengeComponent,
        NoInternetComponent
    ],
    providers: [
        ServerService,
        AuthService,
        UserService,
        RestaurantService,
        TimeService,
        FingerprintAuth,
        ScheduleService,
        UserShiftsService,
        ModalDialogService,
        ShiftService,
        ScorebordService,
        AvailabilityService,
        PersonalInfoService,
        FetchDataService,
        AnnouncementsService,
        MessageService
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

最慢的设备大约需要5秒钟，这对我来说已经足够了，尽管更快总是更好。

Answer 1

您可以尝试拍摄v8引擎堆快照，以减少android的初始加载时间。它可以将您的android最多加速25％的加载时间。

注意：这仅影响发行版。

$ tns build android --bundle --env.snapshot --release ....

我还建议您阅读有关优化本机脚本应用程序的这些文章。 https://docs.nativescript.org/performance-optimizations/startup-times#summary https://docs.nativescript.org/performance-optimizations/bundling-with-webpack