Рубрики
Без рубрики

Веб-приложение в браузере с Zuix.js

Вам не всегда нужны инструменты построения для оптимизации загрузки страницы. Tagged Showdev, WebDev, JavaScript, Zuix.

(Фото © 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”