Ionic-framework: 加速初始加载

创建于 2016-06-06  ·  159评论  ·  资料来源: ionic-team/ionic-framework

我们正在开发一个部分原生、部分混合的应用程序。
我们将在用户单击菜单项时打开cordova 活动,并在用户单击返回时完成活动。
这种方法的问题是,第一次在屏幕上渲染需要一段时间。 我们将所有资源文件托管在资产文件夹中,因此缓存没有多大意义。 是否有任何渐进式加载应用程序的方法?

最有用的评论

全部,

我们现在正在内部进行大量测试。 本周我们取得了一些重大进展。

谢谢,

所有159条评论

你好@dheran 。 启动时间是我们正在努力减少的事情(:。我们目前正在开发一个新的构建链,它将使 Ionic 应用程序更小,其中将包括离线模板编译。通过这两项改进,您可以期待看到启动时间的巨大改进。我会在 StackOverflow 或我们的论坛 (forum.ionicframework.com) 上询问如何“预加载”本机应用程序内的 web 视图。感谢使用 Ionic!

@jgw96嘿,是否有任何现有的功能请求或问题? 以便在实施后易于跟进并能够使用它。

@dheran好问题! 目前还没有很好的跟踪问题,因为这还处于早期阶段,但对我们来说这是一个高度优先事项,并且 ionic-cli 团队在这方面取得了很大进展。 一旦进展顺利,我将尝试根据我们的进展更新此问题,以便您知道会发生什么(:

@jgw96那么,为什么不让它一直打开呢?

@jgw96在构建过程中删除未使用的 css 也会有很大贡献

我用ionic2建了一个手机网站,然后发现用android 4.4浏览器打开,很慢。 有什么好的建议给我吗?
网站: https :
image

Cordova CLI:6.1.1
离子框架版本:2.0.0-beta.6
离子 CLI 版本:2.0.0-beta.31
离子应用程序库版本:2.0.0-beta.17
ios 部署版本:1.8.5
ios-sim 版本:5.0.6
操作系统:Mac OS X El Capitan
节点版本:v5.3.0
Xcode 版本:Xcode 7.2 构建版本 7C68

@jgw96知道哪个版本会获得此功能吗?

@dheran ! 好问题! 几天前,我们有一个使用 webpack 2 进行 treeshaking 的有效实现,并且仍在使用离线编译器。 在阅读了 Angular 团队今天的会议记录后,看起来他们在 Angular 2 rc 4 之前不会称离线模板编译器“稳定”,但我希望我们能在此之前实现离线编译器。

@jgw96似乎他们已经解决了这个问题。 https://github.com/angular/angular/issues/3605
Angular RC 4 几乎完成了 33%(里程碑)。
我们可以期待 ionic beta 10 或 11 中的新编译器吗?

@dheran ,我们正在积极努力。 这对我们来说是一个非常重要的项目,所以请放心,我们会尽快完成它。

谢谢,

@danbucholtz您能否建议我使用任何临时解决方法来减少初始渲染时间,直到正式解决方案出现。 因为,我有两个选择,要么需要解决这个问题,要么放弃并使用本机代码构建相同的问题。

@dheran

抱歉,我们目前不提供任何变通方法,因为我们没有任何变通方法 😄 请记住,我们处于测试阶段,正在等待 Angular 使离线模板编译和缩小进入良好状态,以便我们可以模仿他们的所作所为。 这对我们尽快进入构建过程非常重要,但它还没有准备好。

谢谢,

+1

我们可以等到rc4,但请保持离线模板编译的高优先级。 仅供参考,我们的应用程序的初始时间约为 8 秒,但其他原生应用程序的初始时间约为 1-4 秒。 我们真的需要缩短初始时间。

最后,感谢您的工作。

@grapemix它绝对是高优先级! 我们一直在与 Angular 团队合作,让离线模板编译与 Ionic 一起工作,同时进行摇树和积极的缩小,这样我们就可以让我们的平均应用程序大小更小。 如上所述,我们正在等待 Angular 的一些变化,但它肯定会完成(:

+1

+1

@jgw96 @danbucholtz伙计们在这方面有什么进展吗? 我们可以在 beta 11 中得到修复吗?

+1

你们在哪个存储库中跟踪这个
我想我可以在 webpack 方面提供一些帮助

@prijindal ,

我相信@jthoms1正在这个分支上做这项工作。
https://github.com/driftyco/ionic/tree/adding-offline-template-compiling

谢谢,

@jthoms1 ,在beta 11 之前,更改会与master 合并吗?

是的,我也在等待离线编译,但现在可以制作一些东西。
我们的网站完全在 Ionic2 beta.8 上
http://m.sherpadesk.com/

我也有混合应用程序,我做了一些优化,加载时间为 417 毫秒
看报告 https://tools.pingdom.com/#!/DW6Td/http://m.sherpadesk.com/17
站点大小也减少了600% (3Mb -> 500 Kb)
用户交互响应速度提升2000%(2 秒 -> 100ms)

好的建议: http :

我将在这里发布我所有的 gulp 设置和应用商店链接: http :

@Evgeniynet非常好。

几个问题:

  1. 安装应用程序时,它会立即打开,但是。 我正在加载您的个人资料,但似乎卡住了 5 秒。 为什么?
  2. 你是如何在没有离线编译的情况下优化加载时间的?
  3. 你的手机网站是ionic2的吗?
  4. 你的桌面网站是ionic2吗?

我正在考虑使用 ionic 2,但唯一阻止我的是我需要管理 webapp 项目 + 移动 ionic2 项目。

谢谢

@evgeniynet是否由节点提供服务?
它似乎是预编译的。 但我们的大多数情况都是设备存储托管(phonegap 应用程序)。

@dheran ,不,它托管在 Azure 网站上,只有由 ionic 2 gulp 构建任务生成的纯 html 和 js 文件。

@justme1

  1. 是的,我用http://www.bennadel.com/blog/3105-creating-a-pre-bootstrap-loading-screen-in-angular-2-rc-1.htm欺骗了我

你的手机网站是ionic2的吗?
是的

你的桌面网站是ionic2吗?
是的

我的 ios 应用程序只是在 webview 中加载站点,仅此而已。

只有一个代码库适用于 iOS、Android 和 Windows Phone、网络应用程序、Chrome 扩展程序甚至 Apple iWatch

我设置了特殊标志来停止加载cordova,以防止gap://错误

我正在http://www.sherpadesk.com/blog/上编写关于此的完整指南

@evgeniynet

  1. 如果是这种情况,那么加载速度似乎并不快:-)

关于一个代码库:

据我了解,ionic2 不应该用作桌面网站,因为浏览器完全支持它。 你不介意这个问题吗?

指望我等待这个功能。

你好,有关于这方面的更新吗?
我正在使用版本:
科尔多瓦 CLI:6.3.0
离子框架版本:2.0.0-beta.10
离子 CLI 版本:2.0.0-beta.35
离子应用程序库版本:2.0.0-beta.19
LG Nexus 5(操作系统 6.0)
Sidemenu 教程应用 v1 在 3 秒内加载
--v2 侧菜单在 6 秒内加载

Beta 12 中将提供提前编译功能。这将显着加快初始加载速度并显着减小包的大小。 我们即将推出 Beta 11,接下来就是这个了。 这是我们的第一要务。 我们让它在一个分支上工作,所以我们很接近。

谢谢,

第一次真的很慢。 等待优化

@danbucholtz或任何人将此问题添加到 beta 12 里程碑

@danbucholtz我们可以使用分支代码吗? 抱歉,等不及 b​​eta 12 发布了.. :-(
请给我们一个快速发布..

@德兰

此更改需要尚未发布的 Angular RC 5。 我们将在 beta 12 准备就绪后立即发布。 在准备就绪之前,我们不会发布。

一个好的短期修复可能是切换到使用内联模板,如下所示。 这将在短期内更快。 试一试,看看它是否为你加快了一些速度。

@Component({
   template: `
   <ion-content>
      <div>content</div>
   </ion-content>
  `
})
export MyClass {
}

谢谢,

@danbucholtz Inline 实际上有很大帮助。
我在我的 gulpfile.js 中写了一个小代码,它在构建过程中完成。

gulp.task('build', ['build:prequel'], function(done) {
  glob('./www/build/**/*.html', function(e,files) {
    var indexPath = './www/build/js/app.bundle.js'
    var js = fs.readFileSync(indexPath, 'utf8');

    async.eachSeries(files, function(file, callback) {
      filename = file.substr(6)
      var html = fs.readFileSync(file, 'utf8');
      js = js.replace("templateUrl: '" + filename + "'", "template: `" + html +"`")
      callback()
    }, function() {
      fs.writeFile(indexPath, js, 'utf8', function(err, data) {
        done()
      });
    })
  })
})

是的,这不干净,也不是最好的方法。
但它就像一个魅力。

PS:内联对初始启动帮助不大,可能最多 0.5 秒。 但它确实可以在页面转换之间或在动态加载组件时更顺畅。

@prijindal ,不错! 棒极了! 随着 Beta 12 中的 AoT 编译器出现,模板是内联文件还是外部文件都无关紧要。 作为构建过程的一部分,它将被转换为纯 JS。 很好的工作解决了这个问题!

谢谢,

嗨,我查看了 Angular 页面,发现 RC5 已发布。 “直到rc5出来”是什么意思?

@kLkA@dheran让 Ionic 团队休息一下 - 他们肯定会尽可能快地发布测试版,每天 ping 对他们没有任何帮助。 他们在 Angular 上直接与 Google 合作,绝对应该知道 Angular2 rc5 已经出局了。

是的,谷歌就在几个小时前发布了 rc 5。
我相信他们知道这个版本,并且正在努力将其引入 beta 12

@astec真的吗? 希望你不在我们的位置上。
这个问题正在阻止我们上线。 你在这个位置吗?
如果你仔细阅读我的评论。 我问 Ionic 团队,他们能否发布 AoT 补丁(danbucholtz 说它是在单独的分支中完成)作为快速发布而不是 AoT 补丁+其他非优先级错误修复。 如果这不是您的优先事项并且我们的评论是向您发送垃圾邮件,我建议您退订。

@dheran ,我在某个早期测试版时处于您的位置,认为它

这不是关于发布您的需求和经验的主题。 请坚持主题或保持原样。 👍

期待ionic2 beta12。 所有最好的团队:)

嘿@dheran! 很抱歉,您肯定会感到沮丧,我们一直在尽我们所能来让它工作,我可以很高兴地说,我们现在非常接近,它将在 beta.12 版本中与其他一些关键错误一起发布修复。 我们本来希望早点解决这个问题,但过去几周我们一直在使用 angular 来修复一些导致 aot compile 无法正常工作的错误。 我们还花了一些时间来首先为新的 aot 编译优化 Ionic,然后进行所有必要的更改以使用 Angular 2 RC5。 我们不建议您使用上面提到的 dan 分支的原因是,实际构建您的应用程序的 gulp 任务还没有完全完成。 因此,虽然从技术上讲您可以使用它,但实际上无法构建您的应用程序。 一段时间以来,我们一直在使用 Angular 2 rc5 的预发布版本,但是我们必须像其他人一样等待该版本公开发布,然后才能轻松地发布包含它的版本。 我们仍处于测试阶段,这意味着事情正在进行中并将发生变化,这只是测试版软件的游戏名称。 最后,在与社区中的其他人互动时,您是否介意牢记我们的行为准则? 感谢您使用 Ionic! 此外,如果您想查看正在进行的工作,可以查看我们的会议记录(也在 Twitter 上分享)和我们的路线图

我不确定,但也许加速 ionic 的主要进展是在ngmodule 分支中进行的。 我错了吗?

好地方@msaelices ! 实际上,目前大部分框架方面的工作都在https://github.com/driftyco/ionic/commits/deeplinks-ngmodule完成。 谢谢!

对我来说,问题不在于初始加载(如引导时),而是每次用户访问他未访问过的页面时。

在等待这个 AoT 编译器进入 ionic 时,我所做的是添加一个名为TemplatePrecompiler的 _splash_ 屏幕(只是一个带有应用程序徽标的 ionic 页面),它包含所有组件(任何@Component我的应用程序,无论它是一个 Ionic 页面还是一个组件)并在运行时一一编译它们。 完成后,我转发到主页。
这真的很有用,因为用户只看到一个需要一段时间的启动画面(我的应用程序约为 5 秒),但一旦全部加载完毕,所有屏幕都会快速运行。 您甚至可以在该启动画面上放置一个进度条。

我在这里创建了一个要点: https :

只是为了给大家一个更新,我们正在积极致力于此。 这是比我们预期的更大的努力,但我们正在向前推进并越来越接近。 我们有一个分支比 master 有近 200 个提交,它包含 AoT 所需的所有更改😄

这将很快到来。 我们已经开始在内部进行测试。 我们还没有准备好进行公开测试。 这是我们的最高优先级项目,整个框架团队都在努力做好这项工作。 目前还没有时间表,但我可以说我们已经到了,我会继续用我们拥有的新信息更新这个线程。

谢谢,

+1

我的 app.bundle.js 是 3.8MB,大...

+1
什么时候发布 beta12? @danbucholtz

关于@prijindal将模板放入组件的方法,这是否与离线编译预期的优化级别相同?
我尝试了这种方法,它节省了 HTTP 请求获取模板的时间,但是在第一次加载视图时仍然存在延迟。 我想这是因为 angular 在第一次视图加载时编译模板的自定义 html。

我对 angular 很陌生,如果有人能向我澄清这一点,我将不胜感激。

@moatazel​​gamal ,

AoT 编译将导致显着的加速。 提前为典型的应用程序运行编译器需要几秒钟的时间,因此这是从运行时中节省下来的时间。 很难说一个典型的应用程序会快多少。 我们仅在一个非常基本的样本上对其进行了测试,启动时间从约 3 秒变为约 300 毫秒。 我们还没有进行足够的测试来了解典型应用程序会看到什么样的数字,但它肯定会更快。

框架的 AoT 更改已经到位(我们认为......到目前为止一切都很好😄),现在我们正在转向使构建过程 A)简单,B)可扩展和 C)尽可能快。 我和团队正在这个 repo 中一起工作。

