Когда мы начинали, STYFI создавался с использованием «RequrieJs». RequireJS - один из самых известных загрузчиков модулей для JavaScript. Для непосвященных загрузчики модулей - это в основном инструменты, используемые для указания зависимостей файла javascript и загрузки этих зависимостей в правильном порядке.
Почему мы отказались от RequireJs?
RequireJs в качестве загрузчика модулей заставил нас, разработчиков, использовать шаблон AMD, что, конечно, имело тогда смысл. Однако сегодня, когда у нас есть CommonJS «require ()» и ES6 «import» для импорта тех же зависимостей, RequireJs стал бесполезным.
Сравнение синтаксиса
Модули AMD выглядят так:
По сравнению с CommonJs и ES6
На этапе разработки RequrieJs не требует этапа сборки. Однако при этом все зависимости файла javascript загружаются динамически. Это было хорошо и плохо, но по мере того, как STYFI набирала обороты и наш рос не по дням, а по часам, загрузка динамического контента стала занимать огромное количество времени.
Почему именно Webpack?
Webpack - это сборщик модулей. Основная цель Webpack - объединить файлы JavaScript для использования в браузере. Мало того, он также может преобразовывать, объединять или упаковывать практически любой ресурс или актив.
Поскольку Webpack поддерживает модули ES, CommonJs и AMD, нам было легко использовать плагины, написанные на любых шаблонах. Тогда даже наш код был написан по шаблону AMD. (Хотя сегодня весь код написан в модуле ES6)
Webpack как сборщик, позволяющий связывать файлы на основе точки входа.
Точка входа и один выход
Файлы с несколькими входами и выходами
Одна из самых привлекательных функций Webpack - это разделение кода. С помощью CommonsChunksPlugin мы можем извлекать общие зависимости в целые новые блоки.
Webpack поддерживает отложенную загрузку модулей. Например, модуль входа в систему для незарегистрированных или не вошедших в систему пользователей загружался лениво с помощью Webpack. Подобные функции ускорили загрузку файлов js.
Поскольку Webpack предоставляет нам функцию, которая необходима для ускорения загрузки нашего STYFI, для нашей интерфейсной команды очевидным выбором стал переход от RequireJs к Webpack 2.
Передняя часть, СТИЛАБЫ.