Ionic2需要30秒才能加载应用

时间:2017-07-10 13:57:05

标签: angular ionic-framework ionic2

使用ionic2和angular2,我们构建了近13-14个功能/模块。

使用8-10个第三方npm依赖关系和离子插件。

Packge.json

 {
      "name": "Yugma",
      "author": "NxtLife Team",
      "homepage": "http://www.nxtlifetechnologies.com/",
      "private": true,
      "scripts": {
        "build": "ionic-app-scripts build",
        "watch": "ionic-app-scripts watch",
        "serve:before": "watch",
        "emulate:before": "build",
        "deploy:before": "build",
        "build:before": "build",
        "run:before": "build",
        "postinstall": "typings install"
      },
      "dependencies": {
        "@angular/common": "2.2.1",
        "@angular/compiler": "2.2.1",
        "@angular/compiler-cli": "2.2.1",
        "@angular/core": "2.2.1",
        "@angular/forms": "2.2.1",
        "@angular/http": "2.2.1",
        "@angular/platform-browser": "2.2.1",
        "@angular/platform-browser-dynamic": "2.2.1",
        "@angular/platform-server": "2.2.1",
        "@ionic-native/camera": "^3.4.4",
        "@ionic-native/core": "^3.1.0",
        "@ionic-native/file": "^3.4.4",
        "@ionic-native/file-chooser": "^3.4.4",
        "@ionic-native/transfer": "^3.4.4",
        "angular2-moment": "^1.0.0-beta.rc.1",
        "intl": "^1.2.5",
        "ionic-angular": "2.2.0",
        "ionic-gallery-modal": "^0.1.1",
        "ionic-native": "^2.2.3",
        "ionic2-calendar": "^0.2.4",
        "ionic2-rating": "0.0.10",
        "ionicons": "3.0.0",
        "nxtlife-ionic2-rating": "^1.0.3",
        "rxjs": "5.0.0-beta.12",
        "sw-toolbox": "3.4.0",
        "typings": "1.3.1",
        "underscore": "^1.8.3",
        "zone.js": "0.6.26"
      },
      "devDependencies": {
        "@ionic/app-scripts": "^1.1.4",
        "typescript": "2.0.6"
      },
      "cordovaPlugins": [
        "cordova-plugin-whitelist",
        "cordova-plugin-statusbar",
        "cordova-plugin-device",
        "cordova-plugin-console",
        "ionic-plugin-keyboard",
        "cordova-plugin-splashscreen"
      ],
      "cordovaPlatforms": [],
      "description": "NxtLifeYugma2: An Ionic project"
    }

离子信息

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.9
Node Version: v6.10.3
Xcode version: Not installed

用ionic2解决这个问题太沮丧了。 欢迎大家提出任何建议或意见。

2 个答案:

答案 0 :(得分:0)

正如@Dhyey所提到的,除了在构建时使用标志--prod缩小文件外,您可能还希望使用Ionic CLI标志Ahead-of-Time compilation --aot(应该工作)使用v2 ionic build和v3 ionic cordova build命令)。

正如你所提到的,延迟加载确实只在v3中可用(并且仍被标记为beta / experimental)但AOT和minification本身应该会减少应用程序的大小/启动时间。

答案 1 :(得分:0)

请点击以下链接:

我向您保证,在按照以下链接/文档后,您将获得明确的结果(至少90%)

Issue with app boot time

Ionic2 takes almost 30 sec to load app

更新离子和角度版本后。你需要关注Lazy Loading

完成上述更改后,我的应用启动时间从20秒减少到13秒。

谢谢。