期待很快听到更多。

谢谢,

@moatazel​​gamal我的方法不是离线编译,它只是内联模板。
离线编译将使初始加载速度更快。

全部,

我们现在正在内部进行大量测试。 本周我们取得了一些重大进展。

谢谢,

你好呀,
我看到 Ionic2 RC0 发布了,这是预期的 beta12 吗? RC0 的更新日志没有提到任何关于 AOT 编译的内容。 我认为这个功能太好了,不能在更新日志中遗漏:)

它被“释放”了。 我们现在仍在用更新日志等来填补空白😄。期待今天晚些时候的官方细节。 昨天我们遇到了技术困难,所以我们有点落后。

谢谢,

嗨,离子团队! 感谢您的辛勤工作!

对此感到非常兴奋。 自从我第一次读到它就无法停止推特。
荣誉离子团队。

在星期四,2016年9月29日,04:19 gisinaction [email protected]写道:

嗨,离子团队! 感谢您的辛勤工作!


您收到此消息是因为您订阅了此线程。
直接回复本邮件,在GitHub上查看
https://github.com/driftyco/ionic/issues/6776#issuecomment -250346182,
或静音线程
https://github.com/notifications/unsubscribe-auth/AAxEjznTYrcKZKFD2rElIqKkWrGIvvUrks5quxIvgaJpZM4Iuokt
.

