Question

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

现在，问题是systemjs-builder将main.ts的所有内容及其所有依赖项打包到一个文件（包括app.module.ts，routes，services，components）中。 .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-cli或webpack进行混合角度应用的好文档。大多数地，他们只谈到使用systemjs。这就是我们使用systemjs开始升级过程的原因。

Answer 1

Systemjs-builder使用汇总，汇总现在支持代码分割（请参阅there和there）。我不知道，究竟如何使用systemjs-builder中的代码分割，但是汇总中的代码分割支持是由systemjs和jspm（this pr）的作者完成的。所以，我认为它应该得到支持。

使用代码分割功能，您可以将大型捆绑包拆分为多个部分，并仅在需要时加载它们。

如何使用systemjs builder

1 个答案: