Рубрика «webpack»
Webpack, Vite или Rspack: что это за зоопарк или чем собирать микрофронтенды в 2025?
2025-03-06 в 10:16, admin, рубрики: bundler, module federation, rspack, vite, vue.js, webpack, сборка проекта
Введение
Сегодня в мире разработки веб-приложений нам очень часто приходится прибегать к помощи сборщиков. И хоть на текущий момент существует большой выбор инструментов сборки приложений, значительная доля написанных проектов использует Webpack в качестве сборщика. И бывает, что стандартный функционал Webpack не покрывает наши потребности, а плагинов, которые это могут сделать, нет в открытом доступе. Тогда мы приходим к выводу, что нужно писать свой плагин. Эта статья посвящена необходимой базе, которая вам понадобится, чтобы понять, как устроены плагины для Webpack и как начать их писать.
Что же такое Webpack
Релиз Bun 1.0 (новый runtime для JavaScript )
2023-09-09 в 22:18, admin, рубрики: bun, esbuild, javascript, jest, node.js, npm, TypeScript, webpack
Представляем 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
Читать полностью »
Webpack. Создание WebP вместе с Jpeg и Png
2023-05-07 в 17:38, admin, рубрики: 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>Читать полностью »Webpack + CSS Modules + TS = Love
2022-09-17 в 23:31, admin, рубрики: css, TypeScript, webpack, Разработка веб-сайтовЯ считаю, что CSS Модули — это монументальный проект. С его помощью можно решить одну худших проблем CSS — коллизию имен классов. Давайте рассмотрим простой пример, чтобы было понятно, о чем идет речь.
Представим, что мы разрабатываем компонент Button. Использовать "чистый" CSS опасно, потому что есть риск, что кто-то ещё в вашем проекте (или ещё хуже — в подключенной библиотеке) использует то же имя класса:
/* Button.css */
.button {
color: #f00;
padding: 10px;
font-size: 18px;
}
/* node_modules/some_lib/styles.css */
.button {
color: #0f0;
}// Button.tsx
import { FC } from "react";
import "./Button.module.css";
import "some_lib/styles.css";
export const Button: FC = (props) =>Читать полностью »Как привести проект в чувство
2020-10-27 в 8:00, admin, рубрики: eslint, javascript, lighthouse, refactoring, Sentry, sonar, webpack, Блог компании ДомКлик, Проектирование и рефакторинг, Разработка веб-сайтов, системы сборки
Представьте ситуацию, вы первый день на новом для вас проекте, с чего будете начинать? Опишите свои шаги.
Так звучит один из популярных вопросов на собеседовании для фронтенд-разработчиков. Я не знаю, что хочет услышать человек, задающий этот вопрос, но у меня есть ответ на его техническую составляющую и бэклог на несколько месяцев вперед.
Читать полностью »
Module Federation в Webpack 5, плагин для обмена модулями между Javascript приложениями, описание и пример
2020-06-14 в 14:58, admin, рубрики: javascript, React, ReactJS, webpack, микрофронтендВ пятой версии сборщика Webpack появился набор плагинов для обмена модулями между Javascript приложениями.
Эта статья — краткое описание и пример на основе двух небольших приложений построенных на фреймворке ReactJS.
Плагин Module Federation позволяет приложению экспортировать один или несколько модулей в отдельный JS файл. Отличный способ строить микрофронтенд приложения. Сторонние приложения могут импортировать себе готовые модули, это могут быть например реакт компоненты. Причём, импорт зависимостей Webpack берёт на себя. Отличие от NPM в том, что импорт в runtime.
Читать полностью »
Минифицируем приватные поля в TypeScript. Доклад Яндекса
2020-06-13 в 8:00, admin, рубрики: AST, babel, Google Closure Compiler, javascript, React, TypeScript, webpack, Блог компании Яндекс, интерфейсы, минификация, фронтендМеня зовут Лёша Гусев, я работаю в команде разработки видеоплеера Яндекса. Если вы когда-нибудь смотрели фильмы или трансляции на сервисах Яндекса, то использовали именно наш плеер.
Я сделал небольшую оптимизацию размера бандла — минификацию приватных полей. В докладе на Я.Субботнике я рассказал об использовании Babel-плагинов, трансформеров TypeScript и о том, насколько в итоге уменьшился размер продакшен-сборки проекта.
Конспект и видео будут полезны разработчикам, которые ищут дополнительные способы оптимизации своего кода и хотят узнать, как webpack, Babel и TypeScript могут в этом помочь. В конце будут ссылки на GitHub и npm.
Читать полностью »
Возможно, вам не нужен Svelte, чтобы уменьшить ваш JavaScript
2020-05-30 в 18:19, admin, рубрики: imagemin, javascript, svelte, SvelteJs, webpack, оптимизации, Разработка веб-сайтовСейчас популярно мнение, что текущие Javascript-фреймворки непомерно большие, а новый фреймворк Svelte очень компактный. Поэтому всем нужно переходить на него, и проблема размера Javasctipt решится сама собой.
Недавно вышла статья "Хороший ли выбор Svelte для реализации виджета?" с опытом реализации проекта с критичным размером бандла. Это отличный повод проверить обещания пиарщиков Svelte на реальном проекте.
Давайте его проанализируем!
Создаем интернет-магазин на Nuxt.js 2 пошаговое руководство Часть 2
2020-03-04 в 22:23, admin, рубрики: html, javascript, node.js, nuxt, nuxtjs, server side rendering, ssr, vue.js, vuejs, webpack, Разработка веб-сайтов
Первая часть тут
Продолжаем разработку нашего интернет магазина. В этой части будет:
- нормальная загрузка картинок по статическим адресам
- генерация хлебных крошек на клиенте
- страница товара
- шапка
- рабочая кнопка купить с синхронизацией товаров между вкладками (и сессиями)