加载的初始时间很长？

Question

我们找出了市场上最好的平台，我们选择了离子作为开始。有了所有的信任，我们继续转移和更新我们的应用程序从版本1，版本2，现在版本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 amazon实例，并运行nginx指向index.html of /www

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

带着-

1. 我们如何将主机的大小从4mb减少？

或

1. 部署过程有什么问题吗？

如何减少第一次加载时间？

我们需要您的指导，以实现一个整洁和快速的用户体验。

等待一个积极的回应。

Main.js占用的时间：

​

Answer 1

对于用于生产的构建，请使用--prod --release标志。

ionic build browser --prod --release

Answer 2

在使用ionic build的Ionic 3中，--prod将使用小型化、AoT编译等方法使main.js文件大幅度下降(我看到它现在是745‘s)。

我还没有找到明确的答案(我认为这将取决于您在应用程序中所做的事情)，但是您应该能够使用/www中的“非cordova”构建，而不是/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 (一个额外的请求)。或者两者都做，以防你忘记移除它。

您的splash.gif是1.5MB，是目前为止最大的文件。在我的浏览器中，它也只在main.js完成后才开始加载。最好看看一些不错的基于CSS的“旋转器”，然后将它内联地包含在您的index.html中。或者你可以在页面中间使用你的徽标。https://projects.lukehaas.me/css-loaders/ http://tobiasahlin.com/spinkit/

通过不包括科多瓦，你不会有启动屏幕插件，所以没有启动屏幕，但幸运的是，你可以把一些代码插入你的<ion-app></ion-app>在index.html，这将被用于加载网站(如果你曾经编译和实际的应用程序被忽略)。

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

另一个巧妙的“技巧”，你至少可以增加加载速度的感觉是直接样式的实际index.html (内联风格，所以没有额外的请求)，以包括您的背景图像。

TL;DR：

1. 使用--prod
2. 使用Gzip压缩
3. 跳科多瓦
4. 编辑index.html以添加轻量级的闪屏，删除cordova.js，将其内联为类似于应用程序的样式