首先,感谢您取得如此大的进步!
我一直在测试新版本,现在初始加载感觉更快。

我还一直在低规格的 Android 4.4.4 中对其进行测试,以更好地感受性能差异并将其与 Ionic 1 进行比较。
使用 Ionic 2-rc0,我发现这些近似结果:

| 项目 | 冷启动 | 热启动 |
| --- | --- | --- |
| ionic1-tabs | 4,5 秒 | 3 秒 |
| ionic2-tabs | 5 秒 | 3,5 秒 |
| ionic1-sidemenu | 5 秒 | 3,5 秒 |
| ionic2-sidemenu | 5 秒 | 3,5 秒 |
| 时钟(本机应用程序)| 1 秒 | <1 秒 |

  • 使用这些命令创建的项目:
ionic start myTabs1 tabs
ionic start myTabs2 tabs --v2
ionic start mySidemenu1 sidemenu
ionic start mySidemenu2 sidemenu --v2

尽管这些项目不是完全相同的实现,但它们为我们提供了比较的起点。

即使使用 ionic 2-rc0,基本项目在冷加载时也需要大约 5 秒,而在之前已经加载时需要大约 3.5 秒。 这些时间与我在 Ionic 1 版本中发现的时间大致相同。
介绍 Ionic2 RC0

我们知道剩余的秒数都花在哪里了吗? (例如,启动 Javascript 引擎/webview、Cordova 插件、Angular 2 加载,...)?

可以优化这些秒数以获得更接近本机应用程序的体验吗?

@SynerG ,很棒的信息。 我现在有点忙于其他一些东西,但我们很快就会收到更多反馈。 谢谢你把它放在一起!

谢谢,

我创建了一个带有侧边菜单的新 ionic2 rc-0 项目。 我使用了ionic serve --lab,当我点击标题栏左侧的图标时,菜单没有出现。 仅当我滑动或单击它滑动的菜单工具按钮时

@danbucholtz我要感谢 Ionic 团队发布 RC0! 尽管由于所有更改,我不得不投入一些时间来迁移我的应用程序,但我的应用程序的启动时间得到了显着改善! 例如,在使用了 3 年的三星 Galaxy 4 上,beta 11 的启动时间为约 6 秒,而 RC0 减少到约 3 秒! 这是一个很大的改进,做得很好:)

@abhayastudios ,w00t! 谢谢!

我们也有更多改进和优化!

谢谢,

我们的加载时间也减少了约 50%。 伟大的工作伙计们。 真的很喜欢使用这个框架。

我知道这无济于事,但我最近才开始研究 ionic 并且我正在使用 2.0.0-rc.2 ,我注意到初始加载与构建在 1.1.1 上的应用程序相比有多慢

@geocine我注意到了同样的事情,在较旧的 v1 应用程序中,启动时间非常好,但是虽然 Ionic v2 提供了更好的编程环境,但我的应用程序中的启动时间非常慢(在相对较配备 Android 6.0 的快速设备)。 Webpack 构建是否在做摇树?

如果加载真的需要时间,也许有办法至少显示一个闪屏,我可以在加载过程中在一秒钟内显示?

