Когда мы начинали, 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.

- Сатиш Говда

Передняя часть, СТИЛАБЫ.