Question

我最近使用ember.js创建了我的第一个Web应用程序。当我在路线之间移动时，它们加载所需的时间太长，这会产生一些丑陋且不太像应用程序的效果。

不幸的是，我对ember.js还是很陌生，因此我不确定要查找和搜索哪些关键字。

随时可以在http://elephants.surge.sh/home上签出该项目。

有没有一种方法可以在显示加载模板的同时并且在分发索引路由之前一次加载所有路由，嵌套路由，模板和组件？

Answer 1

查看您的网站后，很明显您已对问题进行了错误诊断：)您遇到的缓慢行为与余烬改变路由的速度无关...相反，您的网络出现了滞后。您可以通过看到文本立即呈现来直观地判断，但是图像却要花很长时间才能加载。

打开所选浏览器的网络检查器。您的vendor.js为1.1MB，花了4.31秒钟供我加载。您需要花费大量时间来加载各种图像（2.447 s中为286KB）。因此，获得一台实际上带宽不错的服务器！

除了更好的硬件之外，您还需要进行很多优化。您可以在ember-cli-build.js文件中最小化js和CSS：

module.exports = function(defaults) {
    var app = new EmberApp(defaults, {
        minifyJS: EmberApp.env() === 'production',
        minifyCSS: EmberApp.env() === 'production'
    });
};

在提供文件之前，请确保您的Web服务器还gzip压缩文件。这样可以提高性能。

您的图像尺寸也过大。例如，首页上的portrait.jpg是1366 x 2048像素，尽管在我的15英寸macbook pro上显示了370 x 500 img。使用ImageMagick之类的工具，您可以为网络正确调整以下图像的大小：

convert -resize 600 -quality 70 portrait.jpg convert.jpg

这甚至不具有攻击性，会将图像从157 KB降至51K。降低大小/质量，具体取决于您的视线。

尝试使用google page insights之类的工具来进一步查看需要改进的地方。

PS。每当http服务器找不到资源时，您都需要使其http服务器退回到index.html（因为服务器上实际上并不存在特定于路由的路径）。使用apache就是：FallbackResource /index.html。您发送的链接无效（仅/有效）。尝试刷新任何一条路线，您会发现问题

Answer 2

我已经看过您的网站，我想扩展一下@mistahenry所说的内容，希望它可以使您的网站上获得一些性能提升

首先@mistahenry是正确的，似乎您的网站似乎没有使用应用程序的缩小版本。默认情况下，如果您构建应用用于生产，它将最小化JavaScript并进行其他一系列优化。您不需要编辑ember-cli-build.js文件，而是需要确保在构建应用程序时传递正确的参数：

ember build --env production

您可以在official Ember Guides中进一步了解此命令。我不熟悉http://surge.sh/在部署方面的工作方式，但是如果您可以对其进行配置以在生产模式下构建应用程序，那将是前进的方向。

我还建议您查看Netlify的部署情况，因为它也有免费的托管选项，而且我从经验中知道它默认情况下可以正确构建Ember应用程序

我在您的网站上注意到的另一件事是，当您转到http://elephants.surge.sh/home时，它显示为404（未找到）错误。您将看到，如果您转到http://elephants.surge.sh/，它可以正常工作（并且似乎可以正确地将您重定向到/ home），但是当您刷新时，它会再次中断。这不是EmberJS特有的，它是所有单页应用程序所共有的，仅表示您需要将/index.html文件指定为自定义404页面，以便应用程序正确启动。如果您最终尝试使用Netlify，则它具有more information in their documentation关于此特定类型的问题。不幸的是，我不知道如何解决http://surge.sh/

上的同一问题

应用这些更改后，您会发现应用程序的加载速度显着加快，但是在性能方面，总会有更多的事情可以做来改进

实际上，我们最终在第2季第2集“我可以问一个问题”中回答了这个问题，并详细介绍了一些可能对您有帮助的其他解决方案。如果您希望我们全面讨论此答案，则可以在此处查看视频：https://youtu.be/9kMGMK9Ur4E，如果还有其他问题，可以随时加入Ember Community Discord并与我联系（@real_ate），并我将引导您逐步完成您的网站闪电快速⚡️

您可以在Community Page of the Ember website

上找到有关Ember Community Discord的更多信息。

如何强制ember.js在呈现索引路由之前完全加载所有路由？

2 个答案: