В этой статье мы кратко рассмотрим приемы, которые мы можем использовать для максимально быстрого создания веб-приложения.
В наши дни наличие быстрого и надежного веб-приложения является обязательным для технологических компаний, и с этим огромным сообществом веб-разработчиков добиться этого проще, чем когда-либо.
Но сначала я хочу представить себе, как новое веб-приложение JavaScript на самом деле работает на стороне клиента.
Как браузеры понимают веб-приложение JS?
Давайте сделаем это с отличной картинкой рендеринга фазы веб-приложения.
Эта картина почти одинакова для всех JS-приложений, работающих с подходом CLIENT SIDE RENDERING (CSR).
Созданы фрагменты загрузки и рендеринга JS-файлов, после чего у нас есть веб-сайт. выглядит легко, не так ли?! под капотом этих шагов находится большая черная дыра новых методов, которые помогают нам сделать этот процесс более быстрым и эффективным, так что давайте поговорим о них.
Связки и куски
Код, который вы пишете в формате React, Vue.js или Angular, не будет одинаковым во время написания и во время рендеринга, код преобразуется сборщиками модулей во множество частей, кусков или пакетов с обратно совместимым и простым кодом JS. чтобы браузер мог понять код и отобразить для пользователя обычный веб-сайт. Позвольте мне показать вам это с помощью небольшого приложения React, которое входит в состав веб-пакета.
Видеть! Webpack импортирует все коды Lodash в файл с JS-кодом, который мы уже написали! Этот пакет файлов будет отправлен в браузер, и он начнет отображаться после завершения загрузки. Итак, представьте себе большой файл фрагмента — как медленно будет его загружать!
Оптимизация
Большая часть трюка со скоростью здесь заключается в уменьшении размера файла чанка за счет таких вещей, как отложенная загрузка, написание пользовательских библиотек вместо их установки всех, сжатие файлов чанков и Core Web Vite (я тоже написал об этом статью, вы можете ее прочитать "здесь"). Итак, давайте сделаем их.
Ленивая загрузка и разделение кода
Основной концепцией здесь является предотвращение загрузки ненужных кодов или загрузка их в некоторых логических точках, которые требуются пользователю, таким образом, мы не загружаем весь фрагмент при первом или каждом обновлении, а только импортируем и загружаем тот код, который мы нужно в самый раз!
Сборщик модулей
Раньше эта концепция была очень простой для разработчиков, выбиравших Webpack, но теперь она намного сложнее, чем раньше, потому что недавно появился какой-то классный новый сборщик модулей, который делает этот процесс все более и более производительным, чем раньше, мой выбор для этой части — Vite для сейчас!
Но чем Vite лучше, чем Webpack?
Vite предпочитает предлагать исходный код, а не собственный ESM. Позволяя браузеру выполнять часть обязанностей сборщика, Vite изменяет исходный код по мере необходимости по запросу браузера. Код условного динамического импорта обрабатывается только в том случае, если он используется на текущем экране.
Сжатие
Эта вещь обрабатывается большинством современных сборщиков модулей, но хитрость здесь заключается в использовании Brotli в качестве алгоритма сжатия, отличного от устаревшего GZIP, Brotli уменьшает размер пакета на 20% — 30%! Да, это круто.
Подведение итогов
Нечего упоминать, но спасибо за чтение этой статьи :)
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.