@geocine这就是为什么您通常使用cordova 启动画面插件(https://github.com/apache/cordova-plugin-splashscreen)并将其隐藏在DeviceReady 上的原因。

有没有简单的方法来分析应用程序启动时间? 我正在使用 Chrome 远程调试器来分析应用程序,但是这让我只有在应用程序已经初始化后才能连接到应用程序(因此我无法分析启动)并且在我退出应用程序时它会关闭,因此我无法重新启动它并分析应用程序这样启动。

我问这个是因为我在 Android 上的应用启动时间有问题,超过 5 秒。
即使我使用普通的 Ionic 2 教程应用程序,它也会在性能相对较高的设备(Sony Z3 compact,6.0.1)上在 4-5 秒后启动。
这真的很慢(我的带有一些插件的旧 Ionic 1 应用程序需要 < 3 秒才能启动)。

是否有(显着)减少 Ionic 2 应用程序启动时间的计划?
使用 Ionic 2 进行开发很棒,但我担心否则我将不得不切换到另一个框架:-(

是否有计划增加对延迟加载的支持,这也有助于减少初始加载时间。 使用 webpack 的 Angular cli 现在支持延迟加载,并且通过 AoT 设计良好的 Angular 应用程序可以显着减少加载时间。 由于 Ionic 也使用 webpack,我认为 Ionic 也可以这样做。

对延迟加载的迫切需求。

ionic team meeting doc 说他们正在研究treeshaking ,所以这可能会减少包的大小,并会加快启动时间。

摇树很棒,但它只能做这么多。 延迟加载是一个重要的单独问题,到目前为止,根据我在其他问题中看到的评论(例如 https://github.com/driftyco/ionic/issues/8102),离子团队还没有对它表示太多兴趣)。 不幸的是,许多人似乎认为它只在 Web 应用程序中有用,尽管它在移动应用程序中也非常有用。

@rob3c和其他人,

延迟加载是我们正在研究并希望探索更多的东西。 预计在接下来的几个月里会听到更多关于这个主题的信息。

谢谢,

@danbucholtz
除了延迟加载之外,您是否正在探索任何其他可以显着减少启动时间的解决方案?

现在,这是我们不在新项目中采用 Ionic 2 的第一个原因。
我不知道您是否可以与我们分享一些有关正在进行的工作的信息。
谢谢!

嗯,这通常是 javascript 的问题,而不是特定于 ionic 的问题。 看看其他框架正在做些什么很有趣。 例如,我在“竞争”框架的网站上偶然发现了一篇相关文章,使用 v8 引擎中所谓的“代码缓存”来极大地提高启动性能。

由于 AoT,Angular 2 切换到模块后,启动时间变得更糟。 在 NativeScript 中,也有启动时间长的问题,没有 Angular 2 似乎没问题(https://github.com/NativeScript/nativescript-cli/issues/371)。 在 6 月份,我的应用程序启动速度相对较快,但是在 Ionic 2 切换到较新版本的 Angular 2 之后,现在需要 >= 5 秒并且无法用于生产。 您是否知道有任何 Angular 2 改进正在改进这一点,或者是 treeshaking 和延迟加载是唯一的方法?

@Kobzol

这很奇怪,AoT 肯定会显着加快启动时间(通常,无论如何,我确信存在边缘情况)。

@SynerG

AoT 的启动时间非常快。 你确定你在用 AoT 测试? 我们的捆绑包大小仍然相对较大,我们正在努力降低它。 除非您导入一堆大型库,否则它并不是很大。 很多时候,由于一堆嵌套的依赖关系,小库变得巨大。

谢谢,

我不知道我是否做错了什么,但我尝试使用 webpack 和 rollup 运行 Ionic 2 教程入门模板的 AOT prod 版本,并且在我的设备上启动需要 > 5 秒(Sony Z3 Compact with Android 6.0.1),而较旧的 Ionic 1 应用程序在 3 秒内启动。
在过去的几个月里,当 Angular 2 切换到模块系统时,启动变得更糟(我的 nativescript 应用程序也是如此,它在 Angular 切换后变慢了)。 也许延迟加载可以帮助解决这个问题。

你有任何可以用来比较的基准数字吗?

与我所看到的相比,5 秒并不是那么糟糕。 我不得不提高 config.xml 中的超时限制以确保它不会超时(默认为 20 秒!)。

不过,那是针对较慢的 4.4 设备。 在具有 6.0 的 Sony Xperia E5 上,它仍然是 10-15 秒。

iPhone 7 plus 不到 2 秒。

你的包有多大? 您是否使用了大量第三方库?

谢谢,

嗨,丹!

我觉得没什么太疯狂的。

我使用 webpack 和 AoT 的包大小是 1.9MB。

package.json 中的依赖

...
  "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",
    "@biesbjerg/ng2-translate-po-loader": "^0.1.3",
    "@ionic/app-scripts": "0.0.46",
    "@ionic/storage": "1.1.6",
    "@ngrx/core": "1.2.0",
    "@ngrx/effects": "2.0.0",
    "@ngrx/store": "2.2.1",
    "angular2-uuid": "1.1.0",
    "ionic-angular": "nightly",
    "ionic-native": "2.2.7",
    "ionicons": "3.0.0",
    "ng2-translate": "^4.1.0",
    "ngrx-store-freeze": "0.1.4",
    "ngrx-store-logger": "0.1.7",
    "pofile": "^1.0.2",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@biesbjerg/ng2-translate-extract": "^0.1.1",
    "@ionic/app-scripts": "0.0.46",
    "@types/cordova-plugin-media": "0.0.3",
    "del": "^2.2.2",
    "fs": "0.0.1-security",
    "path": "^0.12.7",
    "typescript": "2.0.10"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard",
    "cordova-plugin-globalization",
    "cordova-plugin-media",
    "cordova-plugin-file",
    "cordova-plugin-compat",
    {
      "locator": "https://github.com/EddyVerbruggen/cordova-plugin-backgroundaudio",
      "id": "nl.x-services.plugins.backgroundaudio"
    },
    "cordova-plugin-app-version",
    "cordova-plugin-x-socialsharing",
    {
      "locator": "https://github.com/biesbjerg/cordova-plugin-inapppurchase.git",
      "id": "cordova-plugin-inapppurchase"
    },
    {
      "locator": "https://github.com/driftyco/cordova-plugin-wkwebview-engine.git",
      "id": "cordova-plugin-wkwebview-engine"
    },
    "cordova-plugin-google-analytics",
    "cordova-sqlite-storage"
  ],
...

你好,
我也想与启动时间分享我自己的信息。
实际上,我正在将旧的 Ionic V1 放到 V2(从头开始重写所有内容)。

我的带有人行横道的旧应用程序从 3 到 4 秒启动(取决于设备)。
新应用程序需要 6 到 7 秒(更有可能是 7 秒)。

我已经尝试过 RC3 以及每晚构建(离子框架版本:2.0.0-rc.3-201612021933)

Package.json:
{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "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/storage": "1.1.6",
    "ionic-angular": "^2.0.0-rc.3-201612021933",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "moment": "2.15.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.44",
    "typescript": "2.0.9",
    "webpack-bundle-analyzer": "^1.5.3"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "o2: An Ionic project"
}

我的资产文件夹(第三方插件/图像)大约 2.14 MB。
我使用了 6 个不同的第三方插件(jQuery、moment、hammer、jquery 3.1、fullcalendar、svg-panzoom、fontawesome)。

APK 大小为:6.58 MB
解压此包为:15 MB。

折叠式的:

  • 资产:10.1 MB
    -> www/assets : 2.93 MB
    -> www/build: 7.07 MB
    -> www/build/main.js: 3.003 MB
    -> www/build/main.js.map: 3.790 MB(生产环境需要这个吗?)
  • 资源:1.73 MB
  • 类.dex:3.07 MB
  • 资源.arsx:0.13 MB

离子版本信息:

Your system information:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3-201612021933
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.44
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v6.9.1
Xcode version: Not installed

也许它会有所帮助,如果您@jgw96可以使用我的实际项目来调试这个问题,我很乐意分享它(私人)。

你好
柚子

我认为应该为生产构建禁用源映射。 Angular CLi 最近添加了一个禁用它的选项https://github.com/angular/angular-cli/pull/3262

Graphefruit 能否请您分享一下您的应用程序的组件数量和指令?

你好@naveedahmed1
开始了:

  • 服务:10
  • 管道:3
  • 页数:~49
  • 自定义配置:1
  • 指令: 0 ( ;) )

你好
柚子

@naveedahmed1这个问题是关于不内联源映射,我同意这在生产中可能不是最好的主意。 但是,生产资产的外部地图文件可能很有用,并且只向已部署的文件添加一个小注释。 我绝对希望能够为生产版本生成外部地图文件。

@rob3c

它将是可配置的。

谢谢,

@danbucholtz ,我们真的需要改进启动时间。 在我的三星 Galaxy S4 Android 版本 5.0.1 上,即使是从 Play 商店下载的 ionic-conference-app 也需要 9-10 秒。
这是我下载的应用程序 --- https://play.google.com/store/apps/details?id=io.ionic.conferenceapp

在同一部手机上,我的几页应用程序的启动时间约为 7-8 秒。

因此,我尝试通过 Developer-Tools 附加我并获得了相当不错的时间轴结果。
由于附加,我无法从头开始跟踪,但您会看到发生了什么:
image

编译脚本大约需要 500 毫秒,评估脚本从 0 毫秒到 5000 毫秒。

如果需要@danbucholtz @jgw96,我可以向您发送保存的时间表。

你是如何设法描述这个的? 在应用程序完全启动之前,我无法连接到应用程序。

顺便说一句,我不知道这对您来说是否是一个好结果,但遗憾的是,对于我的客户来说,> 5/6 秒的启动时间是不可接受的。

@Kobzol这不是一个好的结果,页面也需要 7s ~ 。
我所做的:打开一个页面,查看您的附加设备列表,第一次正常启动应用程序,打开“检查器”切换到时间线选项卡
现在关闭应用程序,检查器,现在再次启动应用程序,按检查,按时间轴选项卡中的超快速记录按钮;)
应用程序启动时的前 1-2 秒我也无法连接,但其余的可以通过一些快速的手指来完成。

更新:使用 Ionic1,我的启动时间为 3-4 秒,这对我来说是可以接受的

你是用AoT建造的吗? 那些时间似乎很慢。

谢谢,

@danbucholtz ,就我而言,我从 Play 商店下载了 ionic-conference-app,很确定它会被 AOT 编译,请在此处查看我的评论

@savavadalia ,

我们将其从 Play 商店中撤出,因为它实际上并未捆绑 AoT。 我们的开发人员在发布之前犯了一个错误。 我们将很快重新发布新版本。

你能安装最新版本的 ionic CLI 和 app-scripts 吗?

npm install -g ionic<strong i="9">@latest</strong>
npm install @ionic/app-scripts<strong i="10">@latest</strong>

然后运行ionic build android --prod --release ? 这将为您提供带有优化 APK 的 AoT 构建。 即使在慢速设备上,它的启动速度也应该比 9 秒快得多。

谢谢,

@Dan你在什么设备上测试这个? 即使每个包都更新了,我也不能低于 6 秒,而且从我在这里看到的情况来看,其他人也有类似的经历。

有没有人设法安装最新的应用程序脚本?

更新问题:

如果我尝试安装最新的应用程序脚本,我会收到以下错误:(我之前安装了 ionic @latest

C:\Users\graphefruit\Documents\o3>npm install @ionic/app-scripts<strong i="9">@latest</strong>
ionic-hello-world@ C:\Users\graphefruit\Documents\o3
`-- @ionic/[email protected]  invalid
  +-- [email protected]
  +-- [email protected]
  `-- [email protected]
    +-- [email protected]
    `-- [email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.0.15: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"
})

在此之后,我开始了一个完整的新项目ionic start o4 --v2并出现相同的错误。

也许我没有得到更新机制 - 我需要把自己抓到package.json ,还是需要删除node_modules文件夹?
我尝试更新手动设置的应用程序脚本,并运行 npm install,但它崩溃了。
package.json 都没有自动更新为0.47

所以我现在用0.0.45--prod --release构建项目

_启动时间也是7-8s。 _

@danbucholtz我想

萨凡

@danbucholtz我更新到最新的 ionic-app-scripts 并开始收到这个错误(见下面的截图)。
我也严格遵循发行说明中提到的升级程序。

你能帮忙解决这个问题吗?

image

谢谢
萨凡

@graphefruit我在项目级别安装最新的 ionic-cli 和安装 npm 包没有任何问题。 我希望您遵循此处的发布程序。 但是,正如我上面提到的,我收到了一个不同的运行时错误“模块‘AppModule’声明的意外值‘未定义’”。

同时使用--prod --release运行0.0.45 --prod --release也无济于事。 Dan 要求使用0.0.47版本运行它,从0.0.47 ,这将是生成生产版本的方式。 使用之前的 ionic-app-script 版本ionic run android默认生成生产版本。

@savavadalia感谢您的反馈,在程序中没有写太多。
我还开始了一个新项目,之前做过npm install -g ionic@latest
所以你刚刚在你的项目文件夹中运行了这两个命令? 或者你做了什么具体的?
就像我说的,我已经尝试删除node_modules文件夹,之后又删除了npm-install
但在我看来,当package.json没有更新到最新的 app-scripts 版本时,它无济于事。 0.47但是当我手动执行此操作时,它会崩溃得更多...

通常他们会在更新日志中发布最新的 package.json 以及要更新的内容。

更新,终于设法用这些命令解决了它:

npm install ionic-angular<strong i="18">@nightly</strong> --save
npm install @ionic/app-scripts<strong i="19">@latest</strong> --save-dev

让构建开始。

构建测试

所以,构建通过了,有趣的事实 - 我需要“strg +c”,因为 ngc-started 显示了超过 10 分钟,在此之后,构建继续进行,第二次运行没有任何问题。

大小:9.2 MB
main.js.map在为生产构建时仍然存在

启动应用程序需要 7-10 秒(取决于设备),所以它看起来比以前更糟。
(注1、注2)

在 Google Pixel XL 上,启动时间约为 4.5 到 5 秒
与我的旧应用程序版本相比,它仍然慢 1-2 秒(启动时间为 3.5 秒)

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3-201612142137
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v6.9.1
Xcode version: Not installed

更新 2:

我刚刚将旧版本的大小与 0.45 和 0.47 进行了比较 - main.js 的大小(接近约 10kb)相同 - 3MB。 - 不知道这是否也应该受到影响。

更新3:

这是 15 分钟尝试加载后的最佳快照:
image

@danbucholtz我自己设法解决了运行时错误,它与角桶有关。 我必须在 app.module.ts 文件中引用具有完整路径的模块。 不知道为什么它开始使用较新的脚本版本失败!

但是,在修复错误并在我的三星 Galaxy S4 Android 5.0.1 版上运行ionic run android --prod --release ,初始加载仍然是 7-8 秒。 将其更新到最新的 ionic-app-scripts 版本后,初始版本完全没有变化。

我们真的需要改进初始加载时间。 我个人不认为我使用的手机和 Android 版本相对较旧,启动时间很慢。 我会很高兴在旧中档手机上启动时间在 3-4 秒之间。


@graphefruit ,我做了发布过程中没有提到的 2 个步骤
1)我手动修改了 package.json 文件以将脚本版本更改为0.0.47 ,然后运行 ​​npm install。
2)我还删除了 .tmp 目录,根据发行说明,该目录对新构建过程无效。

除此之外,我只是按照发布程序进行操作。

你在运行最新的 ionic cli 吗? 你能验证吗? npm install -g ionic@latest

你能运行npm run ionic:build --aot并验证ngc在终端中运行吗? 当您运行ionic run android --prod --release ,您是否在终端中看到ngc

谢谢,

你好@danbucholtz

是的,我在运行 --prod --release 时看到了 ngc。
此外,我安装了 ionic @latest超过 4 次;) 通过 cmd 没有任何错误 - 也许我们需要更改 package.json 中的一些设置 - 它们不是自己升级的。
我也安装了 nightly 可能会看到一些差异。

我可以尝试明天早上运行的另一个命令。

你好
柚子

@danbucholtz

是的,我使用的是最新的 ionic-cli(请在最后查看我的工作区环境信息)
在您提到的两种情况下,我还在终端中看到ngc请查看每个屏幕截图
1) npm run ionic:build --aot
2) ionic run android --prod --release

1)AOT构建
image

2)在设备上运行时的生产构建

image

对我来说,7-8 秒的初始加载时间仍然没有区别 😞 😞

cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.1
Xcode version: Not installed

@savavadalia长加载时间可能特定于您的应用程序。 如果您尝试为入门应用程序或离子会议应用程序提供数字,那么数字将具有可比性,这将有所帮助。

升级到ionic-angular RC4也很有意义。

@danbucholtz Care,这篇文章会更长一点:

我的/自定义项目

npm run ionic:build --aot
image

ionic run android --prod --release
image

ionic build android --prod --release
image

还有 10 秒的加载时间。

入门应用

@astec在您询问之后,我已经安装了入门应用程序。
并在这里做了同样的事情。

  1. npm install -g ionic@latest
  2. ionic start o5 --v2
  3. ionic info
Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v6.9.1
Xcode version: Not installed
  1. ionic platform add android
  2. npm run ionic:build --aot
    image
  3. ionic run android --prod --release
    image

  4. 次数:
    7.1 Note 1 - Android 4.1 - 启动项目大约需要 5 到 5.5 秒
    7.2. 注 2 - Android 7.0 (CM14) - 启动项目耗时约 5.5 到 6.5 秒

会议 - 应用程序

所以接下来尝试我已经下载了入门应用程序: https :

  1. npm install
  2. ionic info
    image

-> 看起来这个不在 rc.4 上,原因是

  1. 我像更改日志中提到的那样更改了 package.json。
"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/storage": "1.1.6",
  "ionic-angular": "2.0.0-rc.4",
  "ionic-native": "2.2.11",
  "ionicons": "3.0.0",
  "rxjs": "5.0.0-beta.12",
  "zone.js": "0.6.26"
},
"devDependencies": {
  "@ionic/app-scripts": "0.0.47",
  "typescript": "2.0.9"
}
  1. 已删除node_modules
  2. npm install
  3. ionic info
    image
  4. ionic platform add android
  5. npm run ionic:build --aot
    image
  6. ionic run android --prod --release
    image
  7. ionic build android --prod --release
    image
  8. 启动次数
    11.1 注释 1 - Android 4.1 - 7- 8s
    11.2 注释 2 - Android 7 (CM 14) - 7 - 8.5 秒

时间是通过“点击应用程序图标”直到屏幕出现内容来衡量的
所以即使是最新发布的会议应用也需要 7-8 秒,所以它不是一个自定义发布项目。
即便如此,会议应用程序仍然很小,没有大的互联网活动,或 html-5 文件系统。

希望这可以帮助。
你好
柚子

@jgw96 ,你能在上面权衡一下吗? Justin 是我们常驻的 Android 专家。 我最初的想法是那些真的很旧(第 7 代)的旧手机,这可能是一个因素,但我会听从贾斯汀的意见。

谢谢,

FWIW 我有 Sony Compact Z3,它并不是那么老,而且 Android 6.x 上的时间几乎相同。

@jgw96 @danbucholtz我现在也在我的 Google Pixel 上安装了它——会议应用程序的启动时间——用了 3.5 到 4 秒。
有趣的事实:我有 10 次启动时间为 8-10 秒 - 然后我再次删除并安装了该应用程序,时间再次下降到 3.5 到 4 秒。

@graphefruit是的,但重新安装不是正确的方法。 ;-)
有趣的(分析)会是,在同一设备上花费了这么多时间以及其他(角度)框架(Ionic 1、OnsenUI 等)启动简单的“hello world”应用程序的速度有多快。
我的(不太旧)Moto G2 上的 RC4 conf 应用程序的启动时间约为 6 秒:-/

@mpaland是的,这不是正确的方式,但有时提供您找到的所有信息是最好的方式,希望 ionic 可以使用它们。
就像我之前在一些帖子中提到的 - 我正在将我的 Ionic1 应用程序移植到 Ionic2,启动时间从 3 秒到最多 4 秒。
移植项目在同一设备上需要 7-8 秒。

HTC One M8 (Android 6.0 - Vanilla)

因此,根据您的建议,我安装了一个 Ionic1 项目:

  1. ionic start myproject
  2. ionic platform add android
  3. ionic build android
  4. Ionic1 - HTC One M8 (Android 6.0) 上的 Startime 大约为 2.5 秒。
  5. Ionic 2 - 会议应用程序 - 开始时间:5 秒
  6. Ionic 2- 入门应用程序 - 启动时间:4 秒
  7. Ionic 1 - 我的自定义项目:4 秒
  8. Ionic2 - 我的自定义项目:7 秒。

震惊! - 忽略这句话。

因此,即使使用 ionic 2 中的入门应用程序,差异仍然约为 1.5 秒
HTC One M8 于 2014 年 3 月发布

摩托 G (Android 5.1)

因此,我们使用下一个设备 - Moto G - Android 5.1。

  1. Ionic1 - 4.5 到 5.5 秒
  2. Ionic 2- 会议应用程序:8.5 到 10.5 秒
  3. Ionic 2 - 入门应用程序:6 到 6.5 秒
  4. Ionic 1 - 我的自定义项目 - 5.5 - 6 秒
  5. Ionic 2 - 我的自定义项目 - 7-8 秒。

所以如你所见,我们仍然有 1.5 秒的差异,会议应用程序需要更多的时间
Moto G 于 2013 年 11 月发布

所以我认为现在应该回答所有问题。

_是的:ionic2 中的每个项目都是用 RC4 和 appscripts 0.0.47 编译的 - 在任何人问之前_

您使用的是最新的 Ionic CLI 吗? 你的包有多大? 你能用npm run ionic:build --aot编译它并验证platformBrowserDynamic不在那里吗? --aot应该跳过缩小,但仍为您提供 AoT 构建。

谢谢,

@danbucholtz我会检查它并在 15 分钟内给你更新...... - 也许我犯了一个错误,这篇文章在过去 2 小时内编译了很多 =/ 抱歉

请记住,当应用程序启动时, platformBrowserDynamic基本上必须在浏览器中运行ngc 。 最终无论你是否在做 AoT,你仍然在浏览器中使用 .ngfactory.js` 文件。 在您之前的帖子中大约需要 20 秒。 所以在浏览器中编译 20 秒 + 5 秒启动 = 很长时间。

5秒还是很长的。 有些地方不太对劲。

谢谢,

@danbucholtz你好,丹! 抱歉。 我已经安装了最新的脚本,但是 npm run ionic:build --aot 在我的自定义项目中不可用。 - 我已经在上面更新了我的帖子。

所以我现在新建了一个项目,编译并签名,现在启动时间又回到了7秒。

_我想提到所有其他检查_ - 会议/启动应用程序都带有ionic:build --aot 并且我可以验证 platformBrowserDynamic 在那里是NOT
我已经提取了所有 ZIPS 并查看了main.js

再次抱歉。

@graphefruit为在各种设备上生成此类统计信息付出了巨大努力👍
@danbucholtz @jgw96 ,abt Ionic Team 如何在 Play 商店发布 ionic-conference-app 的生产版本,我们可以下载并为您提供一些初始加载的统计数据。

如果我们的加载时间不匹配,那么我们的构建可能有问题,我真的怀疑是这种情况。

@danbucholtz从 RC.0 开始就是这样,我怀疑有人能够在 5 秒内在 Android 上启动。 Ionic 1 启动时间比 Ionic 2 好。

你能看看它并做一些分析吗?
我知道您首先要确保我们使用正确的程序来构建应用程序,但是这个问题在过去几个月并没有太大变化,当多个用户报告此问题时,它可能不会由构建脚本的错误用法。
五秒(这是这里最好的情况)或更多秒的启动时间对于几乎所有 Android 应用程序来说都是一个阻碍。

我的统计:
Sony Z3 Compact Android 6.0.1 - AOT/prod/minified build(2 MiB JS 包)在有和没有人行横道的情况下启动都需要 6 秒。 在较慢的设备上,它需要更多的时间(测试我的应用程序的用户报告了 10 秒和更多秒)。

@danbucholtz您介意与我们分享您团队的设备测试设置吗? 目前尚不清楚为什么您没有遇到我们其他人似乎遇到的启动延迟。

大家好,非常感谢_非常_详细的诊断和测试信息。 这是我们现在的第一优先事项,虽然我们这里的一些人没有看到一些很长的加载时间,但其他人取决于设备/操作系统/等。 我们正在缩小范围,欢迎您提供任何额外信息。

@mlynch虽然这不是缺少的 5 秒,但它可能值得节省一些时间

https://github.com/driftyco/ionic-storage/issues/54

我有一种直觉,其中一个离子库(存储)正在初始化两次......(而不是一次)。 我可能是非常错误的,但是,在寻求启动性能提升的同时,将其考虑在内,尤其是如果这里存在更广泛的问题

你好,
我测试了另一台设备:

Nexus 7 (2012) - 安卓 4.1

Ionic 1 - Starter-App:4 秒
Ionic 2- 会议应用程序:7 秒
Ionic 2 - 入门应用:5.5 秒
Ionic 1 - 我的自定义项目 - 5.5 秒
Ionic 2 - 我的自定义项目 - 8.5 秒

也许今晚我可以提供另一个来自 Ulefone-Metal 和 Android 6.0 的测试。

你好
柚子

将 Ionic 升级到 2.1.17 并运行ionic run android --prod ,性能显着提高,我的应用程序在 2 到 3 秒内启动。 不知道有什么改变,但我很高兴。 :笑脸:

@PrithiviRajG你能分享更多信息吗?

  1. 你的应用有多大?
  2. ionic info - 信息
  3. package.json - 信息
  4. 已安装的插件/第 3 方库
  5. 您使用的是哪种设备?
  6. 你也可以用starter-appionic conference app测试它吗?
    提前致谢
    柚子

@graphefruit

  1. 我的 Apk 大小为 7MB,WWW 文件夹大小为 7.88MB,插件文件夹为 67.1 MB,资源文件夹为 1.01 MB
  2. ionic info
 ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.39
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.7.0
Xcode version: Not installed

  1. package.json
{
  "name": "ionic-app-base",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.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"
  },
  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/cloud-angular": "0.5.2",
    "@ionic/storage": "1.1.6",
    "angular2-swing": "^0.10.0",
    "ionic-angular": "2.0.0-rc.2",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.21"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.39",
    "typescript": "2.0.3"
  }
}

  1. 已安装的插件
