Каковы различия между SystemJS и Webpack?

Ответ 1

Если вы перейдете на страницу SystemJS Github, вы увидите описание инструмента:

Универсальный загрузчик динамического модуля - загружает модули ES6, AMD, CommonJS и глобальные скрипты в браузере и NodeJS.

Поскольку вы используете модули в 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 files,...). Он также предоставляет сервер dev с загрузкой нагрузки для разработки

SystemJS и Webpack отличаются, но с SystemJS у вас все еще есть работа (с Gulp или SystemJS builder, например), чтобы упаковать ваше приложение Angular2 для производства.

Ответ 2

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 - это эта ленивая загрузка. Приложение должно загружаться быстрее, потому что вы не загружаете все за один удар.

Потенциал Webpack заключается в том, что, хотя приложение может занять несколько секунд, чтобы загрузить изначально, после загрузки и кэширования он молниеносно.

Я предпочитаю SystemJS, но Webpack кажется более модным.

Angular2 quickstart использует SystemJS.

Angular CLI использует Webpack.

Webpack 2 (который будет предлагать дрожание дерева) находится в бета-версии, поэтому, возможно, это плохое время для перехода на Webpack.

Примечание. SystemJS реализует стандарт загрузки модуля ES6. Webpack - это еще один модуль npm.

Бегуны задач (необязательное чтение для тех, кто хочет понять экосистему, в которой может существовать SystemJS)

С SystemJS его единственной обязанностью является ленивая загрузка файлов, поэтому для минимизации этих файлов требуется что-то еще, перетащить эти файлы (например, с SASS на CSS) и т.д. Эти задания, которые должны выполняться, называются задачами.

Webpack при настройке правильно делает это для вас (и объединяет вывод вместе). Если вы хотите сделать что-то подобное с SystemJS, вы обычно используете бегун для задач JavaScript. Наиболее популярным занятием является другой модуль npm, называемый gulp.

Так, например, SystemJS может лениться загрузить мини файл JavaScript, который был уменьшен с помощью gulp. Gulp, при правильной настройке, может минимизировать файлы "на лету" и "перезагрузить". Живая перезагрузка - это автоматическое обнаружение изменения кода и автоматическое обновление браузера для обновления. Отлично развивается. С помощью CSS возможна прямая трансляция (т.е. Вы видите обновление страницы новыми стилями без перезагрузки страницы).

Есть много других задач, которые могут выполнять Webpack и gulp, которые были бы слишком многочисленными для покрытия здесь. Я привел пример:)

Ответ 3

До сих пор я использовал systemjs. Он загружал файлы один за другим, и первая загрузка занимала 3-4 секунды без мини файлов. После перехода на webpack я получил отличное улучшение производительности. Теперь требуется только загрузить один файл пакета (также полиполки и библиотеки поставщиков, которые почти никогда не менялись и почти всегда кэшировались) и что это. Теперь для загрузки клиентского приложения требуется всего лишь секунда. Никакой дополнительной логики на стороне клиента. Чем меньше количество загружаемых файлов, тем выше производительность. При использовании systemjs вы должны думать об импорте модулей динамически, чтобы сохранить производительность. С webpack вы ориентируетесь главным образом на свою логику, потому что производительность будет по-прежнему хорошей после того, как пакет будет уменьшен и кэширован в вашем браузере.

Ответ 4

SystemJs лучше подходит для панели загрузки сложных форм, например, когда у нас есть панель управления, которая предоставляет более 10 форм, и каждый из них использует общий модуль (например, Grid, древовидный список и т.д.). Systemjs имеет лучшую производительность, что означает в большинстве панельных баз веб-приложение, но на простом веб-сайте и на странице его обратное, и тем лучше вы используете webpack там