Angular 2，Development Env 非常慢（我需要 Dev 包吗？）

Question

我刚刚开始使用 Angular 2 的新应用程序。我只是按照 angular.io 快速入门构建它。该应用程序真的很慢，经过一些研究，我遇到了一些使用 SystemJS + Gulp 的解决方案。我做了一些非常像这样的事情这对于生产来说很好。它非常快。但另一方面，这对发展确实不利。它太慢了（捆绑包需要很长时间才能完成）。如果我不使用 bundle 也很慢（数百个请求）。我试图在没有我的应用程序转译文件的情况下创建一个包，但它不起作用。

所以一个简短的问题是：设置开发环境的最佳方式是如何避免数百个请求并在没有我的应用程序转译文件的情况下生成一个包？或者任何其他 idea/configuration 可以帮助我更高效地开发。

gulpfile.js

    var gulp = require('gulp'),
        path = require('path'),
        Builder = require('systemjs-builder');

    var appDev = './app'; 
    var appProd = './app';

    gulp.task('bundle', function() {
        var builder = new Builder('', 'systemjs.config.js');

        return builder
            .buildStatic(appDev + '/main.js', appProd + '/bundle.js', { minify: true, sourceMaps: true})
            .then(function() {
                console.log('Build complete');
            })
            .catch(function(err) {
                console.log('Build error');
                    console.log(err);
                });
        });

    gulp.task('default', ['bundle']);

systemjs.config.js

    /**
     * System configuration for Angular samples
     * Adjust as necessary for your application needs.
     */
    (function (global) {
      System.config({
        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: 'app',
          // 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',
          // other libraries
          'rxjs':                       'npm:rxjs',
          'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
          'primeng':                    'node_modules/primeng'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
          app: {
            main: './main.js',
            defaultExtension: 'js'
          },
          rxjs: {
            defaultExtension: 'js'
          },
          'angular2-in-memory-web-api': {
            main: './index.js',
            defaultExtension: 'js'
          },
          primeng : { defaultExtension: 'js' }
        }
      });
    })(this);

Answer 1

在 https://github.com/angular/angular-cli

查看官方 angular-cli

它使用 webpack 2 并且针对不同的环境有不同的设置。开发构建时间非常快。

Angular 2，Development Env 非常慢（我需要 Dev 包吗？）

Angular 2, very slow in Development Env (Do I need a bundle for Dev?)

javascript

typescript

gulp

systemjs

angular