cordova-plugin-device
cordova-plugin-facebook4
cordova-plugin-googleplus
cordova-plugin-nativeaudio
cordova-plugin-splashscreen
cordova-plugin-statusbar
cordova-plugin-whitelist
ionic-plugin-keyboard
angular2-swing
  1. 设备信息:第一代 MOTO G - Android 5.1

    1. 将很快测试启动应用程序和离子会议并让您知道。

@PrithiviRajG感谢您提供信息。 看起来你不是最新的:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.39
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.7.0
Xcode version: Not installed

-> 您使用的是 RC2 而不是 RC4 - 而且离子脚本现在是 0.0.47。

但也许这是@jgw96的迹象?

你好,
我测试了另一台设备:

Ulefone 金属 (Android 6.0)

Ionic 1 - Starter-App:3.5 秒
Ionic 2- 会议应用程序:5 秒
Ionic 2 - 入门应用:4.5 - 4.7 秒
Ionic 1 - 我的自定义项目 - 5 秒
Ionic 2 - 我的自定义项目 - 7 秒

你好
柚子

@mlynch出于好奇只想知道初始加载时间的改善,
它将成为@danbucholtz当前关于摇树的工作的一部分,或者这将是单独的 Android 特定修复?

我从会议记录中了解到丹的工作,喜欢和你们一起工作。 无法相信团队对框架工作的透明度如此之高。 :心:

