同时而不是连续加载包

Question

我们正在使用 SystemJS 加载两个包：aurelia.js 和 app-build.js。 SystemJs 正在一个接一个地加载它们。我们如何要求 SystemJs 同时加载它们？

我们的 config.js 为清楚起见省略了详细信息，如下所示：

System.config({
  defaultJSExtensions: true,
  transpiler: "none",
  paths: {
    // omitted
  },
  meta: {
    // omitted
  },
  map: {
    // omitted
  },
  bundles: {
    "app-build.js": [
      "about.html!github:systemjs/plugin-text@0.0.3.js",
      "about.js",
      "admin.html!github:systemjs/plugin-text@0.0.3.js",
      "admin.js",
       // et cetera
    ],
    "aurelia.js": [
      "github:HubSpot/tether@1.3.2.js",
      "github:HubSpot/tether@1.3.2/js/tether.js",
      "github:Leaflet/Leaflet@0.7.7.js",
      "github:Leaflet/Leaflet@0.7.7/dist/leaflet-src.js",
      // et cetera
    ]
  },
  depCache: {
    // omitted
  }
});

Answer 1

config.js 告诉 SystemJS 加载器每个模块位于哪个包中。 SystemJS 然后在需要模块时延迟加载包。你看到上面的原因是依赖层次是线性的。您的 index.html 可能有这样一行：

  System.import('aurelia-bootstrapper');

因此 SystemJS 查找 'aurelia-bootstrapper' 模型并加载需要它的包。引导程序首先根据您的配置加载 main.js 或 app.js 文件。

最佳方案

不要分开你的包。如果您正在捆绑，您可能也会使用 GZipping，因为这些都是生产环境的标准，并且应该始终一起出现。如果您将所有文件捆绑到一个文件中，GZip 将实现更高的压缩率。几乎没有理由将您的捆绑包分开，除非您没有自己创建捆绑包。

另一种解决方案

在 index.html.

中使用 'aurelia-bootstrapper' 导入添加其他包的手动导入

<script>
  System.import('my-module/main');
  System.import('aurelia-bootstrapper');
</script>

同时而不是连续加载包

Load bundles concurrently instead of consecutively

browser

performance

systemjs

aurelia