Автор оригинала: FreeCodeCamp Community Member.
Preethi Kasireddy
В Часть I Из этого поста я говорил о каких модулях, почему разработчики используют их, а различные способы включить их в ваши программы.
В этой второй части я решу, что именно означает «Bundle» модулей: почему мы объединили модули, разные способы сделать это, и будущее модулей в веб-разработке.
Что такое пакет модуля?
На высоком уровне пакет модуля – это просто процесс сшивания вместе в группу модулей (и их зависимостей) в один файл (или группа файлов) в правильном порядке.
Как и во всех аспектах веб-разработки, дьявол в деталях.:)
Почему пакет модулей вообще?
Когда вы разделяете свою программу в модули, вы обычно организуете эти модули в разные файлы и папки. Скорее всего, у вас также есть группа модулей для библиотек, которые вы используете, например, подчеркивание или реагируют.
В результате каждый из этих файлов должен быть включен в ваш основной HTML-файл в A
… Что плохие новости для времени загрузки страницы.
Чтобы обойти эту проблему, мы связываем или «объединяйте» все наши файлы в один большой файл (или пару файлов в зависимости от обстоятельств), чтобы уменьшить количество запросов. Когда вы слышите, что разработчики говорят о «шаге построения» или «Процесс построения», это то, о чем они говорят.
Другим распространенным подходом для ускорения работы объединения является «Minify» Code Code. Обозначение – это процесс удаления ненужных символов из исходного кода (например, пробел, комментарии, новые символы линии и т. Д.), Чтобы уменьшить общий размер содержимого без изменения функциональности кода.
Меньшее данные означает меньше времени обработки браузера, что, в свою очередь, уменьшает время, необходимое для загрузки файлов. Если вы когда-либо видел файл, который имел «мин» расширение, например « underscore-min.js », вы, вероятно, заметили, что министерзированная версия довольно крошечная (и нечитаемая) по сравнению с Полная версия Отказ
Задачами, такие как Gulp, и Grunt, совершают CrackTenation и Minification, простыми для разработчиков, гарантируя, что для читаемого человеком кода остается выставленным для разработчиков, в то время как более оптимизированный аппаратный код в комплекте для браузеров.
Каковы различные способы подключения модулей?
Объединение и министерство ваших файлов отлично работает, когда вы используете один из стандартных модульных шаблонов (обсуждаемых в предыдущем посте |), чтобы определить ваши модули. Все, что вы действительно делаете, это разжигает кучу простого кода Vanilla JavaScript.
Однако, если вы придерживаетесь не родные Модульные системы, которые браузеры не могут интерпретировать как Commonjs или AMD (или даже Formatats модулей ES6), вам нужно использовать специализированный инструмент для преобразования ваших модулей в правильно заказанный браузерный код. Вот где браузерифицируйте, TINEYS, WEBPACK и другие «Boundlers Module Bundlers» или «модульные погрузчики» вступают в игру.
В дополнение к объединению и/или загрузке ваших модулей Bundlers модулей предлагают тонну дополнительных функций, таких как автоматический код, когда вы делаете изменения или производства исходных карт для отладки.
Давайте пройдем через некоторые общие методы пакета модуля:
Содержание объединения
Как вы знаете из Часть 1 , Commonjs загружает модули синхронно, что было бы в порядке, за исключением того, что он не практичен для браузеров. Я упомянул, что это был обходной путь к этому – один из них – это модуль Bundler называется Browserify. Брауризация – это инструмент, который компилирует модули Commonjs для браузера.
Например, скажем, у вас есть этот файл main.js, который импортирует модуль, чтобы рассчитать среднее значение массива чисел:
Так что в этом случае у нас есть одна зависимость (MyDependency). Используя приведенную ниже команду, браурифицируйте рекурсирующие сочетания на все необходимые модуль (ы), начиная с Main.js в один файл под названием Bundle.js:
Брауризация делает это, переходя в анализ AST для каждого требуется Звоните, чтобы пройти весь график зависимости вашего проекта. Как только он выяснится, как структурированы ваши зависимости, это связывает их все в правильном порядке в один файл. В этот момент все, что вам нужно сделать, это вставить один
Точно так же, если у вас есть несколько файлов с несколькими зависимостями, вы просто скажите, что Browserify, какой файл входа находится и сидит, пока он делает свою магию.
Окончательный продукт: подключенные файлы подготовлены и готовы к инструментам, такими как Minify-JS, чтобы минимутировать подключенный код.
Бандария AMD
Если вы используете AMD, вы захотите использовать AMD погрузчик как потребление или завиток. Модуль-погрузчик (против модуля) динамически загружает модули, которые необходимо запустить вашу программу.
Как напоминание, одна из главных различий AMD над Commonjs состоит в том, что он загружает модули асинхронно. В этом смысле, с AMD, вы технически не нуждаетесь в шаге сборки, где вы подключите свои модули в один файл, поскольку вы загружаете свои модули асинхронически – это означает, что вы постепенно загружаете только те файлы, которые строго необходимо выполнить Программа вместо того, чтобы загружать все файлы сразу, когда пользователь сначала посещает страницу.
На самом деле, однако, накладные расходы высокомагнитных запросов со временем для каждого пользовательского действия не имеют большого смысла в производстве. Большинство веб-разработчиков по-прежнему используют сборки для подключения и минимулируйте свои модули AMD для оптимальной производительности, используя такие инструменты, как оптимизатор TINECEJS, R.JS , Например.
В целом, разница между AMD и Commonjs, когда дело доходит до объединения: во время разработки AMD Apps может уйти без шага сборки. По крайней мере, пока вы не нажимаете код в прямом эфире кода, в каких оптимизаторах точек, как R.JS, может нажать, чтобы обработать его.
За интересную дискуссию на Commonjs против AMD, проверьте этот пост на Блог Тома Дейла 🙂
WebPack.
Насколько Bundlers Go, WebPack – новый ребенок на блоке. Он был разработан, чтобы быть агностическими к модульной системе, которую вы используете, позволяя разработчикам использовать CommonJS, AMD или ES6 в зависимости от ситуации.
Вам может быть интересно, зачем нам нужен WebPack, когда у нас уже есть другие бланки, такие как браузерификация и потребности, которые получают работу, и сделают довольно Darn хорошую работу. Ну, для одного WebPack предоставляет некоторые полезные функции, такие как «кодовое расщепление» – способ разделить кодовую базу в «кусочки», которые загружаются по требованию.
Например, если у вас есть веб-приложение с блоками кода, которые требуются только при определенных обстоятельствах, может быть неэффективно поставить всю кодовую базу в один массивный вводной файл. В этом случае вы можете использовать разделение кода для извлечения кода в комплектные куски, которые могут быть загружены по требованию, избегая проблемы с большими полезными нагрузками, если большинство пользователей нуждаются в ядре вашего приложения.
Разделение кода – это только один из многих убедительных функций, предложений WebPack, и Интернет полон сильных частей мнения на том, лучше ли WebPack или Warserify. Вот лишь несколько из более голосовых дискуссий, которые я нашел полезным для обертывания головы по всему вопросу:
- https://gist.github.com/substack/68f8d502be42d5cd4942
- http://mattdesl.svbtle.com/browserify-vs-webpack
- http://blog.namangoel.com/browserify-vs-webpack-js-drama
Модули ES6
Вернувшись уже? Хороший! Поскольку в ближайшее время я хочу поговорить о модулях ES6, что в некоторых способах может уменьшить потребность в будущем БУнд. (Вы увидите, что я имею в виду на мгновение.) Во-первых, давайте понять, как загружаются модули ES6.
Наиболее важное различие между текущими форматами модуля JS (Commonjs, AMD) и модулями ES6 состоит в том, что модули ES6 разработаны со статическим анализом. Это означает, что когда вы импортируете модули, импорт разрешен в момент компиляции – то есть до того, как скрипт запустится выполнение. Это позволяет нам удалять экспорт, которые не используются другими модулями, прежде чем мы запустим программу. Удаление неиспользованного экспорта может привести к значительным экономии пространства, снижение напряжения на браузере.
Один общий вопрос, который возникает: как это отличается от устранения мертвого кода, который происходит, когда вы используете что-то вроде UGLifysjs, чтобы минимулировать свой код? Ответ, как всегда, «это зависит».
(Примечание. Устранение мертвого кода – это шаг оптимизации, который удаляет неиспользуемый код и переменные – подумайте об этом, как удаление избыточного багажа, которую ваша подключаемая программа не должна запускаться, * после * она была в комплекте).
Иногда ликвидация мертвого кода может работать точно так же между модулями UGLIPYS и ES6, а в других случаях нет. Есть крутой пример на Wiki Rollup ) Если вы хотите проверить это.
Что делает модули ES6 разными – это другой подход к удалению мертвого кода, называемый «встряхивание дерева». Встряхивание дерева по сути, по существу, устранено Dead Code. Только это включает в себя Кодируйте, что ваш пакет должен запустить, а не за исключением кода ваш пакет не нужен. Давайте посмотрим на пример встряхивания дерева:
Допустим, у нас есть файл utils.js с функциями ниже, каждый из которых мы экспортируем с помощью синтаксиса ES6:
Далее, скажем, мы не знаем, что используются функции, которые мы хотим использовать в нашей программе, поэтому мы продолжим и импортируем все модули в Main.js, как:
И тогда мы позже в конечном итоге используем только каждую функцию:
Версия «Tree Shaken» нашего файла Main.js будет выглядеть так, как только модули будут загружены:
Обратите внимание, как включены единственные экспорта, которые мы используем: каждый Отказ
Между тем, если мы решили использовать функцию фильтра вместо каждой функции, мы заставляем смотреть на что-то подобное:
Версия в потрясении дерева выглядит:
Обратите внимание, как на этот раз оба каждый и Фильтр включены. Это потому, что Фильтр определяется для использования каждый Таким образом, нам нужен оба экспорта для модуля для работы.
Довольно слабил, а?
Я бросаю вызов вам поиграть и исследовать дерево встряхивание в Rollupp.js Живая демонстрация и редактор Отказ
Создание модулей ES6
ОК, поэтому мы знаем, что модули ES6 загружаются по-разному, чем другие форматы модулей, но мы все еще не говорили о шаге сборки, когда вы используете модули ES6.
К сожалению, модули ES6 по-прежнему требуют дополнительной работы, поскольку нет собственного внедрения для того, чтобы браузеры загружают модули ES6 еще.
Вот пара вариантов строительства/преобразования модулей ES6 для работы в браузере, с # 1 Быть самым распространенным подходом сегодня:
- Используйте транспортер (например, Babel или Traceur), чтобы транспортировать свой код ES6 в код ES5 в формате CommonJS, AMD или UMD. Затем проводят транспилованный код через модуль Bundler, как Browserify или WebPack, чтобы создать один или несколько подключенных файлов.
- Использовать Rollup.js , который очень похож на вариант № 1, за исключением того, что POGGGHTS ROLLUP на мощности модулей ES6 для статически проанализировать ваш код ES6 и зависимости перед составом. Он использует «дрожание дерева», чтобы включить минимальный минимум в вашем пачке. В целом, основное преимущество Rollup.js через браузерификацию или WebPack при использовании модулей ES6 – это то, что дрожание дерева может сделать ваши пачки меньше. Ужеюмера – это то, что Rollup предоставляют несколько форматов для подключения вашего кода, включая ES6, Commonjs, AMD, UMD или IIFE. Пакеты IIFE и UMD будут работать в вашем браузере, поскольку они являются, но если вы решите подключить amd, commonjs или eS6, вам нужно найти другие методы, чтобы преобразовать этот код в формат, который понимает браузер (например, с помощью браузера, WebPack, EntryJS и т. Д.).
Прыгать через обручи
Как веб-разработчики, мы должны прыгать через много обручей. Не всегда легко преобразовать наши красивые модули ES6 во что-то браузеры могут интерпретировать.
Вопрос в том, когда модули ES6 работают в браузере без всего этого накладных расходов?
Ответ, к счастью, «скорее, чем позже».
Ecmascript в настоящее время имеет спецификацию для решения, называемого Ecmascript 6 модуль погрузчика API Отказ Короче говоря, это программное устройство, основанное на обещании API, который должен динамически загружать ваши модули и кэшировать их, чтобы последующие импорт не перезагружали новую версию модуля.
Это будет выглядеть что-то подобное:
mymodule.js.
Main.js.
Альтернативно, вы также можете определить модули, указав «непосредственно в тегах сценария, например:
Если вы еще не проверили REPO для Module Loader API Polyfill, я настоятельно рекомендую вам по крайней мере Возьми заглянуть Отказ
Более того, если вы хотите проверить этот подход, проверить Systemjs. , который построен на вершине Модуль ES6 Погрузчик Polyfill Отказ SystemJS Динамически загружает любой формат модуля (модули ES6, AMD, Commonjs и/или глобальные сценарии) в браузере и в узле. Он отслеживает все загруженные модули в «реестре модуля», чтобы избежать повторных модулей, которые были ранее загружены. Не говоря уже о том, что он также автоматически транкирует модули ES6 (если вы просто устанавливаете опцию) и имеете возможность загружать любой тип модуля из любого другого типа! Довольно аккуратно
Будут ли нам все еще понадобиться бундлеры теперь, когда у нас есть родные модули ES6?
Растущая популярность модулей ES6 имеет некоторые интересные последствия:
Будет ли http/2 сделать модуль Bundlers устарели?
С HTTP/1 нам разрешено только один запрос на TCP соединение. Вот почему в загрузке нескольких ресурсов требуются несколько запросов. С HTTP/2, все меняется. HTTP/2 полностью мультиплексируется, что означает, что несколько запросов и ответов могут произойти параллельно. В результате мы можем обслуживать несколько запросов одновременно с одним соединением.
Поскольку стоимость за запрос HTTP значительно ниже, чем HTTP/1, загрузка куча модулей не будет иметь огромную проблему производительности в долгосрочной перспективе. Некоторые утверждают, что это означает, что пакет модуля больше не будет необходима. Это, безусловно, возможно, но это действительно зависит от ситуации.
Для одного, пакета модуля предлагает преимущества, которые HTTP/2 не учитываются, например, удаление неиспользованного экспорта для экономии пространства. Если вы строите веб-сайт, в котором все крошечные вопросы производительности, бандаж может дать вам дополнительные преимущества в долгосрочной перспективе. Тем не менее, если ваши потребности в производительности не так экстремальные, вы можете потенциально сэкономить время в минимальной стоимости, пропустив шаг по сборке.
В целом, мы все еще довольно далеко от большинства веб-сайтов, обслуживающих свой код по HTTP/2. Я склонен прогнозировать, что процесс сборки здесь, чтобы остаться по крайней мере на ближайшее время.
PS: Есть и другие различия с HTTP/2, и если вам интересно, вот Отличный ресурс Отказ
Будет ли Commonjs, AMD и UMD устареть?
Как только ES6 становится Стандарт модуля, нам действительно нужен другие нередительные форматы модулей?
Я сомневаюсь.
Веб-разработка стоит значительно пользоваться одним стандартизированным методом для импорта и экспорта модулей в JavaScript, без промежуточных шагов. Сколько времени нужно, чтобы достичь точки, где ES6 – это стандарт модуля?
Шансы, довольно давно;)
Кроме того, есть много людей, которые любят иметь «ароматы» на выбор, поэтому «один правдивый подход», возможно, не станет реальностью.
Заключение
Я надеюсь, что этот пост из двух частей помог ударил некоторых разработчиков жаргонов при разговоре о модулях и пакете модуля. Продолжай и проверим часть Я Если вы нашли какие-либо термины выше с толку.
Как всегда, поговорите со мной в комментариях и не стесняйтесь задавать вопросы!
Счастливый пакет:)