为什么 Aurelia 的 alpha 版本加载缓慢? [英] Why does the alpha version of Aurelia load slowly?

问题描述

我写了一个最小的测试页面来试用 Aurelia.

I wrote a minimal test page to try out Aurelia.

http://www.andrewgolightly.com/

GitHub:https://github.com/magician11/ag-landingpage

我的上次测试显示，加载具有 135 个请求的页面需要 55 秒.

My last test, showed it took 55 seconds to load the page with 135 requests.

看来我需要先捆绑 jspm_packages 目录，以便一次下载 543KB 的文件......而不是分段下载.

It seems I need to bundle the jspm_packages directory first so that the 543KB gets downloaded at once.. and not in pieces.

所以我遵循了这个例子:http://aurelia.io/get-started.html

So given I followed this example: http://aurelia.io/get-started.html

我如何捆绑软件包?我不清楚 https://github.com/jspm/jspm-cli/wiki/Production-工作流程

How do I bundle the packages? It's not clear to me from https://github.com/jspm/jspm-cli/wiki/Production-Workflows

然后我在 index.html 文件中更新了什么?而且我仍然需要包含 jspm_packages 文件夹，因为我在头部引用了它，对吗?

And then what do I update in my index.html file? And I'll still need to include the jspm_packages folder as I reference it in the head, right?

<link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap@3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="jspm_packages/npm/font-awesome@4.3.0/css/font-awesome.min.css">

谢谢.

更新

团队正在致力于捆绑..

The team is working on bundling..

来自 Rob Eisenberg:我们还没有完成捆绑支持.我们正在努力."

From Rob Eisenberg: "We aren’t finished with our bundling support just yet. We’re working on it."

推荐答案

这个问题很早发布，但我们现在有一个适用于 jspm 和 system.js 的策略用于捆绑的装载机.需要注意的是，这并不是框架很慢，而是由于大量请求(并且您可能没有启用 gzip)导致资产的加载提前了一段时间.

This question was posted at a very early time but we do have a strategy now in place that works with jspm and system.js loader for bundling. As a note it's not that the framework is slow it's that the loading of assets was taking a while early on due to the high number of requests (and that you probably didn't have gzip enabled)

我从我的博客文章中复制了这个主题 - http://patrickwalters.net/my-best-practices-for-aurelia-bundling-and-minification/

I've copied this from my blog post on the subject - http://patrickwalters.net/my-best-practices-for-aurelia-bundling-and-minification/

1. 了解使用了一个 jspm bundle 命令让我们的模块加载器 system.js 知道加载包

1. Understand that a jspm bundle command is used to let system.js, our module loader, know to load the bundle

理解这只涵盖了 JavaScript 文件(目前)

Understand this only covers the JavaScript files (for now)

创建一个新的包

1. 打开您的终端并导航到您的 skeleton-navigation 文件夹.
2. 在文本编辑器中打开 config.js

3. 运行这个命令 -

1. Open your terminal and navigate to your skeleton-navigation folder.
2. Open your config.js in your text editor

3. Run this command -

jspm bundle '*' + aurelia-skeleton-navigation/* + aurelia-bootstrapper + aurelia-http-client + aurelia-dependency-injection + aurelia-router dist/app-bundle.js --inject --minify

故障

// Create a bundle
jspm bundle 
    // Bundle all of these paths
    // from my config.js 
    '*' +
    aurelia-skeleton-navigation/* +
    aurelia-bootstrapper +
    aurelia-http-client + 
    aurelia-dependency-injection + 
    aurelia-router
    // Create the bundle here
    // with this name
    dist/app-bundle.js
    // These modifiers tell the bundle
    // to both minify and then inject
    // the bundle
    --inject
    --minify

关于捆绑的附加说明

1. 如果您在生产中提供服务，您可能需要查看在您的 config.js 就像那样
2. 要单独解绑和提供文件，请使用 jspm unbundle
3. 由于我们使用了 --inject 修饰符，system.js 应该在我们的 bundle 上获取并提供它，而无需更改我们在 index.html 中的脚本路径
4. 你可以在bundle区域使用+ {filename}添加更多文件

1. If you are serving in production you may want to look at setting baseUrl in your config.js like that
2. To unbundle and serve files individually use jspm unbundle
3. Since we used the --inject modifier system.js should pick up on our bundle and serve it without changing our script path in index.html
4. You can add more files by using + {filename} in the bundle area

这篇关于为什么 Aurelia 的 alpha 版本加载缓慢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！