@savavadalia ,

我们永远不会试图让 Ionic 更快。

现在我们专注于使树抖动正常工作并获得闭包编译器支持。 与替代方案相比,闭包可以产生明显更小的 JS 包,从而导致更快的加载时间。 我们现在也在研究代码拆分,以减少加载和解析 javascript 所需的时间。

谢谢,

@danbucholtz

我目前正在评估消费金融领域新长期产品线的前端和移动技术。 初始加载性能是一个重要的决定因素。

从最近的小规模应用测试来看,iOS/Android 的性能是可以接受的。 浏览器加载性能也不错:稍后我将介绍服务器端渲染。 当我们开始引入更多的页面和第三方模块时,最关心的是初始加载性能。

有没有办法在 Ionic2/Webview 应用程序的初始加载中显示启动画面或任何进度?

他们平均。 应用程序加载所需的时间约为 10 秒。 当人们不得不等待大约 10 秒才能加载应用程序时,这会导致糟糕的用户体验。 不过我的应用程序并不大。

我使用npm run ionic:build --aotionic run android --prod在设备上运行,starter app的初始时间大约是2秒,但是当我使用自己的项目时,它来了

未捕获的错误:找不到模块“./app.module.ngfactory”

我已经删除了 node_modules 和 www,但它不起作用。
当我只运行ionic run android ,我的项目可以运行,但初始时间约为 7-8 秒

这是我的离子信息

科尔多瓦 CLI:6.4.0
离子框架版本:2.0.0-rc.4
离子 CLI 版本:2.1.18
离子应用程序库版本:2.1.9
离子应用脚本版本:0.0.48
ios-deploy 版本:未安装
ios-sim 版本:未安装
操作系统:Windows 10
节点版本:v6.6.0
Xcode 版本:未安装

更新
通过将打字稿降级到“2.0.9”解决了问题

无论我做什么,deviceready 都会在 5 秒后触发。

全部,

为了提供更新,我们对框架本身进行了重大改进,以改进摇树和死代码删除。 我们一直在试验代码拆分和闭包编译器,并在这些情况下大大减少了包的大小。 实验是关键词,在我们为黄金时间做好准备之前,它会有点。 我们正在与 Angular 团队就这个主题密切合作。

Closure Compiler 是一个了不起的工具,但如果您不遵守规则,它可能会破坏许多 3rd 方库甚至您自己的应用程序,因此我们正在努力围绕此创建简单而强大且灵活的开发人员体验。

缩小包大小、代码拆分和提高启动速度是我们的第一要务。

谢谢,

@danbucholtz太好了! 我过去曾向 Angular CLI 团队建议使用闭包编译器。 可能会引入一个开关,使使用闭包编译器进行编译是可选的。 那些拥有可以启用它的闭包编译器友好代码的人,其他人可以以标准方式编译它。 Ionic 团队可以确保核心 Ionic 库和 Ionic native 与闭包编译器完全兼容。 顺便说一句,您想分享使用/不使用闭包编译器可以达到的最佳启动速度吗?

http://hybridtonative.com ,NativeScript 仍然不成熟,但是随着 Ionic 问题的不断出现,开放票的持续或增长以及 webview 技术只是在旋转,它变得越来越有吸引力,迫使开发人员致力于该技术而不是工作用它。 即使是基本任务也需要大量的变通方法、问题挖掘、需要大量代码更新、后续更改和更新,使生产处于永无止境的完善的泥泞基础上,这实际上是修复错误设计选择的错误修复其他错误设计选择。 归根结底,我们付出了代价,它与在 iOS 和 Android 上本地开发应用程序相当。

@barocsi夸张了多少? 您确实意识到 Angular 2 和 ionic 处于他们正在使用的技术的最前沿,并且他们正在努力为我们的开发人员寻找最佳的行动方案? 还要记住,v2 stable 还没有发布。

@barocsi如果您对 Ionic2 不满意,请使用 Ionic1 或编写您自己的 angular 应用程序。
即使使用您自己的 angular 应用程序,您也会偶然发现许多问题,这些问题已经在他们的框架中解决了。
这个框架也是开源的,你可以贡献; 如果您对他们正在处理的速度有任何问题,或者您可以分叉并创建自己的 ionic2-fork。
我不想争论或打破围墙,即使 Ionic2 有一个候选版本,它只是从 beta 版本周期中出来。
所以请给它一些时间,如果您迫不及待,请使用ionic1并使用crosswalk,这已经在这个市场上设置了几年

感谢您的建议,我想知道当前和未来决策的替代方案。 我们已经有了一些强大而沉重的 Ionic V1 和 V2 应用程序,以及近 1.5 年的努力和贡献,解决了这个 github 存储库中的所有问题。 尽管这是一个亲离子线程,我们必须预测这项技术的发展方向,即使某些东西被@dylanvdmerwe标记为尖端,

我可以理解您的担忧,这就是为什么我在自己的繁重应用程序中使用普通的 angularjs。
问题是,我仍然偶然发现了许多问题,因为如果您不是自己编写所有内容或从头开始,您迟早会到达那里。
我在 Angular-Material V1(例如性能)方面遇到了大问题,我需要自己深入研究框架,其余的都是自己用 angularjs 编写的。
但即使在那里,我也遇到了性能问题。
所以我需要花时间在我的“自己的”框架上来寻找并尝试修复它们。
所以我可以理解 Ionic 的问题,因为我自己也陷入了这些问题。
即使他们是一家大/更大的公司,他们的资源也有限。

接下来是 Ionic2 不仅仅是一个 APP,它还提供了一个网站,它还支持 UWP(这很痛苦)并且它支持 PWA。
一个框架中有这么多新功能,主要用于应用程序,但也支持许多其他功能。
有了这个特性,在深入研究它们时会出现很多依赖项和很多问题。
但是你的担忧是有资格的,但我更愿意看到市场上出现的全新技术中的问题,Ionic 试图抓住它们并获得很多依赖。

@danbucholtz

Dan,您对代码拆分、闭包编译器、​​树摇动的评论重新“实验”,这让您倍受鼓舞,并且启动速度是 ionic2(1 月 4 日)当前的第一优先级。 Github 上的 ionic2 会议应用程序示例是一个很好的简单基准测试应用程序,所有人都可以使用它来比较您的进度。 希望你的工作进展顺利(而且很快)。 这些天确实需要 <= 3 秒的启动时间,否则用户可能会“离开”——超过 6 秒,他们肯定会“永远离开”。

使用 --prod 构建并在我的 Nexus 7 (2013) Android 6.0.1 上启动,会议应用程序目前需要大约 8 秒才能启动(平均计时由停止监视多次启动)。

