8

我写了一个最小的测试页面来试用 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：“我们还没有完成捆绑支持。我们正在努力。”

4

3 回答 3

14

这个问题是在很早的时候发布的，但我们现在确实有一个策略，可以与 jspm 和 system.js 加载器一起使用来进行捆绑。请注意，这并不是说框架很慢，而是由于请求数量众多（并且您可能没有启用 gzip），资产的加载在早期需要一段时间

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

要求

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

  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 应该选择我们的包并提供它而不改变我们在 index.html 中的脚本路径
  4. 您可以通过+ {filename}在捆绑区域中使用来添加更多文件
于 2015-04-09T00:57:30.410 回答
9

2016 更新

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

安装后，您可以设置一个 gulp 任务来处理捆绑/取消捆绑过程。任务的基本示例如下所示：

构建/任务/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

于 2016-01-29T16:29:01.483 回答
4

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

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

于 2015-02-08T10:27:15.913 回答