SystemJSとWebpackの違いは何ですか？

私は最初のAngularアプリケーションを作成しており、モジュールローダーの役割を理解します。なぜそれらが必要なのですか？Googleで検索して検索しようとしましたが、アプリケーションを実行するためにそれらの1つをインストールする必要がある理由がわかりません。

importノードモジュールからものをロードするのに使用するだけでは十分ではないでしょうか？

私はこのチュートリアル（SystemJSを使用）に従い、systemjs.config.jsファイルを使用するようにしています：

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'transpiled', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

なぜこの構成ファイルが必要なのですか？
なぜSystemJS（またはWebPackなど）が必要なのですか？
最後に、あなたの意見では何が良いですか？

SystemJS Githubページに移動すると、ツールの説明が表示されます。

ユニバーサルダイナミックモジュールローダー-ブラウザとNodeJSにES6モジュール、AMD、CommonJS、グローバルスクリプトをロードします。

TypeScriptまたはES6でモジュールを使用するため、モジュールローダーが必要です。SystemJSの場合は、systemjs.config.jsモジュール名を対応するファイルと照合する方法を設定できます。

この構成ファイル（およびSystemJS）は、明示的に使用してアプリケーションのメインモジュールをインポートする場合に必要です。

<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>

TypeScriptを使用し、コンパイラーをcommonjsモジュールに構成すると、コンパイラーはSystemJSに基づいていないコードを作成します。この例では、typescriptコンパイラー構成ファイルは次のようになります。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs", // <------
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

Webpackは柔軟なモジュールバンドルです。これは、それがさらに進んでモジュールを処理するだけでなく、アプリケーション（concatファイル、uglifyファイルなど）をパッケージ化する方法も提供することを意味します。また、開発用のロードリロードを備えた開発サーバーも提供します。

SystemJSとのWebPACKは異なりますが、SystemJSで、あなたはまだ（とやるべき仕事持っているガルプまたはSystemJSビルダー生産のためのあなたのAngular2アプリケーションをパッケージ化する例を）。

SystemJSはクライアント側で動作します。モジュール（ファイル）が必要なときに必要に応じて動的にロードします。アプリ全体を事前に読み込む必要はありません。たとえば、ボタンクリックハンドラー内にファイルをロードできます。

SystemJSコード：

// example import at top of file
import myModule from 'my-module'
myModule.doSomething()

// example dynamic import (could be placed anywhere in your code)
// module not loaded until code is hit
System.import('my-module').then((myModule) {
  // myModule is available here
  myModule.doSomething()
});

動作するように構成する以外に、SystemJSに必要なことはこれだけです！これでSystemJSプロになります！

Webpackは完全に異なり、習得するには永遠にかかります。SystemJSと同じことはしませんが、Webpackを使用するとSystemJSが冗長になります。

Webpackはbundle.jsと呼ばれる単一のファイルを準備します-このファイルにはすべてのHTML、CSS、JSなどが含まれます。すべてのファイルが単一のファイルにバンドルされるため、SystemJSのような遅延ローダーは必要ありません（個々のファイルは必要）。

SystemJSの利点は、この遅延読み込みです。1回のヒットですべてを読み込むわけではないため、アプリの読み込みが速くなるはずです。

Webpackの利点は、アプリが最初に読み込まれるまで数秒かかることがありますが、一度読み込まれてキャッシュされると、非常に高速になります。

私はSystemJSを好みますが、Webpackの方が流行のようです。

Angular2クイックスタートはSystemJSを使用します。

Angular CLIはWebpackを使用しています。

Webpack 2（ツリーの揺れを提供します）はベータ版であるため、おそらくWebpackに移行するのは悪い時期です。

注SystemJSは、ES6モジュール読み込み標準を実装しています。Webpackは別のnpmモジュールです。

タスクランナー（SystemJSが存在する可能性のあるエコシステムを理解したい人のためのオプションの読み物）

SystemJSの唯一の責任は、ファイルの遅延読み込みであるため、これらのファイルを縮小したり、それらのファイルをトランスパイルしたりする（SASSからCSSなど）などの必要があります。実行する必要があるこれらのジョブは、タスクと呼ばれます。

Webpackが構成されている場合、これが正しく行われます（そして出力が一緒にバンドルされます）。SystemJSで同様のことを行う場合は、通常、JavaScriptタスクランナーを使用します。最も人気のあるタスクのランナーと呼ばれる別のNPMモジュールですがぶ飲み。

したがって、たとえば、SystemJSはgulpによって縮小された縮小JavaScriptファイルを遅延読み込みする可能性があります。Gulpは、正しくセットアップされている場合、ファイルをその場で縮小してライブで再ロードできます。ライブリロードは、コードの変更を自動的に検出し、ブラウザを更新して更新します。開発中に素晴らしい。CSSを使用すると、ライブストリーミングが可能です（つまり、ページがリロードされることなく、新しいスタイルが更新されます）。

Webpackとgulpが実行できる他の多くのタスクがありますが、ここではカバーしきれないほど多すぎます。私は例を提供しました:)

これまでは、systemjsを使用していました。ファイルを1つずつ読み込んでいましたが、最初の読み込みにはファイルを縮小せずに3〜4秒かかりました。webpackに切り替えた後、パフォーマンスが大幅に向上しました。これで、1つのバンドルファイル（ほとんど変更されず、ほとんど常にキャッシュされるポリフィルとベンダーライブラリも）をロードするだけで済みます。これで、クライアント側アプリをロードするのにわずか1秒かかります。追加のクライアント側ロジックはありません。ロードされる個々のファイルの数が少ないほど、パフォーマンスは高くなります。systemjsを使用する場合は、モジュールを動的にインポートしてパフォーマンスを節約することを検討する必要があります。バンドルが縮小されてブラウザーにキャッシュされた後もパフォーマンスは良好であるため、Webpackでは主にロジックに焦点を当てます。