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

Question

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

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

欢迎在 http://elephants.surge.sh/home 查看此项目。

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

Answer 1

查看您的网站后，很明显您误诊了问题 :) 您遇到的滞后行为与 ember 更改路线缓慢无关...相反，您的体验网络滞后。您可以通过看到文本立即呈现但您的图像需要很长时间才能加载来直观地判断。

打开您选择的浏览器的网络检查器。你的 vendor.js 是 1.1MB，我用了 4.31 秒来加载。您有各种图像需要很长时间才能加载（2.47 秒内加载 286KB）。因此，获得一台实际带宽不错的服务器！

除了更好的硬件外，您还对 table 进行了大量优化。您可以在 ember-cli-build.js 文件中缩小 js 和 css：

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

确保您的网络服务器也在 gzip 压缩您的文件，然后再提供它们。这将提高性能。

您的图片也太大了。例如，主页上的 portrait.jpg 是 1366 x 2048 像素，尽管在我的 15 英寸 mac book pro 上显示 370 x 500 img。使用像 ImageMagick 这样的工具，您可以为网络适当调整这些图像的大小：

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

这甚至不激进，将图像从 157 KB 降低到 51K。根据您的眼睛画线的位置降低尺寸/质量。

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

PS。只要找不到资源，您就需要让您的 http 服务器回退到 index.html（因为服务器上实际上不存在特定于路由的路径）。对于 apache，这只是：FallbackResource /index.html。您发送的 link 无效（只有 / 有效）。尝试刷新您的任何路线，您会看到问题

Answer 2

我已经查看了您的网站，我想扩展@mistahenry 所说的内容，希望它会在您的网站上带来一些性能提升

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

ember build --env production

您可以在 official Ember Guides. I am not familliar with how http://surge.sh/ works when it comes to deployment 中阅读更多关于此命令的信息，但如果您可以配置它以在生产模式下构建您的应用程序，那将是前进的方向。

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

我在您的网站上注意到的另一件事是，当您转到 http://elephants.surge.sh/home it shows up as a 404 (Not Found) error. You will see that if you go to http://elephants.surge.sh/ it works fine (and seems to redirect you correctly to /home) but then when you refresh it breaks again. This is not something that is specific to EmberJS, this is something that is common to all Single Page Applications and it just means that you need to specify the /index.html file as your custom 404 page so that the application boots correctly. If you do end up trying Netlify it has more information in their documentation about this specific type of issue. Unfortunately, I don't know how to solve this same issue on http://surge.sh/

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

实际上，我们在 "May I Ask a Question" 第 2 季第 2 集中回答了这个问题，并详细介绍了一些可能对您有帮助的其他解决方案。如果你想看到我们完整地讨论这个答案，你可以在这里观看视频：https://youtu.be/9kMGMK9Ur4E 如果你有任何其他问题，你可以随时加入 Ember Community Discord 并与我联系（ @real_ate)，我将引导您快速闪电 ⚡️

您可以在 Community Page of the Ember website

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

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

How to force ember.js to fully load all routes before it renders the index route?

ember.js