使用UMD捆绑包捆绑Angular 2应用程序（不构建供应商捆绑包）

在我的问题中，不止一种方法可行。有些不会，有些不是由于Angular 2的缺陷而导致的。这是我目前正在使用的方法：

WebPack + require.js

angular2-webpack-config.js

var config = {
    entry: {
        app: inputFile
    },
    externals: [
        /^@angular\//,
        /^rxjs\//
    ],
    output: {
        libraryTarget: "amd",
        path: __dirname,
        filename: './' + outputName
    },
    plugins: [
        new require('webpack').optimize.UglifyJsPlugin()
    ]
};

我仅externals通过libraryTarget（AMD / RequireJS，CommonJs / node，UMD）告诉它什么是什么以及什么伪标准机制将在运行时加载它们。我的设置只是导致将外部库引用包装在中define()。

请注意，我对WebPack中的路径不做任何事情。在我的软件中，该node_modules文件夹中的所有内容在内部和内部软件中都具有类似的引用机制。我的代码库和第三方库都希望在以下位置找到RxJS rxjs（例如，而不是../rxjs'node_modules / rxjs`）。在运行时，两者都需要进行映射，但是由于我们不允许WebPack进入第三方模块（我们使用的是预先构建的UMD），因此WebPack并不是进行映射的地方。它只会映射我的代码。相反，我们应该在运行时加载器中执行此操作：

index.htm

<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/zone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.3/Reflect.min.js"></script>
<script>
    var require = (function(){
        var versions = {
            'router-deprecated': '@@2.0.0-rc.2',
            'forms': '@@0.1.1',
            'angular': '@@2.0.0-rc.4',
            'rxjs': '@@5.0.0-beta.10'
        }

        var paths = {
            'rxjs': "https://npmcdn.com/rxjs" + versions.rxjs + "/bundles/Rx.umd.min"
        };
        [
            'core',
            'http',
            'common',
            'compiler',
            'platform-browser',
            'router-deprecated',
            'platform-browser-dynamic'
        ].forEach(function (submodule) {
            var module = '@@angular/' + submodule
            paths[module] = 'https://npmcdn.com/' + module + (versions[submodule] || versions.angular) + '/bundles/' + submodule + '.umd.min';
        });

        var rxmap = {};
        [
            'Rx',
            'Observable',
            'Subject',
            'observable/PromiseObservable',
            'operator/toPromise'
        ].forEach(function (submodule) {
            rxmap['rxjs/' + submodule] = 'rxjs';
        })

        return {
            paths: paths,
            map: {
                '*': rxmap
            }
        };
    })();
</script>
<script data-main="../assets/compiled/a2.webpack.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>

另外，由于如果您使用的是WebPack和UMD，则您可能会担心生成的文件大小和时间。此子应用程序的Angular 2构建过程从大约24秒缩短到1秒。它发布的更改大小从2MB以上增加到10万左右。

这是缓存的依赖项的线路负载大小，以供参考。奇怪的是，在UMD版本中，它们现在比集成的WebPack修剪的捆绑包的线径增加小几KB 。

 KB
27.5 shim
 6.8 zone
 8.0 require
 3.3 platform-browser-dynamic
36.8 http
 8.7 core
20.8 common
16.5 router
98.5 compiler
27.9 platform-browser
39.0 Rx

显然，更新后我的公共站点加载时间大大减少了（从大约10到20秒减少到1秒），但是这些数字根据连接情况而变化很大。