同时加载包而不是连续加载

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加载器每个模块所在的bundle。然后，SystemJS在需要模块时延迟加载bundle。您之所以看到上述原因，依赖关系层次结构是线性的。您的index.html可能有这样一行：

  System.import('aurelia-bootstrapper');

所以SystemJS寻找＆＃39; aurelia-bootstrapper＆＃39;建模并加载需要它的包。引导程序首先加载main.js或app.js文件，具体取决于您的配置。

最佳解决方案

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

其他解决方案

使用＆＃39; aurelia-bootstrapper＆＃39;手动导入您的其他捆绑包。导入index.html。

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