Chrome сотрудничает с фреймворками с открытым исходным кодом для создания лучшего веб-пространства.
Chrome активно участвует в развитии экосистемы веб-фреймворков, и в нашем докладе на Chrome Dev Summit 2019 мы рассказали о том, над чем работали в прошлом году.
Далее вы найдете расширенный обзор выступления с дополнительными подробностями и ресурсами.
Как мы можем улучшить интернет?
Цель всей команды Chrome — сделать веб лучше. Мы работаем над улучшением API браузера и V8 — основного движка JavaScript и WebAssembly, на котором работает Chrome, — чтобы разработчики были оснащены функциями, которые помогают им создавать отличные веб-страницы. Мы также стараемся улучшать веб-сайты, которые уже находятся в эксплуатации, внося свой вклад в разработку инструментов с открытым исходным кодом различными способами.
Большинство веб-разработчиков, по возможности, полагаются на инструменты с открытым исходным кодом и предпочитают не создавать полностью собственную инфраструктуру. Клиентские JavaScript-фреймворки и библиотеки пользовательского интерфейса составляют растущую долю использования открытого исходного кода. Данные по трем наиболее популярным клиентским фреймворкам и библиотекам — React , Angular и Vue — показывают, что:
- 72% участников первого ежегодного опроса веб-разработчиков и дизайнеров, проведенного MDN, используют как минимум один из этих фреймворков и библиотек.
- Более 320 000 сайтов из топ-5 миллионов URL-адресов, проанализированных HTTP Archive, используют как минимум один из этих фреймворков и библиотек.
- При группировке по времени, проведенному на сайте, 30 из 100 самых популярных URL-адресов используют как минимум один из этих фреймворков и библиотек. (Исследование проводилось на основе внутренних данных.)
Это означает, что улучшенные инструменты с открытым исходным кодом могут напрямую привести к улучшению веб-технологий , и именно поэтому инженеры Chrome начали напрямую сотрудничать с внешними авторами фреймворков и библиотек.
Вклад в веб-фреймворки
Фреймворки, обычно используемые для создания и структурирования веб-страниц, делятся на две категории:
- Фреймворки (или библиотеки) пользовательского интерфейса , такие как Preact, React или Vue, которые обеспечивают управление уровнем представления приложения (например, с помощью компонентной модели).
- Веб-фреймворки , такие как Next.js, Nuxt.js и Gatsby, предоставляют комплексную систему со встроенными функциями, имеющими определенные особенности, например, рендеринг на стороне сервера. Эти фреймворки обычно используют фреймворк или библиотеку пользовательского интерфейса для уровня представления.
Разработчики могут отказаться от использования фреймворков, но, собирая воедино библиотеку уровня представления, маршрутизатор, систему стилей, серверный рендерер и так далее, они часто в итоге создают свой собственный тип фреймворка. Хотя веб-фреймворки и имеют свои особенности, они по умолчанию решают многие из этих проблем.
В оставшейся части этой статьи освещаются многочисленные улучшения, которые недавно появились в различных фреймворках и инструментах, включая разработки команды Chrome.
Угловой
Команда Angular внесла ряд улучшений в 8-ю версию фреймворка:
- Дифференцированная загрузка по умолчанию для минимизации ненужных полифилов в новых браузерах.
- Поддержка стандартного синтаксиса динамического импорта для отложенной загрузки маршрутов.
- Поддержка веб-воркеров для выполнения операций в фоновом потоке, отдельном от основного потока.
- Ivy , новый движок рендеринга Angular, обеспечивающий более высокую производительность перекомпиляции и уменьшение размера пакетов, доступен в режиме предварительного просмотра для существующих проектов.
Подробнее об этих улучшениях можно узнать в «Версии 8 Angular» , и команда Chrome с нетерпением ждет возможности тесно сотрудничать с ними в следующем году по мере появления новых функций.
Next.js
Next.js — это веб-фреймворк, использующий React в качестве слоя представления. В дополнение к модели компонентов пользовательского интерфейса, которую многие разработчики ожидают от клиентского фреймворка, Next.js предоставляет ряд встроенных функций по умолчанию:
- Маршрутизация с разделением кода по умолчанию
- Компиляция и сборка (с использованием Babel и webpack )
- Рендеринг на стороне сервера
- Механизмы для получения данных на уровне отдельных страниц.
- Инкапсулированное оформление (с помощью styled-jsx )
Next.js оптимизирован для уменьшения размера пакетов, а команда Chrome помогла определить области, где мы могли бы еще больше улучшить производительность. Вы можете узнать больше о каждом из них, просмотрев их запросы на комментарии (RFC) и запросы на слияние (PR):
- Улучшенная стратегия разбиения кода на блоки в webpack, которая генерирует более детализированные пакеты, уменьшая количество дублирующегося кода, загружаемого через несколько маршрутов ( RFC , PR ).
- Дифференцированная загрузка с использованием шаблона module/nomodule , которая может сократить общий объем JavaScript в приложениях Next.js до 20% без изменений в коде ( RFC , PR ).
- Улучшено отслеживание показателей производительности с использованием API отслеживания времени пользователя ( PR ).
Мы также изучаем другие возможности для улучшения пользовательского и разработческого опыта работы с Next.js, такие как:
- Включение параллельного режима позволяет разблокировать поэтапную или частичную гидратацию компонентов.
- Система проверки соответствия на основе webpack, которая анализирует все исходные файлы и сгенерированные ресурсы для выявления более информативных ошибок и предупреждений ( RFC ).
Nuxt.js
Nuxt.js — это веб-фреймворк, который объединяет Vue.js с различными библиотеками, предоставляя удобную и интуитивно понятную структуру. Подобно Next.js, он включает в себя множество функций «из коробки»:
- Маршрутизация с разделением кода по умолчанию
- Компиляция и сборка (с использованием Babel и webpack )
- Рендеринг на стороне сервера
- Асинхронная загрузка данных для каждой страницы
- Хранилище данных по умолчанию ( Vuex )
Помимо непосредственной работы над улучшением производительности различных инструментов, мы расширили фонд поддержки фреймворков , чтобы оказывать финансовую помощь большему количеству фреймворков и библиотек с открытым исходным кодом. Благодаря нашей недавней поддержке Nuxt.js, в ближайшем будущем планируется внедрение нескольких новых функций, включая более интеллектуальный рендеринг на сервере и оптимизацию изображений.
Вавилон
Мы также добились прогресса в улучшении производительности важного базового инструмента почти во всех упомянутых фреймворках — Babel .
Babel компилирует код, содержащий более современный синтаксис, в код, понятный различным браузерам. Сейчас стало распространенным использование `@babel/preset-env` для ориентации на современные браузеры, где можно указать различные целевые браузеры, чтобы обеспечить достаточное полифиллинговое сопровождение для всех выбранных сред. Один из способов указать целевые браузеры — использовать <script type="module"> для ориентации на все браузеры, поддерживающие модули ES .
Для оптимизации в данном случае мы запустили совершенно новый пресет: @babel/preset-modules . Вместо преобразования современного синтаксиса в более старый для предотвращения ошибок браузеров, preset-modules исправляет каждую конкретную ошибку, преобразуя код в максимально близкий к исходному современный синтаксис. В результате получается современный код, который может быть доставлен практически без изменений в большинство браузеров.
Разработчики, которые уже используют preset-env также смогут воспользоваться этими оптимизациями без каких-либо дополнительных действий, поскольку они вскоре будут включены и в preset-env .
Что дальше?
Тесное сотрудничество с фреймворками и библиотеками с открытым исходным кодом для улучшения пользовательского опыта помогает команде Chrome понять, что принципиально важно как для пользователей, так и для разработчиков.
Если вы работаете над веб-фреймворком, библиотекой пользовательского интерфейса или любыми другими инструментами для веб-разработки (сборщиками, компиляторами, линтерами), подайте заявку на финансирование фреймворков !