javascript - 在没有路由器的情况下使用 Angular 2/Webpack 延迟加载库/依赖项

Question

我有一个Mapbox我的 Angular 2 应用程序中的网络 map 。

map 将自身附加到 <div>标签，像这样:

<div id="map"></div>

我有两个不同的库可用于我的 web map :Mapbox GL JS ，它使用 WebGL，或 Mapbox.js ，它不使用WebGL，并且与旧计算机和浏览器更兼容。

当用户加载我的应用程序时，我想测试他们的浏览器是否可以使用 WebGL 库。 (Example here from Mapbox documentation.)

如果他们支持，我想加载 Mapbox GL JS 库。

如果他们不支持，我想加载 Mapbox.js 作为后备。

( Vanilla Javascript example of this behavior here. )

我想在不加载两个库的情况下执行此操作。我只想加载一个库或另一个库以及我编写的所有相关代码。 (每个库都有自己不同的语法/格式，因此我无法为任一库重用相同的关联代码。)

您认为在 Angular 2 应用程序中使用 Webpack 模块 bundler 执行此操作的最佳策略是什么？

注意:在这种情况下，我无法使用路由器来分离两个不同的 map ；否则这可能会容易得多......

Answer 1

一个好的解决方案(对于 Webpack)是使用 System.import 或 require.ensure，如此答案中所述:https://stackoverflow.com/a/34489991/3403895

System.import 方法:

export class MyAppComponent {
  constructor(){
    System.import('path/to/your/module').then(refToLoadedModule => {
      refToLoadedModule.someFunction();
    }
  );
}

require.ensure 方法:

export class MyAppComponent {
  constructor() {
     require.ensure(['path/to/your/module'], require => {
        let yourModule = require('path/to/your/module');
        yourModule.someFunction();
     }); 
  }
}

此链接似乎也是一个很好的教程:Code Splitting in Angular 2 with Webpack 2 (http://blog.waffle.io/code-splitting-angular-2-webpack-2/)

非常感谢 Harangue 和 ymz