(Фото © racorn | Dreamstime)
Что такое веб-страница/приложение?
Бандарь – это процесс сбора всех ресурсов, используемых на странице, а затем составление их в один, оптимизированный файл.
Это резко уменьшит количество сетевых запросов, который браузер должен будет выполнить, чтобы завершить загрузку страницы, и это будет загружать страницу быстрее.
На самом деле есть два способа сделать это:
В браузере Bundler: Этот метод не требует инструмента по сборке, ни плагинам, он просто работает в браузере As – есть.
Веб-стартер Bundler: это Zuix-Web-Starter Голый шаблон, с кучей дополнительных особенностей и улучшений. Это требует Node.js быть установленным.
В браузере пакет
Обычно, когда сайт готов к производству, вы можете решить связывать его, чтобы получить лучшие выступления. Все его компоненты и ресурсы будут хруститься в один файл и загружены из памяти, а не из сети/localhost.
Пошаговое руководство
Включить Zuix-Bundler скрипт расширения на вашей странице сразу после главного Zuix Сценарий включения:
После добавления этого сценария вы можете перезагрузить страницу и генерировать пакет приложений, набрав в Консоль браузера команда
zuix.saveBundle()
Это создаст и сохранит app.bundle.js Файл к Загрузки папка.
Скопируйте сгенерированный файл на ваш веб-сайт и включите его сразу после главного Zuix включение скрипта.
Удалить Zuix-Bundler
Включение скрипта со страницы после создания пакета.
Замечания
При использовании Ленивая загрузка Единственные компоненты загружены до сих пор, будут включены в комплект (инкрементное соединение).
Чтобы принудительно включить все компоненты/ресурсы, используемые на странице, выпустите следующие команды в консоли:
// disable lazy-loading zuix.lazyLoad(false) // force loading of all components zuix.componentize() // create the bundle zuix.saveBundle()
Также могут быть включены внешние библиотеки JavaScript и файлы CSS в Page Bundle. Для того, чтобы добиться этого, удалите или
<Ссылка>
и использовать метод zuix.using (...)
вместо этого для загрузки скрипта/CSS.
// Loading a .css style const flaCss = 'https://cdnjs.cloudflare.com/ajax/libs/flex-layout-attribute/1.0.3/css/flex-layout-attribute.min.css'; zuix.using('style', flaCss, function(res, styleObject) { console.log("Added Flex Layout Attributes CSS.", res, styleObject); }); // Loading a .js script const momentJs = 'https://momentjs.com/downloads/moment.js'; zuix.using('script', momentJs, function(res, scriptObject){ console.log("Added Moment.js.", res, scriptObject); }); // Loading a zuix component zuix.using('component', '@lib/extensions/animate_css', function(res, componentContext){ console.log("Added AnimateCSS extension for zUIx.", res, componentContext); });
Если zuix.using
Способ вызывается на ресурсе, который был уже загружен, он просто проигнорирует запрос.
Этот метод также используется для создания автономные компоненты Это можно загрузить без необходимости беспокоиться о внешних зависимостях.
Пример
В качестве примера я сменил zuix-app-4 моего предыдущего поста в ZUIX-APP-5 Отказ
Если вы пропустили мой предыдущий пост:
Добавление ViewPager в ваше веб-приложение
{Gene} · июль 28 ’18 · 2 мин читать
Это новый Исходный код И это то, что я сделал:
- Заменил «поддельный список» с реальным списком (
компоненты/NEWS_LIST
), которые могут загружать данные из RSS-подачи - заменил
Компоненты/Random_Item
сКомпоненты/News_List/Предмет
иКомпоненты/News_list/item_mini
- Удалено все скрипты а также CSS включения от
голова
Разделindex.html
и добавил их сzuix.using (..)
кindex.js.
Я хотел, чтобы RSS-канал быть одним из Новости Google , но, к сожалению, Google больше не предоставляет эту услугу (так грустно), поэтому я закончил использовать CNN Кормируйте, как это был единственный корм с хорошими изображениями и современными названиями.
Большинство кормов такого рода не позволяют загрузки с другого домена, поэтому я использовал Cors-anywhere.herokuapp.com
прокси взломать Рост поведение. Этот прокси иногда становится очень медленным, но это нормально для примера.
Итак, чтобы подвести итоги, ZUIX-APP-5 это версия без app.bundle.js
(не в комплекте), и я использовал его для создания входящей версии, которая доступна на zuix-app-6 Отказ
Вот сравнение между двумя версиями.
Zuix-App-5: Total Files 18
Zuix-App-5: Производительность сети
ZUIX-APP-6: Всего файлов 4
ZUIX-APP-6: Производительность сети
Это Исходный код для zuix-app-6
Отказ
Веб-стартер пакет
Изображение выше показывает процесс объединения Zuix-Web-Starter
используется для самого веб-сайта ZUIX.
Но … поскольку это уже вроде длинного поста, я просто кратко поставил основные функции здесь:
- Зукс веб-компоненты и приложение Bundler
- Статический сайт с: спереди, файлы данных, помощники, коллекции, шаблоны
- Меньше до CSS компиляция
- Eslint .js кода льжит
- Миниатюрный
- Генератор прогрессивного веб-приложения
Читать дальше:
Клиент-сторона HTML/CSS Предварительная обработка
{Gene} · 7 августа18 · 4 мин читать
Оригинал: “https://dev.to/genejams/web-app-bundling-in-the-browser-with-zuixjs-4efm”