如何使用 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.

中使用脚本标签包含了 system-generated.min.js 文件

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

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

Answer 1

Systemjs-builder 使用 rollup，并且 rollup 现在支持代码拆分（参见 there and there). I don't know, how exactly use code-splitting from systemjs-builder, but support of code-splitting in rollup was made by author of systemjs and jspm (this pr）。所以，我觉得应该支持一下。

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

如何使用 systemjs builder 处理越来越大的捆绑文件

How to handle the increasing size of bundled file using systemjs builder

angular

systemjs

systemjs-builder

ng-packagr