如何使用 systemjs builder 处理不断增长的捆绑文件

Question

我们正在使用 systemjs 将我们庞大的 angularjs 应用程序升级为混合 Angular 应用程序（angularjs + angular5）。我们已经开始在 Angular 5 中实现新功能。我正在使用 systemjs-builder 创建我的 main.ts 的捆绑文件，并使用 index.html 中的脚本标记包含此文件。

现在，问题是 systemjs-builder 正在将 main.ts 的全部内容及其所有依赖项打包到一个文件中（包括 app.module.ts、路由、服务、组件）所有从 main 引用的文件.ts.

缩小后我的文件大小为 1.2MB，非常大。我现在的表现很好。但是，将来随着我们不断添加更多组件或服务，捆绑文件的文件大小会增加，这可能会导致客户端速度变慢。我该如何摆脱这个问题。

system_prod.config 文件

    System.config({
transpiler: 'ts',
typescriptOptions: {
    // Copy of compiler options in standard tsconfig.json
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
},
meta: {
    'typescript': {
        "exports": "ts"
    },
    '*.json': { "loader": "json" }

},
paths: {
    // paths serve as alias

    'npm:': 'node_modules/'



},
// map tells the System loader where to look for things
map: {
    // our app is within the app folder
    'app': 'js',

    // angular bundles
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
    '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
    '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
    'tslib': 'npm:tslib/tslib.js',

    // other libraries
    'rxjs':                      'npm:rxjs',
    'ngx-cookie-service':        'npm:ngx-cookie-service/cookie-service/cookie.service.js',
    'ts':                        'npm:plugin-typescript/lib',
    'typescript':                'npm:typescript/lib/typescript.js',
    'angularscholarshipseed':     'npm:angular-scholarship-seed.umd.js'/*This is the umd file that is generated from a different web war and published as a npm dependency */
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
    app: {
        main: './main.ts',
        defaultExtension: 'ts'
    },
    rxjs: {
        defaultExtension: 'js'
    },
    ts: {
        main: './plugin.js',
        defaultExtension: 'js'
    }

}

})

gruntfile.js 中的代码——生成捆绑文件

            systemjs: {
        options: {
            sfx: true, //this one is required to not have dependance on SystemJs
            baseURL: "<%= basedir %>",
            configFile: '<%= basedir %>/system_prod.config.js',
            minify: false, //to avoid naming issues
            build: {
                mangle: false
            }
        },main_dist:{
            files: [{"src": "<%= basedir %>/main.ts","dest": "<%= basedir %>/js/system-generated.min.js"}]
        }
    }

我在 index.html 中使用 script 标签包含了 system-generated.min.js 文件。

非常感谢任何帮助。我真的很担心在不久的将来随着应用程序的增长，捆绑的文件大小也会增长，对吗？这可能会导致客户端在下载那个巨大的捆绑文件时变慢。

注意：我们没有为混合 Angular 应用程序使用 angular-cli 或 webpack 找到好的文档。大多数情况下，他们谈到只使用 systemjs。这就是我们使用 systemjs 开始升级过程的原因。

Answer 1

Systemjs-builder 使用汇总，汇总现在支持代码拆分（请参阅 there 和 there）。我不知道，究竟如何使用 systemjs-builder 中的代码拆分，但是 systemjs 和 jspm 的作者 (this pr) 支持 rollup 中的代码拆分。所以，我觉得应该支持。

使用代码拆分，您可以将大包拆分为多个部分，并仅按需加载。