所以,还有很长的路要走,在这里祝你一切顺利!!! - 特别是从有经验的开发人员的角度来看,我真的很喜欢 ionic2 提供的结构和设施。

菲尔

@barocsi我能理解你的情况,
总结一下:我的应用项目必须在 Android、iOS 和 Win10(桌面)上运行,并且需要快速启动,最多 2 秒 - 即使在较旧的(意味着 2 年)设备上也是如此。
由于大量的库和经验,我想用 JS 和 HTML 编写。 这将领域缩小到 WebView 应用程序,而不是本机(Java、Obj C)应用程序。
我需要一定的硬件访问权限,所以 Cordova 是一个不错的选择。 NativeScript、Appcelerator、OnsenUI w/o ng2 ......可能是,但我根本不喜欢这个想法。

目前,我将如此庞大的代码量归咎于 ng2,我不确定适当的 treeshaking 和闭包编译器是否会显着减少更大项目的启动时间(需要 4-5 倍)。 我们需要拭目以待……

@mpaland你已经用过 Ionic1 了吗?
我真的很想看看你如何获得 2 秒的启动时间 - 即使在旧设备上也是如此。
我没有 ionic1 的自定义项目也需要大约 3 秒的启动时间,我在这里使用:

  1. 索引.html
  2. 最小css
  3. 最小.js

就是这样。

您是否已经使用cordova(角度等)完成了如此快速的加载时间?

@graphefruit ,不,我没有尝试过 Ionic 1,也没有尝试过其他任何东西,因为我发现 Ionic 2 最适合我的项目。 正如我所说,我只是在评估不同的选择。 带有 JS 的 WebView 恕我直言仍然是_我_的最佳选择。 所以我期待 ng 和 ionic 团队取得进展。

@graphefruit
我真的希望 ionic2 最终能够实现 <=3 秒的启动,即使在较旧的设备上也是如此。 我已经可以使用另一个混合框架+cordova“开箱即用”来实现这一点。 但是,我更喜欢使用 ionic2,因为它具有建立在 angular2 上的良好血统,这反过来又为其提供了强大的支持、文档、设施等——像我这样有经验的开发人员高度重视的所有东西。

@philrob非常好奇哪个其他混合框架 + Cordova(包括您项目所需的一切)在 3 秒内带给您。 请告诉。

领主
不是真正适合引入其他框架的地方。 我只是希望 ionic2 团队能够显着减少启动时间,使其更接近我 <=3 秒的愿望。

你好
我的 ionic2 应用程序仍然需要 10 秒才能启动。但 ionic1 应用程序只需要 4 秒。如何改善初始加载时间。请建议我。这非常关键

@philrob说真的,检查其他评论,你会很快注意到总是有比较。 哎呀,即使是这个线程也有它们。 您所说的不是谎言,而是解释说您的混合应用程序仅在 Cordova 容器内运行 jQuery(示例),在不到 3 秒的时间内打开,这完全是荒谬的。 使用不处理样式的框架,或者至少不像 Ionic 那样复杂,或者它不依赖任何其他庞大的库(angular2)就像比较白天和黑夜。 这没有意义。

@mobinius-shreesha 将项目作为ionic build android --prodionic run android --prod以获得 5 秒的启动时间。 在调试模式下运行ionic run android会将时间增加到 10 秒以上

领主

不要以为我们不同意。 这就是为什么我特意选择使用 Github 的 ionic2 会议应用程序(使用 --prod 构建)来为我的 Nexus 7 (2013) Android 6.0.1 提供我的启动时间(~8 秒)。 显然,如果另一个框架可以在相同的设备上实现更快的启动时间并仍然提供我需要的设施(包括样式化的 UI 移动小部件),那么对于我来说,它是相关的,

我重复 - 我真的很喜欢 ionic2,因为我之前给出的所有其他重要原因,只是想看到启动速度显着提高。 认为我们需要给 ionic2 团队他们需要的时间......

我也期待增加启动时间。

我认为 Ionic 团队在上周发布了 v1 的 ionic-app-scripts 方面做得非常出色。 这在我的环境中大大改善了构建时间。

我相信他们会对应用程序启动时间做同样的事情。

我认为问题出在其他地方:ionic v2 处于 rc 状态。 然而,这是大多数开发人员必须尊重的:在 Ionic 团队方面,ionic 文档向任何新手建议 v2 已准备好投入生产。 不要反对它是这种情况。 甚至文档现在也默认为 v2。

这种来自团队自愿与否的欺骗行为,某种程度上是行业压力的结果。 Ionics 唯一的生存依赖于在社区切换到不同的新兴跨平台技术之前布局具有大型开发基础(js+angular2)的高级东西,例如我之前提到的那个:Nativescript

所以Ionic teem 必须建议v2 是Ionic 的事实上的版本。 但在这种情况下,价格标签可能会更高:推出一个关键部件有错误的产品而没有尽快修复会导致社区的不信任,这有时比等待几个月才将产品定位为前沿更危险成熟的重大升级。

开发人员必须生产,每退一步或缺乏修复都会使他们转向其他解决方案,以对冲自己的未来和对客户的稳定性。

有任何更新吗? :)

@PrithiviRajG感谢您的回答。我可以在 10 秒内启动该应用程序。但是 ionic2 是否有任何更新以改善启动时间。当他们计划发布 ionic2 的完整版本时,您有什么想法。

14.99 秒冷启动,安装当前插件和当前 ionic 版本:

com-badrit-base64 0.2.0 “Base64”
com.synconset.imagepicker 2.1.7 "ImagePicker"
科尔多瓦插件相机2.3.1“相机”
科尔多瓦插件兼容 1.1.0 “兼容”
科尔多瓦插件控制台 1.0.5 “控制台”
科尔多瓦插件设备 1.1.4 “设备”
cordova-plugin-dialogs 1.3.1 “通知”
cordova-plugin-nativestorage 2.2.0 "NativeStorage"
cordova-plugin-secure-storage 2.6.3 “SecureStorage”
cordova-plugin-spinner-dialog 1.3.1 “SpinnerDialog”
cordova-plugin-splashscreen 4.0.1 “Splashscreen”
科尔多瓦插件状态栏 2.2.1 “状态栏”
科尔多瓦插件白名单 1.3.1 “白名单”
离子插件键盘 2.2.1 “键盘”

您的系统信息:

科尔多瓦 CLI:6.4.0
离子框架版本:2.0.0-rc.1
离子 CLI 版本:2.1.18
离子应用程序库版本:2.1.9
离子应用脚本版本:0.0.48
ios-部署版本:1.9.0
ios-sim 版本:未安装
操作系统:macOS Sierra
节点版本:v6.9.2
Xcode 版本:Xcode 8.2.1 构建版本 8C1002

@tryadelion当前的离子版本是 rc4,而不是 rc1。

各位,等RC5或发布吧,这方面应该会有很多变化。

我如何强制对 rc4 进行离子更新? 是否还有其他过时的事情可能导致我的延迟?

对我来说,ionic v1 中的一个复杂项目是 1.8MB build.js,v2 一个基本项目 main.js 超过 6.7MB。
添加或删除 Cordova 插件不一定会影响启动时间。

嗨,大家好! 我们将关闭此问题并暂时锁定线程。 在这一点上,我们已经做了很多工作来改善加载时间、框架速度,并使其在任何地方都能正常工作。

这将永远是一个不断变化的目标,也是我们不断思考的问题。 虽然这个问题一开始很有帮助,但它已经出轨了,不再是一个明确的问题。 如果您有任何其他问题,请打开一个新的,其中包含我们要求的所有信息。

此页面是否有帮助?
0 / 5 - 0 等级