加载初始加载时间长？

Question

我们寻找市场上最好的平台，我们选择离子作为开始。凭借所有的信任，我们不断改变和更新我们的应用程序，从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 指向/www的 index.html

还启用了服务工作者，这有助于我们改善第二次加载时间。

指导我们 -

1. 我们怎样才能将mainjs的大小从4mb缩小？

或

1. 部署过程是否存在问题？

我们如何减少首次加载时间？

我们需要您的指导，以便获得简洁快速的用户体验。

应该等待积极的回应。

main.js所花费的时间：

Answer 1

要构建生产，请使用--prod --release标记。

ionic build browser --prod --release

Answer 2

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

我还没有找到确定的答案（我认为这取决于你在应用中做了什么），但你应该能够使用/www中的“非cordova”版本代替{ {1}}。这基本上不包括所有那些cordova插件js文件，几乎减少了对服务器的请求数量。 （也没有config.xml和splashscreen）

/platforms/browser/www的内容可能不会缩小，具体取决于您上次构建的内容，因此您需要进行/www构建，可以来自--prod，也可以{ {1}}（未记录）只在prod模式下构建ionic build browser --prod。

制作的npm run build --prod仍然包含对/www的引用。您可以手动删除它，也可以在服务器上留下0字节的cordova.js（1个额外请求）。或者两者都做，以防您忘记将其删除。

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

不包括cordova你不会有启动画面插件所以没有启动画面，但幸运的是你可以在splash.gif index.html中添加一些代码，这些代码将在加载网站时使用（如果您编译和实际应用程序，则忽略它。）

我还注意到你的nginx服务器没有进行任何gzip压缩。这可以减少<ion-app></ion-app>和index.html的传输数据（可能是大小的1/3）。

您可以使用另一个简洁的“技巧”来至少增加加载速度的感觉，就是直接设置实际的main.css样式（内联样式，以便没有其他请求）来包含背景图像。

TL; DR：

1. 使用main.js
2. 使用Gzip压缩
3. Skip cordova
4. 编辑index.html以添加轻量级闪屏，删除cordova.js，使其内联样式有点像您的应用