加载的初始加载时间长？答案

【问题标题】：Long initial loading time to load?加载的初始加载时间长？
【发布时间】：2017-09-29 14:05:15
【问题描述】：

我们寻找了市场上最好的平台，我们选择了 ionic 作为开始。在大家的信任下，随着您的进步，我们不断在 ionic 上从 VERSION 1、VERSION 2 和现在的 VERSION 3 转换和更新我们的应用程序。

我们现在卡在应用程序的加载时间上，加载时间需要 2 分钟。

问题来了，

在版本 3 中

ClassHours 共有 23 页。我们已将它们全部分离到@NgModule。
之前所有组件和页面都包含在 app.module.ts 中。现在只包含 myapp 页面、浏览器模块和 HTTP 模块。

不过，mainjs 的大小是 4mb，这使得构建变得很重。任何用户加载应用程序都需要 2 分钟的时间。（参考图片）。

这是我们测试站点 54.254.254.112 的链接。请在此处检查问题并使其成为移动视图。

( 我们测试帐户的凭据手机号码 - 0000000000 密码 - 000000)

这是我们正在使用的部署过程-

ionic build browser

将/www从/platforms/browser复制到ec2亚马逊实例 并运行 nginx 指向 index.html of /www

Service Worker 也已启用，这有助于我们缩短第二次加载时间。

用 - 指导我们

我们如何将 mainjs 的大小从 4mb 减小？

或

部署过程是否存在问题？

如何减少首次加载时间？

我们需要您的指导以实现简洁快速的用户体验。

应等待肯定的答复。

main.js 所用时间：

【问题讨论】：

你试过用--prod --release标志构建吗？
感谢 suraj，是的，它就是这样修复的。非常感谢！
好的..添加答案..

标签： ionic2 ionic3

【解决方案1】：

对于生产环境，使用--prod --release 标志。

ionic build browser --prod --release

【讨论】：

【解决方案2】：

在带有ionic build 的 Ionic 3 中，--prod 将导致它使用缩小、AoT 编译等，并大大降低您的 main.js 文件（我看到它现在是 745KB）

我还没有找到明确的答案（我认为这将取决于您在应用程序中所做的事情）但您应该能够使用 /www 中的“非科尔多瓦”构建而不是 /platforms/browser/www .这基本上不包括所有那些cordova 插件js 文件，几乎将对服务器的请求数量减半。（也没有 config.xml 和启动画面）

/www 的内容可能不会根据您上次构建的内容而缩小，因此您需要执行--prod 构建，可以来自ionic build browser --prod，也可以运行npm run build --prod（未记录）到只需在 prod 模式下构建 /www。

生成的index.html 仍然包含对cordova.js 的引用。您可以手动删除它，也可以在服务器上留下一个 0 字节的 cordova.js（1 个额外请求）。或者两者都做，以防您忘记删除它。

您的splash.gif 为 1.5MB，是迄今为止最大的文件。在我的浏览器中，它也仅在 main.js 完成后才开始加载。而是看看一些不错的基于 CSS 的“微调器”，然后将其内嵌在您的 index.html 中。或者您可以在页面中间使用您的徽标。例如： https://projects.lukehaas.me/css-loaders/ http://tobiasahlin.com/spinkit/

如果不包括cordova，您将没有启动屏幕插件，因此没有启动屏幕，但幸运的是，您可以在index.html 中的<ion-app></ion-app> 中粘贴一些代码，这些代码将在加载网站时使用（如果您忽略，则忽略曾经编译和实际的应用程序）。

我还注意到您的 nginx 服务器没有进行任何 gzip 压缩。这可以大大减少main.css 和main.js 的传输数据（可能是大小的1/3）。

另一个巧妙的“技巧”是直接设置您的实际index.html 样式（内联样式，因此无需额外请求）以包含您的背景图像，至少可以提高加载速度。

TL;DR:

使用--prod
使用 Gzip 压缩
跳过科尔多瓦
编辑 index.html 以添加轻量级启动画面，删除 cordova.js，使其内嵌样式有点像您的应用程序

【讨论】：