为什么Aurelia的alpha版本加载缓慢？

Question

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

http://www.andrewgolightly.com/

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

我的上一次测试显示,用135次请求加载页面需要55秒.

看来我需要首先捆绑jspm_packages目录,以便立即下载543KB ..而不是碎片.

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

我如何捆绑包裹？我不清楚https://github.com/jspm/jspm-cli/wiki/Production-Workflows

然后我在index.html文件中更新了什么？我仍然需要包含jspm_packages文件夹,因为我在头部引用它,对吧？

<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">

谢谢.

更新

该团队正致力于捆绑..

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

Answer 1

这个问题被张贴在一个非常早期的时间,但我们确实有在地方现在是一个战略与热蒙和捆绑system.js装载机工作.需要注意的是,由于请求数量很大(并且您可能没有启用gzip),因此框架的速度很慢,因为资产加载需要一段时间.

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

要求

1. 理解使用jspm bundle命令让system.js(我们的模块加载器)知道加载bundle

2. 理解这一点只涵盖JavaScript文件(暂时)

创建一个新包

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

3. 运行此命令 -

   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. 如果您在生产服务,你可能想看看设置baseUrl在config.js像
2. 单独使用解包和提供文件 jspm unbundle
3. 因为我们使用了--inject修饰符system.js应该接受我们的bundle并在不改变index.html中的脚本路径的情况下提供它
4. 您可以+ {filename}在捆绑区域中使用添加更多文件

Answer 2

2016年更新

可以通过npm使用安装捆绑aurelia应用程序的官方工具包npm install --save-dev aurelia-bundler.

安装后,您可以设置gulp任务来处理bundle/unbundle进程.任务的基本示例如下所示:

建立/任务/ bundle.js

var gulp = require('gulp');
var bundler = require('aurelia-bundler');

var config = {
  bundles: {
    'dist/app-build': {
      includes: [
        '**/*.js'
      ],
      options: {
        minify: true
      }
    }
  }
};
gulp.task('bundle', ['build', 'unbundle'], function() {
  return bundler.bundle(config);
});
gulp.task('unbundle', function() {
  return bundler.unbundle(config);
});

我在这里写了一篇更深入的文章:http://www.foursails.co/blog/aurelia-bundling/

官方文档可以在这里找到:https://github.com/aurelia/bundler

Answer 3

有一个 GitHub 存储库，其中包含用于 Aurelia AMD 目标构建的 r.js 捆绑策略，以及在 Visual Studio 中使用 TypeScript 捆绑包的示例项目（包括 aurelia.d.ts TypeScript 类型定义文件）。

• 回购协议
• 与 r.js 捆绑
• aurelia.d.ts

使用这一策略应该会大大减少加载时间，因为它将加载一个文件而不是许多文件。