Обзор инструмента Webpack Bundle Analyzer
В этом материале познакомимся с таким пакетом как Webpack Bundle Analyzer, который позволяет наглядно увидеть из каких частей состоит проект. В качестве тестового проекта использована сборка на базе Next.js 15-й версии с app router.
https://habr.com/ru/articles/913480/
#javascript #webpack #reactjs #nextjs #npm_package #analyzer
🚀 Ever wondered how Angular apps stay lightning fast? It’s all thanks to Webpack.
From bundling to lazy loading, Webpack is the powerhouse behind Angular’s smooth performance. 🔧✨
Whether you’re debugging, customizing builds, or just curious — this guide breaks down exactly how Angular uses Webpack (even when you're using the CLI).
🔍 Learn more: https://www.angularminds.com/blog/unit-testing-in-react-with-jest-and-enzyme
#Angular #Webpack #JavaScript #FrontendDev #AngularTips #DevTools #BlueSkyTech
От Lerna до ModuleFederation
Привет, Хабр! Меня зовут Дмитрий Ханин, я работаю в Сбере и участвую в разработке Платформы ЦА — системы на базе блокчейн, занимающейся привлечением средств юридических и физических лиц. Сегодня хотелось бы рассказать про тот путь, который мы прошли за несколько лет, как организовали взаимодействие между разными приложениями и чем нам это помогло. Рассказ разделён на две части. В первой рассмотрим путь проекта и проблемы, с которыми сталкивались, а во второй разберём, как мы решали часть этих проблем.
https://habr.com/ru/companies/sberbank/articles/911748/
#module_federation #webpack #microfrontends #опыт_разработчика
I know it's biased towards JS-heavy web apps when people say this, but it totally cracks me up when they say Vite is much simpler than Webpack when you have to slog through this kind of documentation just to work around all its complications. It's totally comical to have to run an extra server and have to deal with cross-server communication issues. It's like it fixes one big problem, only to introduce another.
Simple React builds for WordPress with Symfony’s Webpack Encore
Symfony’s Webpack Encore (docs) makes it quite easy to build your JS apps. It’s a nicer interface for the actual Webpack config, so you can also extend and customize your config to fit any use case that’s supported by webpack.
One of the cool things I’ve done with it is using it for building React apps that use WordPress code editor components for my own admin tools.
Here’s how you can use […]
Go through all the .js files in dist/mjs and add .js to all relative imports, so change e.g.
import { createDAGfromGraph } from "./scc";
to
import { createDAGfromGraph } from "./scc.js";
https://github.com/waysact/webpack-subresource-integrity/issues/231#issuecomment-2077144314 #WebPack
"Don’t use [chunkhash] in development since this will increase compilation time"
https://codeburst.io/long-term-caching-of-static-assets-with-webpack-1ecb139adb95#.oibt9ye3h #webdev #webpack
Микрофронтенд на пальцах с module federation 2.0
Микрофронтенд на пальцах с module federation 2.0. Как собрать микрофронты из кубиков без магии по шагам.
Сборщики Frontend и когда их применять
Привет, друзья! В этой статье вы узнаете ключевые возможности и отличия трёх популярных сборщиков Frontend-разработки: Webpack, Vite и Parcel. Также вы сравните использование этих сборщиков на практике и узнаете, как выбрать сборщик для своего проекта.
Is Vite Faster Than Turbopack?, by @gill_kyle@x.com:
https://www.kylegill.com/essays/vite-vs-turbopack/
#nextjs #webpack #vite #rollup #bundling #performance #comparisons
Снимаем оковы Webpack: как мы ускорили сборку проекта в 10 раз, потратив меньше рабочего дня
Современная фронтенд-разработка технологически весьма сложная: множество зависимостей, микросервисы, размеры самих проектов, плагины для настройки окружения и многое другое. Это касается и одного из самых ключевых этапов в разработке - сборка проекта. Множество проектов, на которых я работал, собирались (и собираются) с помощью Webpack. Это классический и проверенный временем инструмент: со своими преимуществами и недостатками. В какой-то момент недостатки стали перешивать:
https://habr.com/ru/articles/890290/
#javascript #webpack #фронтендразработка #vite #микросервисы #hmr
Webpack, Vite или Rspack: что это за зоопарк или как собирать микрофронтенды в 2025?
Привет! Разбираясь с микрофронтендами в монорепозитории для проекте с Vue3 пришёл к выводу, что так много уделяется внимания гибкости в построении архитектуры и бизнес-задачам, что все боятся заниматься улучшением "условий труда" связанных со сборкой приложения! Решил что эта задачка как раз мне подходит и представляю вашему вниманию небольшую статью которая возможно поможет вам сделать выбор или подтолкнет попробовать новые инструменты сборки фронтенда! Для справки - микрофронтенды у нас на Module Federation, Nx для управления монорепозиторием, общаемся мы через GraphQL, тестируем с Jest и конечно куда без TypeScript. Проект активно развивается, и с ростом его масштабов столкнулись с вопросом: какой сборщик лучше всего справится с нашими задачами? Webpack уже давно с нами, но его медлительность заставляет искать альтернативы. Vite обещает молниеносную разработку, а Rspack — производительность без сложной миграции. Давайте разберёмся, что подойдёт именно нам — и, возможно, вам.
https://habr.com/ru/articles/888478/
#сборка_проекта #webpack #vite #rspack #vuejs #module_federation #bundler
Even though I'm a backend developer I've got to keep abreast of some frontend stuff so that I can lend my general developer brain to designing or advising or fixing things wherever it happens, and it looks like I've now got to get up to speed on #Preact and #TailWind and #WebPack for the next phase of work. That'll keep me busy for a bit.
Way back in September of 2022, @bart finished off the Webpack miniseries by leaving it as an exercise for the student to deploy their web apps to GitHub Pages. Bart closes that circle in this installment while teaching us how to use GitHub Actions.
Meme Roulette Chrome Extension
Crafting a Chrome Extension: TypeScript, Webpack, and Best Practices Cendekia ・ Feb 13 #typescript #chrome #extensions #webpack source
https://devnews.tech/meme-roulette-chrome-extension/?utm_source=mastodon&utm_medium=jetpack_social
Порты в веб-разработке: от локальной разработки до продакшена
Эта статья предназначена в первую очередь для веб-разработчиков. Я не являюсь экспертом в области сетей, администрирования или DevOps, поэтому представленный материал не углубляется в сетевые аспекты. Из любопытства, я как то задался вопросом практического использования разных номеров портов: что они означают для разработчиков, почему используются определенные порты, и какие приложения чаще всего запускаются на них. Цель статьи — пролить немного света на эти “магические” циферки с точки зрения их прикладного применения веб-разработчиками. Исторически приложения на Node.js (например, с использованием фреймворков Nest.js или Express) и Webpack по умолчанию запускаются на 3000 порту, если не вносить изменения в базовую конфигурацию. Vite, напротив, изначально использует порт 5173. Это может быть связано с отсылкой к названию "Vite" (если подключить немного воображения). С технической точки зрения нет разницы, на каком порту запускать локальный сервер для разработки — это может быть 1050, 10900 или любой другой. Главное, чтобы порт был:
https://habr.com/ru/articles/870658/
#HTTP_Ports #Vite #Webpack #nodejs_приложения #тестовые_среды
Another try, and I'm giving up once again 😭
I just can't upgrade my whole build setup to use #webpack + #typescript + #esmodules for both the app code and the test suite. Something always breaks. I lose *hours* reading github issues and stuff, trying stuff left and right, trying to switch to this or that, nothing works entirely, and it never breaks the same way.
That kind of nonsense will end up with me abandoning my side project 😩
Как мы мигрируем с JQuery на React
Вокруг все говорят о серверных компонентах реакта, о серверном рендеринге, и разных новшествах в мире фронтенде. Как будто JQuery в один миг взял и исчез. Несмотря ни на что он всё ещё остаётся самой популярной библиотекой 😅. Сегодня я вам расскажу, как мы постепенно мигрируем с JQuery на React.
https://habr.com/ru/articles/866158/
#frontend #react #typescript #миграция_проекта #create_react_app #zustand #jquery #webpack #razor #tsc
