Apa perbedaan antara SystemJS dan Webpack?

Saya membuat aplikasi Angular pertama saya dan saya akan mencari tahu apa peran pemuat modul. Kenapa kita membutuhkannya? Saya mencoba mencari dan mencari di Google dan saya tidak mengerti mengapa kita perlu menginstal salah satunya untuk menjalankan aplikasi kita?

Tidak bisakah itu cukup dengan hanya menggunakan importuntuk memuat hal-hal dari modul node?

Saya telah mengikuti tutorial ini (yang menggunakan SystemJS) dan itu membuat saya menggunakan systemjs.config.jsfile:

/**
 * 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);

Mengapa kita memerlukan file konfigurasi ini?
Mengapa kita membutuhkan SystemJS (atau WebPack atau lainnya)?
Akhirnya, menurut Anda apa yang lebih baik?

Jika Anda pergi ke halaman SystemJS Github, Anda akan melihat deskripsi alat:

Loader modul dinamis universal - memuat modul ES6, AMD, CommonJS, dan skrip global di browser dan NodeJS.

Karena Anda menggunakan modul dalam TypeScript atau ES6, Anda memerlukan pemuat modul. Dalam kasus SystemJS, systemjs.config.jsmemungkinkan kita untuk mengkonfigurasi cara di mana nama modul dicocokkan dengan file yang sesuai.

File konfigurasi ini (dan SystemJS) diperlukan jika Anda menggunakannya secara eksplisit untuk mengimpor modul utama aplikasi Anda:

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

Saat menggunakan TypeScript, dan mengonfigurasi kompiler ke commonjsmodul, kompiler membuat kode yang tidak lagi berdasarkan SystemJS. Dalam contoh ini, file konfigurasi compiler naskah skrip akan muncul seperti ini:

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

Webpack adalah bundler modul yang fleksibel. Ini berarti bahwa ia melangkah lebih jauh dan tidak hanya menangani modul tetapi juga menyediakan cara untuk mengemas aplikasi Anda (file concat, file uglify, ...). Ini juga menyediakan server dev dengan memuat ulang untuk pengembangan.

SystemJS dan Webpack berbeda tetapi dengan SystemJS, Anda masih memiliki pekerjaan yang harus dilakukan (dengan Gulp atau SystemJS builder misalnya) untuk mengemas aplikasi Angular2 Anda untuk produksi.

SystemJS bekerja di sisi klien. Ini memuat modul (file) secara dinamis sesuai permintaan saat dibutuhkan. Anda tidak perlu memuat seluruh aplikasi di muka. Anda dapat memuat file, misalnya, di dalam handler klik tombol.

Kode 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()
});

Selain mengonfigurasinya agar berfungsi, itu semua yang ada untuk SystemJS! Anda sekarang menjadi SystemJS pro!

Webpack sepenuhnya berbeda dan membutuhkan waktu lama untuk dikuasai. Itu tidak melakukan hal yang sama seperti SystemJS tetapi, ketika menggunakan Webpack, SystemJS menjadi berlebihan.

Webpack menyiapkan file tunggal yang disebut bundle.js - File ini berisi semua HTML, CSS, JS, dll. Karena semua file dibundel dalam satu file, sekarang tidak perlu loader malas seperti SystemJS (di mana masing-masing file dimuat sebagai dibutuhkan).

Kelebihan dari SystemJS adalah pemuatan yang malas ini. Aplikasi harus memuat lebih cepat karena Anda tidak memuat semuanya dalam satu pukulan.

Kelebihan dari Webpack adalah bahwa, meskipun aplikasi mungkin butuh beberapa detik untuk memuat pada awalnya, sekali dimuat dan cache itu cepat kilat.

Saya lebih suka SystemJS tetapi Webpack tampaknya lebih trendi.

Mulai cepat Angular2 menggunakan SystemJS.

CLI sudut menggunakan Webpack.

Webpack 2 (yang akan menawarkan pengocokan pohon) dalam versi beta jadi mungkin ini saat yang buruk untuk pindah ke Webpack.

Catatan SystemJS menerapkan standar pemuatan modul ES6 . Webpack hanyalah modul npm lainnya.

Pelari tugas (bacaan opsional untuk mereka yang ingin memahami ekosistem di mana SystemJS mungkin ada)

Dengan SystemJS, satu-satunya tanggung jawabnya adalah pemuatan file yang malas sehingga masih diperlukan sesuatu untuk memperkecil file-file tersebut, mengubah file-file tersebut (mis. Dari SASS ke CSS), dll. Pekerjaan-pekerjaan yang harus dilakukan dikenal sebagai tugas .

Webpack, ketika dikonfigurasi, melakukan ini dengan benar untuk Anda (dan menyatukan output bersama-sama). Jika Anda ingin melakukan sesuatu yang mirip dengan SystemJS, Anda biasanya akan menggunakan pelari tugas JavaScript. Yang paling Tugas pelari populer adalah modul NPM lain yang disebut tegukan .

Jadi, misalnya, SystemJS mungkin malas memuat file JavaScript yang diperkecil yang telah diperkecil oleh tegukan. Gulp, ketika diatur dengan benar, dapat meminimalkan file dengan cepat dan memuat ulang secara langsung. Pemuatan langsung adalah deteksi otomatis perubahan kode dan pembaruan browser otomatis untuk memperbarui. Hebat selama pengembangan. Dengan CSS, streaming langsung dimungkinkan (yaitu Anda melihat halaman memperbarui gaya baru tanpa memuat ulang halaman).

Ada banyak tugas lain yang bisa dilakukan Webpack dan tegukan yang terlalu banyak untuk dibahas di sini. Saya sudah memberikan contoh :)

Sejauh ini saya menggunakan systemjs. Itu memuat file satu per satu dan memuat pertama memakan waktu 3-4 detik tanpa file yang diperkecil. Setelah beralih ke webpack saya mendapat peningkatan kinerja yang luar biasa. Sekarang hanya perlu memuat satu file bundel (juga polyfill dan lib vendor yang hampir tidak pernah berubah dan hampir selalu di-cache) dan hanya itu. Sekarang hanya butuh sedetik untuk memuat aplikasi sisi klien. Tidak ada logika sisi klien tambahan. Semakin sedikit jumlah file individual yang dimuat, semakin tinggi kinerjanya. Saat menggunakan systemjs Anda harus berpikir tentang mengimpor modul secara dinamis untuk menghemat kinerja. Dengan webpack Anda fokus terutama pada logika Anda karena kinerja akan tetap baik setelah bundel diperkecil dan di-cache di browser Anda.