angular 5 的 SystemJS 捆绑应用程序依赖项

Question

我有 Angular 5 个应用程序。我想尽可能地缩小和捆绑我的应用程序。

这是 SystemJS 的配置：

(function (global) {
    System.config({
        paths: {
            'npm:': "node_modules/"
        },
        map: {
            app: "dist",
            '@angular/animations': "npm:@angular/animations/bundles/animations.umd.min.js",
            '@angular/animations/browser': "npm:@angular/animations/bundles/animations-browser.umd.min.js",
            '@angular/common': "npm:@angular/common/bundles/common.umd.min.js",
            '@angular/common/http': "npm:@angular/common/bundles/common-http.umd.min.js",
            '@angular/compiler': "npm:@angular/compiler/bundles/compiler.umd.min.js",
            '@angular/core': "npm:@angular/core/bundles/core.umd.min.js",
            '@angular/forms': "npm:@angular/forms/bundles/forms.umd.min.js",
            '@angular/http': "npm:@angular/http/bundles/http.umd.min.js",
            '@angular/platform-browser': "npm:@angular/platform-browser/bundles/platform-browser.umd.min.js",
            '@angular/platform-browser/animations': "npm:@angular/platform-browser/bundles/platform-browser-animations.umd.min.js",
            '@angular/platform-browser-dynamic': "npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js",
            '@angular/platform-server': "npm:@angular/platform-server/bundles/platform-server.umd.min.js",
            '@angular/router': "npm:@angular/router/bundles/router.umd.min.js",
            // other libraries
            'angular-froala-wysiwyg': "npm:angular-froala-wysiwyg/bundles/angular-froala-wysiwyg.umd.min.js",
            'ngx-bootstrap': "npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js",
            'ngx-infinite-scroll': "npm:ngx-infinite-scroll/bundles/ngx-infinite-scroll.umd.min.js",
            'ngx-moment': "npm:ngx-moment/bundles/ngx-moment.umd.min.js",
            'moment': "npm:moment/min/moment.min.js",
            'rxjs': "npm:rxjs",
            'tslib': "npm:tslib/tslib.js",
            'jszip': "npm:jszip",
            'pako': "npm:pako",
            '@progress': "npm:@progress",
            '@telerik': "npm:@telerik"
        },
        packages: {
            app: {
                main: "./main.js",
                defaultExtension: "js"
            },
            rxjs: {
                defaultExtension: "js",
            },
            jszip: {
                defaultExtension: 'js',
                main: './dist/jszip.js'
            },
            pako: {
                defaultExtension: 'js',
                main: './index.js'
            },
            'npm:@progress/kendo-angular-buttons': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-angular-charts': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-angular-dateinputs': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-angular-dropdowns': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-angular-dialog': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-angular-grid': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-angular-pdf-export': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-angular-inputs': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-angular-intl': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-angular-l10n': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-angular-excel-export': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-angular-layout': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-angular-scrollview': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-angular-sortable': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-angular-popup': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-angular-resize-sensor': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-angular-upload': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-charts': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-data-query': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-date-math': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-drawing': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-file-saver': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-intl': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-ooxml': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@progress/kendo-popup-common': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@telerik/kendo-draggable': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@telerik/kendo-dropdowns-common': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@telerik/kendo-intl': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            },
            'npm:@telerik/kendo-inputs-common': {
                main: './dist/npm/main.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

gulpfile.js:

var gulp = require('gulp');
var tsc = require('gulp-typescript');
var systemjsBuilder = require('systemjs-builder');
var angularEmbed = require('gulp-angular-embed');
var del = require('del');

var tsProject = tsc.createProject('tsconfig.json');
var builder = new systemjsBuilder('', 'systemjs.config.js');

gulp.task('bundle-config', function () {
    return gulp.src('systemjs.config.js')
        .pipe(gulp.dest('dist/configs'));
});

gulp.task('embed-template', ['bundle-config'], function () {
    return gulp.src('app/**/*.ts')
        .pipe(angularEmbed())
        .pipe(gulp.dest('dist2'));
});

gulp.task('tsc', ['embed-template'], function () {
    return gulp.src('dist2/app/**/*.ts')
        .pipe(tsProject())
        .js.pipe(gulp.dest('dist'));
});

gulp.task('clean', ['tsc'], function () {
    return del(['dist2/**']);
});

gulp.task('bundle-app', ['clean'], function () {
    return builder
        .bundle('[dist/**/*]', 'production/app.bundle.min.js', {
                minify: true,
                mangle: true
            })
        .then(function () {
            console.log('Build complete');
        })
        .catch(function (err) {
            console.log('Build error');
            console.log(err);
        });
});

gulp.task('bundle-dependencies', ['clean'], function () {
    return builder
        .bundle('dist/**/* - [dist/**/*.js]', 'production/dependencies.bundle.min.js', {
                minify: true,
                mangle: true
            })
        .then(function () {
            console.log('Build complete');
        })
        .catch(function (err) {
            console.log('Build error');
            console.log(err);
        });
});

gulp.task('production', ['bundle-app', 'bundle-dependencies'], function () { });

和 index.html 包含以下内容：

<!DOCTYPE html>
<html>
<head>...</head>
<body>
  <my-app></my-app>

  <script src="node_modules/core-js/client/shim.min.js"></script>
  <script src="node_modules/zone.js/dist/zone.min.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.js"></script>

  <script src="production/dependencies.bundle.min.js"></script>
  <script src="production/app.bundle.min.js"></script>
  <script>
      System.import('dist/configs/systemjs.config.js').then(function() {
          System.import('app').catch(function(err){ console.error(err); });
      });
  </script>
</body>
</html>

结果我在"dist"文件夹中编译了应用程序（里面包含[=36=]的js文件）。我还有 "production" 文件夹，其中包含“app.bundle.min.js”，其中包含我所有的应用程序文件和“dependencies.bundle.min.js”，其中包含我所有的依赖项，例如 angular、kendo、rxjs 框架. 当我启动我的应用程序时，它会分别加载这 2 个缩小的文件和所有依赖项，例如：

/node_modules/rxjs/add/operator/mergeMap.js
/node_modules/@progress/kendo-angular-grid/dist/npm/data/data.iterators.js
/node_modules/@angular/animations/bundles/animations.umd.min.js

但他们都在“dependencies.bundle.min.js”。

我该如何解决？

Answer 1

我只是将 systemjs.config.js 放在我的捆绑文件之前，它帮助了我：

...
<body>
    <ac-app></ac-app>

    <script src="systemjs.config.js"></script>
    <script src="production/dependencies.bundle.min.js"></script>
    <script src="production/app.bundle.min.js"></script>
    <script>
        System.import('app')
            .catch(function (err) {
                console.error(err);
            });
    </script>
</body>
...

angular 5 的 SystemJS 捆绑应用程序依赖项

SystemJS bundling app dependencies for angular 5

bundling-and-minification

systemjs

systemjs-builder

angular