что такое айсейс
icejs — это прогрессивная платформа для исследований и разработок, основанная на React. Версия 1.0 была выпущена в 2020 году командой Feibing (ICE) отдела Tao. В настоящее время icejs широко используется в Alibaba и среди пользователей сообщества. Как показано на рисунке ниже, каждый день в Alibaba насчитывается не менее 400 пользователей.На основе icejs создается и выпускается несколько репозиториев, которые обслуживают более 3 тыс. внутренних разработчиков и более 5 тыс. проектов.
Многие могут спросить, зачем вам нужно использовать icejs? Здесь по-прежнему актуальна проблема замены icejs на Next.js, UmiJS или Nuxt.js.Основной вопрос — в чем ценность таких R&D фреймворков? Позвольте мне попытаться рассказать о том, что думает команда Feibing по этому вопросу:
- Обеспечьте согласованность между проектами благодаря встроенным функциям и возможностям подключаемых модулей.: Для относительно крупной клиентской команды часто требуется множество клиентских проектов и межгрупповая совместная работа, а последовательная разработка и использование могут повысить эффективность совместной работы.
- Сокращение дублирования усилий с помощью готовых возможностей платформы: Предоставляет возможности от небольших конфигураций сборки, таких как модули TypeScript и CSS, до различных режимов, таких как MPA/SPA/микроинтерфейс.
- Некоторые изначально сложные функции могут быть доступны предприятиям по низкой цене.: Такие возможности, как SSR/SSG, интеграция на основе Webpack/Vite, требуют многого, фреймворк может значительно снизить эту стоимость.
В то же время надо признать, что по сравнению с созданием инструментов непосредственно на основе Webpack/Vite, фреймворк разработки принесет с собой черные ящики, ограничения и негибкость... И это также самая большая проблема для команды разработчиков фреймворка: в предоставление различных Как обеспечить хороший опыт НИОКР на основе способностей.
Абсолютно новая версия 2.0
За полтора года с момента выпуска версии 1.0 в 2020.02 Icejs обновил более 70 официальных версий (в среднем одну версию в неделю) на основе отзывов сообщества, что также постоянно улучшало функциональность и стабильность фреймворка. . А в 2021 году для фронтенд-сообщества очень важны два тренда:
- Безпакетный режим на основе модулей ES: Благодаря встроенной поддержке браузером модулей ES, у сообщества также есть поддерживающий инструмент сборки Snowpack и последующий Vite, режим Bundleless сотрясает режим Bundle Everything с Webpack в качестве основного.
- Переписать интерфейсную цепочку инструментов на основе Rust/Go.: Замена swc от babel, замена esbuild от webpack, Rome переписан на ржавчине, Next.js представляет Rust, скорость сборки увеличена в 5 раз.
Эти две тенденции также прояснили, что скорость построения традиционной системы разработки веб-пакетов слишком низкая, а опыт отладки и построения интерфейса требует значительных улучшений. Поэтому команда Feibing сосредоточила свое внимание на "опыт разработчика«Начали изучать версию icejs 2.0. После 3-месячного цикла исследований и разработок, в общей сложности более 100 запросов на включение, мы официально выпустили версию 2.0 28.09.2021. В настоящее время более 200 проектов в Alibaba уже запущены. на основе версии 2.0, и сегодня мы также представляем сообществу Официальный выпуск вводной статьи о icejs 2.0. Некоторые важные особенности версии 2.0:
- Вите режим: На основе оригинального Webpack синхронно поддерживается режим Vite, и в то же время конфигурация проекта и возможности фреймворка максимально согласованы.
- Webpack 5: Обновите Webpack с V4 до V5 и представьте новую версию Module Federation, Cache и других связанных возможностей.
- swc&esbuild: Экспериментально ввести swc для замены babel в режиме Webpack, попытаться улучшить наиболее трудоемкий этап компиляции кода в режиме Webpack, а ссылка на сжатие также поддерживает использование esbuild вместо terser
- Более полные бизнес-решения: Предоставляйте полные решения, такие как управление состоянием, библиотека запросов, конфигурация среды, микроинтерфейс, SSR, SSG (новый), PWA (новый), keep-alive (новый) и т. д.
- **Совершенно новая документация:пройти через**Docusaurus создает совершенно новый сайт документации.Благодаря богатым возможностям Docusaurus документация была значительно улучшена с точки зрения SEO, загрузки, темного режима, поиска и работы с мобильными телефонами.
Для версии 2.0 его можно быстро создать через командную строку, и он поддерживает различные шаблоны, такие как antd/fusion/...:
$ npm init ice icejs-example
# 同时支持 yarn
$ yarn init ice icejs-example
Чтобы обеспечить базовый опыт разработки, рекомендуется использовать cnpm или внутренний реестр npm для установки зависимостей.
В дополнение к CLI мы также предоставляем инструмент разработки AppWorks для визуального создания проектов, просто найдите и установите AppWorks на рынке плагинов VS Code:
Режим Vite: прорыв
С постоянным появлением в сообществе строительных инструментов на основе модулей ES и постепенным улучшением экологической поддержки метод разработки модулей ES был принят и опробован все большим количеством разработчиков. Благодаря зрелости самого Vite, icejs также может быстро поддерживать режим разработки модулей ES, и наш официальный скаффолдинг также включил режим Vite по умолчанию.
// build.json
{
"vite": true
}
Быстро адаптируйтесь к режиму Vite
Для системы фреймворка, полностью основанной на Webpack, самая большая проблема при внедрении Vite заключается в том, как сохранить как можно более согласованные два режима и как лучше поддерживать код фреймворка. В ответ на эту проблему, прежде всего, единообразно используется исходная конфигурация.build.jsonконфигурационный файл, поддержкаpublicPath,aliasи другие инженерные конфигурации, все операции инженерной конфигурации в фреймворке основаны на оригинальномwebpack-chainВ обычных условиях нет необходимости сталкиваться с различиями в конфигурации Vite/Webpack.Через абстрактный сервис webpack и два уровня адаптации vite-service реализуются соответствующие возможности запуска/devServer/сборки на уровне сервиса и на уровне сервиса. В то же время с помощью wp2vite конвертируйте конфигурацию Webpack в конфигурацию Vite за один раз. Ниже приведен общий дизайн архитектуры, и у нас будет специальная статья, чтобы представить дизайн и реализацию этой части в будущем.
Запуск и горячее обновление
После введения Vite мы провели несколько тестов на более сложном проекте fusion-design-pro.Во-первых, время запуска проекта.Во время первого запуска сам Vite имеет механизм построения по требованию, и благословение esbuild лучше, чем Webpack, Он на 50% быстрее, но с точки зрения второго времени запуска, благодаря механизму Webpack 5 Cache, Webpack немного быстрее, чем Vite.
Поскольку запуск devServer Vite не зависит от компиляции исходного кода, время окончания компиляции запуска Vite рассчитывается на основе времени начала выполнения исходного кода.
Затем следует время горячего обновления, время обновления, время начала нагрева Vite сравнивается с полностью уплотненным режимом Webpack, улучшенное время обновления нагрева более чем в 10 раз по сравнению с режимом Vite, всего 100 мс, и не ухудшается по мере усложнения проекта. Вот почему мы считаем, что модель модуля ES приносит максимальную пользу.
Адаптация возможностей платформы
В дополнение к приведенной выше базовой конфигурации фреймворк также предоставляет возможности более высокого уровня, для которых мы также поддерживаем синхронизацию:
- Адаптация инженерных возможностей для различных режимов применения, таких как MPA/SPA/микро интерфейс/интеграция
- Локальная отладка возможностей обнаружения TypeScript/ESlint в режиме реального времени: реализация плагинов vite-plugin-ts-checker и vite-plugin-eslint-report
- Поддержка синтаксиса JSX+: реализовать соответствующий плагин vite-plugin-jsx-plus с помощью Babel.
- ССР/ССГ: Поддерживается
Благодаря вышеописанной работе мы добились того, что 80% возможностей режима Icejs Webpack можно последовательно использовать в режиме Vite, и мы также поддерживаем другие возможности в сочетании с бизнес-требованиями.
Режим Webpack: поиск прогресса при сохранении стабильности
Icejs 1.0 имеет большой запас проектов режима Webpack, которые нуждаются в постоянной поддержке, а в некоторых сценариях невозможно перейти в режим ES Modules, поэтому в 2.0 мы по-прежнему идем по стопам сообщества и продолжаем оптимизировать режим Webpack.
Webpack 5
Начиная с ice.js версии 2.0, версия Webpack, от которой зависит базовый проект, по умолчанию будет использовать версию v5, а проект будет адаптировать и обновлять экологию, связанную с Webpack, чтобы разработчики могли плавно перейти на Webpack 5. Благодаря возможности кэширования Webpack 5 время горячего запуска в версии 2.0 было улучшено почти на5 раз, При этом встроен React Fast Refresh для сокращения времени горячего обновления30%. С другой стороны, мы также обновили зависимости, такие как postcss, less-loader, sass-loader, до последней версии, чтобы разработчики могли пользоваться новыми функциями.
Предварительно скомпилированное решение на основе Module Federation
Благодаря функции Module Federation Webpack 5, icejs 2.0 поддерживает предварительную сборку зависимостей приложения в качестве удаленного приложения Module Federation для использования текущим приложением Зависимости приложений больше не компилируются в файл, чтобы уменьшить потребность Webpack в упаковке зависимостей.
{
"remoteRuntime": true
}
Благодаря включению предварительной компиляции Module Federation горячий старт значительно улучшается по сравнению с версией 1.x, а время горячего обновления сокращается почти на60%.
Замена Babel на SWC (экспериментально)
swcИспользование rust значительно повышает эффективность компиляции исходного кода JavaScript и в настоящее время поддерживает большинство сценариев компиляции babel. Поэтому icejs предоставляет возможность одним щелчком мыши открыть возможность компиляции swc:
{
"swc": true
}
После включения компиляции swc, помимо замены babel, компрессор по умолчанию также переключается с terser на swc, что еще больше сокращает время:
После включения компиляции swc скорость компиляции в среднем повышается.50%, скорость сжатия увеличивается почти35%. Тем не менее, swc в настоящее время не поддерживает пользовательские плагины, поэтому, если вы сильно зависите от некоторых других плагинов babel, в настоящее время сложно настроить swc, поэтому мы также помечаем эту возможность как «экспериментальную». В настоящее время фронтенд-сообщество уделяет все больше внимания swc, а команда Feibing также активно участвует в обсуждении решений, связанных с swc.Я считаю, что в ближайшем будущем мы сможем использовать swc для полной замены babel. .
Больше новых функций
Микро-интерфейс x ESM
После того, как icejs поддерживает режим Vite, icestark, фреймворк микроинтерфейса с открытым исходным кодом для команды Feibing, также поддерживает микроприложение спецификации ESM, и его нужно настроить только в микроприложении.loadScriptMode: importможно включить параметры:
<AppRouter>
<AppRoute
title="商家平台"
+ loadScriptMode="import"
url={[
'//unpkg.com/icestark-child-seller/build/js/index.js',
'//unpkg.com/icestark-child-seller/build/css/index.css',
]}
/>
</AppRouter>
После включения этой опции icestark будет загружать ресурсы микроприложений через API динамического импорта. Благодаря стратегии, согласно которой сценарии модулей ES выполняются только один раз, скорость перезагрузки и рендеринга микроприложений значительно повышается.
Схема SSG, совместимая с SSR
SSG (Генерация статического сайта) — это генерация статического сайта.Для некоторых сценариев официального веб-сайта или документа SSG может обеспечить лучшие возможности SEO и рендеринга первого экрана. Решение SSG в icejs 1.0 реализовано на основе puppeteer. Разработчики часто сталкиваются с проблемой зависимости от окружения. В 2.0 мы лучше согласовали решения SSG и SSR, упрощая их использование, и их нужно только включить в конфигурации проекта. , Может:
// build.json
{
"ssr": "static"
}
Только с приведенной выше конфигурацией после сборки будет создан статический файл HTML для каждого маршрута, а также поддерживается SSR.Page.getInitialPropsПолучить возможность исходных данных во время сборки:
├── build
| ├── dashboard
| | └── index.html # 预渲染 Dashboard 页面组件得到的 HTML
| ├── index.html # 预渲染 Home 页面组件得到的 HTML
| └── js
| └── index.js
Для сценариев динамической маршрутизации он также поддерживает настройку компонента маршрутизации страницы.getStaticPathsАтрибуты:
// src/pages/Project/index.tsx: /project/:id
const Project = (props) => {
return <>Hello</>;
}
+Project.getStaticPaths = async () => {
+ return Promise.resolve(['/project/1', '/project/100', '/project/1001']);
+}
export default Project;
Конструкция продуктов SSG поддерживает несколько методов развертывания, таких как Nginx, OSS и серверные службы, а режим рендеринга приложения также поддерживает рендеринг в режиме SSR или SSG в SSR или SSG соответственно.
Более стабильная схема управления зависимостями
Фреймворк R&D часто содержит много инженерных зависимостей, и иногда мы сталкиваемся с проблемой, что фреймворк недоступен из-за зависимостей от сообщества.Поэтому в версии 2.0 мы предварительно упаковали более 70 пакетов NPM сообщества, от которых мы зависим, пока icejs нет При активном обновлении версии этих пакетов и их зависимых пакетов не изменятся, чтобы гарантировать, что выпуск этих зависимых пакетов не повлияет на фреймворк, а предварительная упаковка также может косвенно повысить скорость фреймворка. установка.
будущее
Способности совершенствуются в режиме Vite
В настоящее время наши основные инженерные возможности поддерживают переключение между режимами Webpack/Vite одним щелчком мыши, включая такие сценарии, как SPA/MPA/микроинтерфейс, но в режиме Vite еще много достижений:
- Поддержка возможностей SSR/SSG
- Дальнейшее согласование инженерных возможностей Vite/Webpack, таких как более лаконичное и интуитивно понятное использование статических ресурсов в Vite.
- Возможность преобразования AST в унифицированном режиме Vite ограничена возможностями открытого API встроенного инструмента компиляции Vite esbuild, а сценарии, сильно зависящие от Babel (реагирование-ререфш, jsx, jsx+), — это плагины, вызывающие Babel, и мы разберемся с этим на уровне фреймворка.Один слой унифицирован, и в то же время он попытается напрямую внедрить swc
Более легкая интегрированная модель R&D
Во многих бизнес-сценариях малых и средних серверных систем разработчик часто несет ответственность за общие исследования и разработки от начала до конца. В этом сценарии разделение внешнего и внутреннего интерфейса улучшит управление кодом, соединение интерфейса процессы отладки, выпуска и развертывания и т. д. стоимость. Благодаря языковой согласованности, обеспечиваемой использованием JavaScript во внешнем и внутреннем интерфейсе, а также низким затратам на эксплуатацию и обслуживание, гарантированным бессерверной инфраструктурой, в прошлом году наша интегрированная модель исследований и разработок, основанная на icejs + midway-hooks, привлекла множество небольших и средние предприятия в Alibaba.Фоновая система также обеспечивает отличную поддержку для недорогого внедрения решения SSR для бизнеса C-стороны.
В версии 2.0 мы надеемся еще больше улучшить интегрированное решение: с одной стороны, это облегчит серверную часть фреймворка для улучшения разработки и отладки API, а с другой стороны, оно также будет поддерживать развертывание Node.js. на основе FaaS, гарантируя, что даже при отсутствии возможности интеграции могут также использоваться в компаниях с бессерверной инфраструктурой.
насчет нас
Команда ICE входит в состав команды по архитектуре внешнего интерфейса Департамента Тао и надеется улучшить опыт разработчиков внешнего интерфейса с помощью фреймворков и инструментов исследований и разработок. Если вы заинтересованы в icejs, Vite, Webpack, плагине VS Code, Electron и т. д., подпишитесь на наш репозиторий GitHub:
Если вы столкнулись с проблемами при использовании продуктов, связанных с FeiBing, присоединитесь к группе DingTalk сообщества FeiBing для обратной связи и общения, откройте ссылку и отсканируйте код:ice.Ali CDN.com/assets/IM A делится…
Ссылки по теме
- Сайт «Летающий лед» (ICE):ice.work/
- Репозиторий icejs на GitHub:github.com/alibaba/ice
- icejs 2.0.0 Release Pull Request GitHub.com/Alibaba/ice…
- Плагин VS Code AppWorks:appworks.site/
- Группа ногтей «Летающий лед» QR-код:ice.Ali CDN.com/assets/IM A делится…
- Решение для микроинтерфейса icestark:GitHub.com/ice-speaker/ice…
- Vite: vitejs.dev/
- СВК:swc.rs/
- esbuild: esbuild.github.io/
- Зависимости icejs NPM предварительно упакованы:GitHub.com/ice-horn/not-i…