2 мес. назад
Снимаем оковы Webpack: как мы ускорили сборку проекта в 10 раз, потратив меньше рабочего дня
Современная фронтенд-разработка технологически весьма сложная: множество зависимостей, микросервисы, размеры самих проектов, плагины для настройки окружения и многое другое. Это касается и одного из самых ключевых этапов в разработке - сборка проекта. Множество проектов, на которых я работал, собирались (и собираются) с помощью Webpack. Это классический и проверенный временем инструмен...
https://clck.ru/3HQyWa
Современная фронтенд-разработка технологически весьма сложная: множество зависимостей, микросервисы, размеры самих проектов, плагины для настройки окружения и многое другое. Это касается и одного из самых ключевых этапов в разработке - сборка проекта. Множество проектов, на которых я работал, собирались (и собираются) с помощью Webpack. Это классический и проверенный временем инструмен...
https://clck.ru/3HQyWa
8 мес. назад
[Перевод] WebP — формат сжатия веб-страниц
Я хочу, чтобы посетители моего сайта наслаждались им, так что я забочусь об accessibility и проверяю, что даже без JavaScript тут есть, на что смотреть. Я забочусь о том, насколько быстро грузятся страницы, ведь на некоторых из них есть большие иллюстрации, поэтому я минифицирую HTML.Вот только есть один нюанс, который ставит мне палки в колёса и не даёт сделать блог лёгким как пёрышко....
https://clck.ru/3D99yN
Я хочу, чтобы посетители моего сайта наслаждались им, так что я забочусь об accessibility и проверяю, что даже без JavaScript тут есть, на что смотреть. Я забочусь о том, насколько быстро грузятся страницы, ведь на некоторых из них есть большие иллюстрации, поэтому я минифицирую HTML.Вот только есть один нюанс, который ставит мне палки в колёса и не даёт сделать блог лёгким как пёрышко....
https://clck.ru/3D99yN
1 год назад
Интеграция React и AngularJS через Webpack Module Federation
Переходите с AngularJS на React без стресса и суеты. В этой статье я поделюсь с вами способом, как оживить ваш проект, плавно встроив элементы React в структуру, построенную на добром старом AngularJS. Мы все знаем, что рефакторинг или полная смена фреймворка может пугать, особенно когда вложены годы труда. Но не волнуйтесь, я покажу, как использовать микрофронтенды и Module Federation для того, ч...
https://clck.ru/38t9PL
Переходите с AngularJS на React без стресса и суеты. В этой статье я поделюсь с вами способом, как оживить ваш проект, плавно встроив элементы React в структуру, построенную на добром старом AngularJS. Мы все знаем, что рефакторинг или полная смена фреймворка может пугать, особенно когда вложены годы труда. Но не волнуйтесь, я покажу, как использовать микрофронтенды и Module Federation для того, ч...
https://clck.ru/38t9PL
1 год назад
Webpack vs esbuild — уже можно использовать в production?
Периодически я пробую разные инструменты, и если они стабильно покрывают все необходимые сценарии - включаю в свою экосистему для коммерческих проектов. С третьего подхода за последние 3 года esbuild, наконец, приблизился по функционалу к Webpack. В статье привожу проблемы, с которыми я столкнулся при миграции, и пути их решения....
https://clck.ru/36ZSdA
Периодически я пробую разные инструменты, и если они стабильно покрывают все необходимые сценарии - включаю в свою экосистему для коммерческих проектов. С третьего подхода за последние 3 года esbuild, наконец, приблизился по функционалу к Webpack. В статье привожу проблемы, с которыми я столкнулся при миграции, и пути их решения....
https://clck.ru/36ZSdA
2 г. назад
Готовим микрофронтенды на чистом JS без фреймворков
Привет, Хабр! Меня зовут Евгений Лабутин, я разработчик в МТС Digital. Сегодня я расскажу вам о своем рецепте приготовления микрофронтендов без использования каких либо фреймворков. Ведь такие фреймворки как Webpack Module Federation, Single-SPA, SystemJS и подобные вам просто не нужны для написания микрофронтендов, ровно так же как вам не нужен jQuery для написания современных фронтендо...
https://clck.ru/35U8RS
Привет, Хабр! Меня зовут Евгений Лабутин, я разработчик в МТС Digital. Сегодня я расскажу вам о своем рецепте приготовления микрофронтендов без использования каких либо фреймворков. Ведь такие фреймворки как Webpack Module Federation, Single-SPA, SystemJS и подобные вам просто не нужны для написания микрофронтендов, ровно так же как вам не нужен jQuery для написания современных фронтендо...
https://clck.ru/35U8RS
2 г. назад
Микрофронтенды на Module Federation — наш опыт. Часть 1
Всем привет! Меня зовут Женя, я разработчик из QIWI, занимаюсь созданием внутренних сервисов. Совсем недавно мы провели эксперимент по использованию микрофронтендов, и я хочу поделиться с вами опытом использования. В качестве основы для построения системы мы выбрали фичу Webpack - Module Federation.
https://clck.ru/34Tt3T
Всем привет! Меня зовут Женя, я разработчик из QIWI, занимаюсь созданием внутренних сервисов. Совсем недавно мы провели эксперимент по использованию микрофронтендов, и я хочу поделиться с вами опытом использования. В качестве основы для построения системы мы выбрали фичу Webpack - Module Federation.
https://clck.ru/34Tt3T
2 г. назад
Оптимизация настройки Webpack проекта на CRA
Всем привет! Один из проектов на работе у нас изначально создан на create-react-app утилите. Встал вопрос по поводу того, можно ли как-то оптимизировать сборку по скорости и весу сжатого проекта, так как есть большие планы на рост проекта и не хотелось бы, чтобы что-то начало тормозить, и этим соответственно я и занялся. Хочу рассказать о том, как все проходило, какие шаги были пройдены и что в и...
https://clck.ru/34ArEU
Всем привет! Один из проектов на работе у нас изначально создан на create-react-app утилите. Встал вопрос по поводу того, можно ли как-то оптимизировать сборку по скорости и весу сжатого проекта, так как есть большие планы на рост проекта и не хотелось бы, чтобы что-то начало тормозить, и этим соответственно я и занялся. Хочу рассказать о том, как все проходило, какие шаги были пройдены и что в и...
https://clck.ru/34ArEU
2 г. назад
Вечный RnD: chunk flushing для серверного рендеринга React + WMF
Все говорят про webpack-module-federation - микрофронты тут, микрофронты там.— "А мы уже внедрили", "а мы уже построили микрофронтовую-архитектуру", "мы релизим независимо".Но начинаешь расспрашивать, "а что сделали", "а как связали" - выходит что за всеми этими броскими фасадами скрывалось добавление вызова ModuleFederationPlugin(...) на уровне рядового потребителя, в лучшем случае с подстройкой ...
https://clck.ru/33oz9S
Все говорят про webpack-module-federation - микрофронты тут, микрофронты там.— "А мы уже внедрили", "а мы уже построили микрофронтовую-архитектуру", "мы релизим независимо".Но начинаешь расспрашивать, "а что сделали", "а как связали" - выходит что за всеми этими броскими фасадами скрывалось добавление вызова ModuleFederationPlugin(...) на уровне рядового потребителя, в лучшем случае с подстройкой ...
https://clck.ru/33oz9S
2 г. назад
Вдали от Webpack, или Как мы в Dodo микрофронтенды на Vite переводили
С первой частью рассказа о микрофронтендах в Dodo можно ознакомиться тутМы спокойно сидели и пилили новый проект на нашем устоявшемся стеке (React + TypeScript + Webpack + SingleSPA + SystemJS + Jest). Пока одним прекрасным утром не пришел наш техлид и такой: «Чуваки, а давайте затащим Vitest!».
https://clck.ru/33Y9M8
С первой частью рассказа о микрофронтендах в Dodo можно ознакомиться тутМы спокойно сидели и пилили новый проект на нашем устоявшемся стеке (React + TypeScript + Webpack + SingleSPA + SystemJS + Jest). Пока одним прекрасным утром не пришел наш техлид и такой: «Чуваки, а давайте затащим Vitest!».
https://clck.ru/33Y9M8
2 г. назад
Оптимизация графики для небольших сайтов: quetzli, webp, avif
Как мы оптимизировали показ изображений на сайте GrinDin.ru.Всё началось примерно 10 лет назад, когда захотелось, чтобы вот этот вот контейнер выглядел прилично, не имел явно зазубренных граней, но при этом загружался за разумное время.
https://clck.ru/33BHNd
Как мы оптимизировали показ изображений на сайте GrinDin.ru.Всё началось примерно 10 лет назад, когда захотелось, чтобы вот этот вот контейнер выглядел прилично, не имел явно зазубренных граней, но при этом загружался за разумное время.
https://clck.ru/33BHNd
2 г. назад
Настройка Webpack 5
Подробное руководство о настройке сборщика Webpack 5 и о создании шаблона, который позволит разрабатывать фронтенд сайтов с использованием Pug, Sass, JavaScript и Markdown
https://clck.ru/32nL7h
Подробное руководство о настройке сборщика Webpack 5 и о создании шаблона, который позволит разрабатывать фронтенд сайтов с использованием Pug, Sass, JavaScript и Markdown
https://clck.ru/32nL7h
3 г. назад
История одного бага
Всё началось с баг репорта от одного из пользователей нашего фрэймворка JDI Light - NullPointerException при WebPage.open(), а точнее WindowsManager.getWindows()Максимально странное падение до 30% тестов разом с одной ошибкой. Причём либо падает сразу много, либо - не падает вообще.Мы в JDI очень трепетно относимся к баг репортам пользователей, особенно такого фантастического качества - с подробны...
https://clck.ru/32DEjH
Всё началось с баг репорта от одного из пользователей нашего фрэймворка JDI Light - NullPointerException при WebPage.open(), а точнее WindowsManager.getWindows()Максимально странное падение до 30% тестов разом с одной ошибкой. Причём либо падает сразу много, либо - не падает вообще.Мы в JDI очень трепетно относимся к баг репортам пользователей, особенно такого фантастического качества - с подробны...
https://clck.ru/32DEjH
3 г. назад
Категоризация веб-ресурсов при помощи… трансформеров?
Привет! Меня зовут Анвар, я аналитик данных RnD-лаборатории. Перед нашей исследовательской группой стоял вопрос проработки внедрения ИИ в сервис фильтрации веб-контента SWG-решения Solar webProxy. В этом посте я расскажу, зачем вообще нужен анализ веб-контента, почему из многообразия NLP-моделей для автоматизации решения этой задачи мы выбрали модель-трансформер. Кратко объясню, как с помощью мате...
https://clck.ru/32C5Gk
Привет! Меня зовут Анвар, я аналитик данных RnD-лаборатории. Перед нашей исследовательской группой стоял вопрос проработки внедрения ИИ в сервис фильтрации веб-контента SWG-решения Solar webProxy. В этом посте я расскажу, зачем вообще нужен анализ веб-контента, почему из многообразия NLP-моделей для автоматизации решения этой задачи мы выбрали модель-трансформер. Кратко объясню, как с помощью мате...
https://clck.ru/32C5Gk
Исправлено:
- Исправлена проблема с загрузкой изображений в формате .webp
- Изменен дизайн и отображение различных элементов
- Исправлены проблемы системы регистрации пользователей
- Исправлена проблема с вводом фамилии на странице запуска
- Исправлена проблема, связанная с выбором страны пользователя
- Исправлена проблема ввода в сообщениях (shift+enter вместо просто ввода)
- Исправлена ошибка при сохранении выбранного языка
- Еще очень много мелких доработок и исправлений