如何使用Systemjs Builder处理捆绑文件的增加

Question

我们正在使用systemjs将巨大的AngularJS应用升级到杂交角应用(AngularJS Angular5(。我们已经开始在Angular5中实现新功能。我正在使用Systemjs-Builder来创建Main.ts的捆绑文件，并在index.html中使用脚本标签包含此文件。

现在，问题是systemjs-builder将main.ts的整个内容及其所有依赖项包装到一个文件中(包括app.module.ts，路由，服务，服务，组件(。.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中的脚本标签包括了系统生成的.min.js文件。

任何帮助将不胜感激。我真的很担心，随着应用程序的增长，捆绑的文件大小也会增长吗？这可能会导致客户端下载巨大的捆绑文件时的速度缓慢。

注意：我们没有使用Angular-CLI或WebPack找到用于混合角度应用程序的好文档。他们大部分时间都在谈论仅使用Systemjs。这就是我们使用SystemJS启动升级过程的原因。

Answer 1

systemjs-builder使用汇总，并且汇总现在支持代码拆分(请参见那里和那里(。我不知道，如何确切地使用Systemjs builder的代码拆分，但是SystemJS和JSPM(此PR(的作者对汇总中的代码分解的支持。所以，我认为应该支持。

使用代码拆分您可以将大捆拆分为零件，并仅按需加载。