Question

在发布之前，候选角度提供了捆绑文件。由于发布候选版本没有更多的捆绑文件。包括angular2和rxjs，我的应用程序现在可以加载超过7秒的671个请求。这已经削弱了发展。

有谁知道如何捆绑angular和rxjs并将它们包含在system.config中？

Answer 1

您只需使用捆绑包：

UMD文件：这可能是最简单的解决方案。正如您在example中看到的那样。您只需要在systemjs配置文件中引用UMD文件（对生产环境不太有用）：

System.config({
    packages: {
        app: {
            main: './main.ts',
            defaultExtension: 'ts'
        },
        '@angular/core': {
            main: 'core.umd.js',
            defaultExtension: 'js'
        },
        '@angular/compiler': {
            main: 'compiler.umd.js',
            defaultExtension: 'js'
        },
        '@angular/common': {
            main: 'common.umd.js',
            defaultExtension: 'js'
        },
        '@angular/platform-browser-dynamic': {
            main: 'platform-browser-dynamic.umd.js',
            defaultExtension: 'js'
        },
        '@angular/platform-browser': {
            main: 'platform-browser.umd.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        }
    }
});

你可以找到另一个例子（可能更好）here！

systemjs-builder + gulp：如果你想继续使用systemjs，那么使用这个解决方案是一个很好的调用，但是我已经测试了它，生成捆绑包需要30秒，使它对开发没那么有用（也许我做错了[几乎可以肯定]），但你仍然可以检查如何使用系统构建器here捆绑你的应用程序;
webpack：我目前正在使用webpack。 Webpack有一个名为webpack-dev-server的开发工具，它将应用程序虚拟地捆绑在内存中，使开发过程中的过程更快（+热重新加载）。您可以在此处找到快速video tutorial以及Angular 2文档here中的更详细说明。要使用webpack，您必须安装webpack（和webpack-dev-server，如果您愿意）软件包：npm i -S webpack webpack-dev-server，创建 webpack.config.js 文件并仅使用{运行它{1}}只生成捆绑文件或webpack以创建一个自动重新捆绑修改的服务器。 --inline选项在浏览器窗口中启用自动重新加载：
```
webpack-dev-server --inline
```
现在将index.js文件插入index.html：// webpack.config.js file module.exports = { entry: 'SRC_DIR/main.js', output: { path: 'BUILD_DIR', filename: 'bundle.js' } }

这两个最后的选项将允许您生成可以手动包含在index.html文件中的整个应用程序的捆绑包。

Answer 2

为了获得更轻量级的项目，您应该检查SystemJS Builder或JSPM以捆绑您的项目。

示例种子项目：https://github.com/madhukard/angular2-jspm-seed

@BrunoGarcia在这里给出了一个非常好的信息：https://stackoverflow.com/a/37098964/5706293

Answer 3

1）使用gulp-concat确认所有js文件和css文件包含在index.html上。

2）捆绑systemjs.config.js文件中提到的角度库和应用程序组件。使用gulp systemjs-builder。

3）使用gulp-uglify缩小捆绑包。

如何将Angular2 RC1与systemjs捆绑在一起

3 个答案: