Рубрика «webpack»

в 18:17, , рубрики: CDN, webpack, статика, чанки

Современное фронтенд-приложение после сборки - это не один большой JS-файл, а главный entry-point и набор чанков: файлов, которые подгружаются по требованию при динамическом импорте (import(), React.lazy() и т.д.). Пользователь открывает страницу, грузится основной бандл, переходит в раздел - браузер по запросу качает ещё один файл, например chunk-abc123.js.

И вот этот запрос чанка может упасть. Причины бывают разные:

  • Временный обрыв сети или таймаут;

  • Прокси, файрвол, расширения браузера режут или подменяют ответ;

  • Читать полностью »

в 4:22, , рубрики: npm, sass, scss миксин, svg, svg-sprite, webpack, webpack5, сборка проекта

Простой статический сайт на Webpack 5

Читать полностью »

в 8:15, , рубрики: html, React, SPA, vanilla.js, webpack, веб-компоненты, эксперимент

Введение

Привет! Меня зовут Сергей и я фронтенд-разработчик. Уже несколько лет я использую React как основную библиотеку. Связка React + MUI + Styled Components (MUI-версия) + Storybook + Playwright. Стейт-менеджеры не использую, поскольку они избыточны в большинстве случаев, и достаточно грамотного использования контекста.

Я очень неплохо умею пользоваться React, поэтому имею право его очень сильно недолюбливать.

Читать полностью »

в 6:16, , рубрики: electron, microfrontends, module federation, webpack

Недавно на проекте столкнулся с необычной задачей - сделать из готового React веб-приложения десктопную версию на Electron. Что же тут необычного? А то, что наше веб-приложение построено на микрофронтенд архитектуре и располагается в трёх отдельных репозиториях. А общение между микрофронтендами происходит в runtime через HTTP. И тут начинаются сложности, так как для создания дистрибутива, Electron'у нужен доступ к исходникам всего приложения. Хотя Electron легко подружить с Webpack, как это сделать с плагином Module Federation на первый взгляд не понятно.

Читать полностью »

в 9:01, , рубрики: microfrontends, module federation, webpack, опыт разработчика

Привет! Меня зовут Дмитрий Ханин, я работаю в Сбере и участвую в разработке Платформы ЦА — системы на базе блокчейн, занимающейся привлечением средств юридических и физических лиц. Сегодня хотелось бы рассказать про тот путь, который мы прошли за несколько лет, как организовали взаимодействие между разными приложениями и чем нам это помогло.

Рассказ разделён на две части. В первой рассмотрим путь проекта и проблемы, с которыми сталкивались, а во второй разберём, как мы решали часть этих проблем.

Словарь терминов

1Продукт Читать полностью »

в 9:15, , рубрики: module federation, TypeScript, webpack, микрофронтенды

Всем привет! Меня зовут Игорь. Я  frontend-разработчик. Сегодня я расскажу вам, насколько просто использовать микрофронты. Причина, по которой я хотел бы рассказать об этом подробнее, в том, что люди, которые недавно в разработке, не всегда представляют, как приложения взаимодействуют между собой и через что приходится пройти нашему remote-модулю, чтобы он смог отобразиться на хосте.
Перед началом предлагаю немного остановиться на терминологии и стеке:

  • Микрофронтенд — это независимый модуль, который мы подключаем.

  • Хост — это бандл, куда мы подключаем микрофронтенд.

  • RemoteЧитать полностью »

в 10:16, , рубрики: bundler, module federation, rspack, vite, vue.js, webpack, сборка проекта
Webpack, Vite или Rspack: что это за зоопарк или чем собирать микрофронтенды в 2025? - 1

Предисловие

Читать полностью »

в 13:15, , рубрики: javascript, webpack

Введение

Сегодня в мире разработки веб-приложений нам очень часто приходится прибегать к помощи сборщиков. И хоть на текущий момент существует большой выбор инструментов сборки приложений, значительная доля написанных проектов использует Webpack в качестве сборщика. И бывает, что стандартный функционал Webpack не покрывает наши потребности, а плагинов, которые это могут сделать, нет в открытом доступе. Тогда мы приходим к выводу, что нужно писать свой плагин. Эта статья посвящена необходимой базе, которая вам понадобится, чтобы понять, как устроены плагины для Webpack и как начать их писать.

Что же такое Webpack

Читать полностью »

в 22:18, , рубрики: bun, esbuild, javascript, jest, node.js, npm, TypeScript, webpack
Релиз Bun 1.0 (новый runtime для JavaScript ) - 1

Представляем Bun версии 1.0.

Bun — это быстрый универсальный набор инструментов для запуска, сборки, тестирования и отладки JavaScript и TypeScript кода (от одного файла до fullstack-приложения). Сегодня Bun стабилен и готов к продакшену.

Установка Bun

# curl
curl -fsSL https://bun.sh/install | bash
# npm
npm install -g bun
# brew
brew tap oven-sh/bun
brew install bun
# docker
docker pull oven/bun
docker run --rm --init --ulimit memlock=-1:-1 oven/bun

Обновление Bun

Читать полностью »

в 17:38, , рубрики: css, html, html-верстка, jpeg, optimization, PNG, WebP, webpack, Клиентская оптимизация, плагины, сборщик пакетов, сжатие данных, системы сборки

Как вы знаете, формат изображений WebP в большинстве случаев имеет меньший вес, по сравнению со своими братьями: png и jpeg. Поэтому использовать его в своих приложениях - это хорошая практика.

А как же пользователи, устройства которых не поддерживают данный формат?

В этом случае нам помогает тег <picture> или значение image-set свойства background-image. Просто пишем такие магические конструкции и браузер сам выберет тот источник, который понимает:

<!-- for HTML... -->
<picture>
  <source type="image/webp" srcset="images/cat.webp">
  <img src="images/cat.jpg" width="100" height="100" alt="Cat">
</picture>
Читать полностью »
123...10...11
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js