Js bundle: Объясняем современный JavaScript динозавру / Хабр | Дропшиппинг

Содержание

Объединение JavaScript | Руководство разработчика Adobe Commerce

Объединение JavaScript — это метод оптимизации, который можно использовать для уменьшения количества запросов к серверу для файлов JavaScript. Объединение достигает этого, объединяя несколько файлов JavaScript в один файл, чтобы уменьшить количество запросов страниц.

Включить связывание JavaScript

Связывание JavaScript не работает, если Magento не находится в рабочем режиме. В рабочем режиме объединение JavaScript можно включить только с помощью интерфейса командной строки. Выполните следующие действия, чтобы настроить связывание JavaScript из CLI.

Из корневого каталога Magento переключитесь в рабочий режим:

      1
  bin/magento deploy:mode:set production

Включить связывание JavaScript:

       1
  bin/magento config:set dev/js/enable_js_bundling 1

Оптимизация объединения путем минимизации файлов JavaScript:

      1
  bin/magento config:set dev/js/minify_files 1

Включить очистку кеша для статических URL-адресов файлов. Это гарантирует, что пользователи получат последнюю версию ресурсов в любое время при обновлении:
.
```
      1
  bin/magento config:set dev/static/sign 1
 
```
Чтобы настроить объединение JavaScript, необходимо отключить объединение файлов Javascript. Объединение не будет работать, так как объединение файлов исключает объединение:
```
      1
  bin/magento config:set dev/js/merge_files 0
 
```

Изменение указанных выше настроек, когда Magento находится в рабочем режиме, потребует развертывания файлов статического представления:
```
      1
  bin/magento setup:static-content:deploy
 
```

Наконец, очистите кеш:

1	кеш bin/magento: чистая конфигурация

Например, когда Sign Static Files отключен (значение по умолчанию: config:set dev/static/sign 0 ), URL-адрес статического файла может выглядеть следующим образом: /static/frontend/Magento/luma/en_US/mage/dataPost. js . Но когда вы включаете параметр ( config:set dev/static/sign 1 ), тот же URL-адрес может выглядеть примерно так:

static/version40s2f9ef/frontend/Magento/luma/en_US/mage/dataPost.js с добавлен номер версии, как показано. В следующий раз, когда этот файл будет обновлен (с bin/magento setup:static-content:deploy ), будет сгенерирована новая версия, в результате чего браузер загрузит новый файл с сервера, тем самым разорвав кеш браузера.

Как работает объединение в Magento

Когда вы включаете объединение, Magento объединяет сотни файлов JavaScript в несколько пакетов JavaScript и загружает эти пакеты для каждой страницы. Поскольку браузер загружает пакеты синхронно, рендеринг страницы блокируется до завершения загрузки всех пакетов. Но время, сэкономленное за счет сокращения запросов к серверу с сотен до нескольких, обычно компенсирует затраты на синхронную загрузку пакетов.

Исключение файлов

Узел в файле etc/view.

xml для темы указывает файлы, которые необходимо исключить из процесса объединения Magento JavaScript. Файлы JavaScript, исключенные из объединения, загружаются RequireJS асинхронно по мере необходимости.

Таким образом, вы должны исключить файлы JavaScript, которые вы используете для тестирования или разработки, чтобы они не загружались на каждой странице.

В следующем фрагменте кода из темы Magento Luma показаны типы файлов, которые следует исключить из процесса объединения.

Показать пример

 <исключить>
    Lib::jquery/jquery.min.js
    Lib::jquery/jquery-ui-1.9.2.js
     Lib::jquery/jquery.ba-hashchange.min.js
    Lib::jquery/jquery. details.js
    Lib::jquery/jquery.details.min.js
    Lib::jquery/jquery.hoverIntent.js
    Lib::jquery/colorpicker/js/colorpicker.js
    Lib::requirejs/require.js
    Lib::requirejs/text.js
    Lib::date-format-normalizer.js
    Lib::legacy-build.min.js
    Lib::mage/captcha.js
    Lib::mage/dropdown_old.js
    Lib::mage/list.js
    Lib::mage/loader_old.js
    Lib::mage/webapi.js
    Lib::mage/zoom.js
    Lib::mage/translate-inline-vde.js
    
 Lib::mage/requirejs/mixins.js
    Lib::mage/requirejs/static.js
    Magento_Customer::js/zxcvbn.js
    Magento_Catalog::js/zoom. js
    Magento_Ui::js/lib/step-wizard.js
    Magento_Ui::js/form/element/ui-select.js
    Magento_Ui::js/form/element/file-uploader.js
    Magento_Ui::js/form/components/insert.js
    Magento_Ui::js/form/components/insert-listing.js
    Magento_Ui::js/временная шкала
    Magento_Ui::js/grid
    Magento_Ui::js/dynamic-rows
    Magento_Ui::templates/временная шкала
      Magento_Ui::templates/grid
    Magento_Ui::templates/dynamic-rows
    Magento_Swagger::swagger-ui
    Lib::modernizr
    Lib::tiny_mce
    Lib::varien
    Lib::jquery/editableMultiselect
    Lib::jquery/jstree
    Lib::jquery/fileUploader
    Lib::css
    Библиотека::lib
    Lib::extjs
    Lib::prototype
    Lib::scriptaculous
    Библиотека::less
    Библиотека::mage/adminhtml
    Lib::mage/backend

Установка размера файла пакета

Переменная bundle_size управляет размером файла сгенерированных пакетов.

Указание большого размера bundle_size уменьшает количество генерируемых пакетов, но создает файлы большего размера. Указание меньшего размера bundle_size создает больше пакетов с файлами меньшего размера.

Пример:

 1
2
3

 
    1 МБ

Цель состоит в том, чтобы сбалансировать количество загружаемых пакетов с размером каждого пакета. Как правило, каждый пакет должен иметь размер не менее 100 КБ.

Тонкая настройка темы

Существует множество способов настройки темы с помощью файла etc/view.xml .

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

<исключить> узел.

Выполните следующие действия, чтобы определить, какие файлы JavaScript нужно связать с вашей темой:

Создайте пустую страницу с макетами, которые вы хотите настроить.
Сравните файлы JavaScript, загруженные на страницы, с файлами JavaScript в Magento.
Используйте результаты этого сравнения для создания списка исключений.

javascript — Зачем и где вообще нам нужен bundle.js?

спросил 3 года 11 месяцев назад

Изменено 1 месяц назад

Просмотрено 24к раз

Какая потребность в bundle.js для приложений Node.js/Angular/React? Что, если он не используется при создании и развертывании приложения?

javascript
angularjs
node.js
reactjs

Откуда взялась комплектация?

Мы начали объединять наши активы из соображений производительности.

HTTP1 поддерживает ограниченные запросы по одному соединению. Создание соединений для каждого актива убивало производительность.
Мы начали собирать вещи постранично, чтобы повысить производительность за счет более эффективного кэширования.
Нам удалось добавить к нему отпечаток пальца и загрузить его в CDN. (домашняя страница.231434.js). Таким образом, мы смогли развернуть наше приложение путем его докеризации.
Объединение также помогает нам уменьшить размер страницы, потому что сборщик знает всю систему. Это означает, что он может удалить неиспользуемые вещи и упростить их минимизацию. Вы не можете сделать это без упаковщика легко.

Кроме того, упаковщики используют транспиляторы. Браузеры не всегда могут запускать коды, которые мы пишем, такие как Typescript и CoffeeScript. Сборщики могут легко преобразовать эти коды в пакеты.

Он нам еще нужен?

В настоящее время многое изменилось в отношении объединения наших активов.

Во-первых, почти каждый браузер теперь поддерживает HTTP/2. Таким образом, мы можем запрашивать несколько файлов по одному и тому же соединению. Комплектация больше не нужна из-за этого. Кроме того, у нас есть сервер http/2 push.
Библиотеки, такие как React, Angular и Vue, намного эффективнее по размеру. Их можно легко загрузить на страницу из источника, поддерживающего gzip.

Вот почему нам больше не нужна комплектация.

Но в зависимости от вашего проекта нам может понадобиться комплектация. Это настоящая правда.

Я бы еще пошел с комплектацией.

В моей компании мы используем систему оркестрации контейнеров для управления нашими докеризованными приложениями. Мы можем запускать несколько версий одновременно. Создание отпечатков пальцев для файлов при их объединении и загрузке в CDN по-прежнему более эффективно для нас. А также мы пытаемся использовать предварительную выборку и предварительную загрузку. CDN помогает нам сократить время загрузки посетителей из других стран. А также мы получаем поддержку от сервисного работника для изменения ресурсов, когда нам это нужно, на странице.

Так что в настоящее время это просто основано на вашем проекте. Есть не так много причин производительности больше.

В настоящее время мы обычно используем инструменты для упаковки, такие как webpack, для упаковки js, css или других файлов. С соответствующими загрузчиками webpack упаковывает файлы во множество файлов пакетов, и браузер их понимает.

Сборщик модулей проанализирует проект, найдет отношения зависимости и загрузит необходимый пакет только при загрузке веб-страницы.
А с помощью сборщика модулей он будет компилировать некоторые языки, которые браузер не может прочитать, например машинописный текст, меньше и так далее.

Сборщик модулей не требуется для веб-проекта, но он улучшит производительность веб-страниц. Если не использовать сборщик модулей, веб-страница не может только получить необходимый пакет при загрузке.