Андрей Викулов (VProger)

Posted on Feb 2 • Originally published at viku-lov.ru on Feb 2

Vite vs Webpack 5 vs esbuild vs Turbopack: выбор бандлера в 2026

#bundler #vite #webpack #esbuild

Vite vs Webpack 5 vs esbuild vs Turbopack: что выбрать в 2026

Если ты выбираешь бандлер в 2026, вопрос уже не “кто умеет собирать”, а “кто собирает быстро, стабильно и без шаманства”. И да — Webpack всё ещё жив, просто он теперь “танк”: мощный, тяжёлый, не всегда быстрый.

Карта выбора за 60 секунд

Vite — дефолт для большинства фронтенд-проектов: быстрый dev, нормальный build, минимум конфигов.
Webpack 5 — когда нужно нестандартное : сложные legacy-проекты, куча лоадеров, микрофронты, специфичные пайплайны, “у нас так исторически сложилось”.
esbuild — ультрабыстрый транспайлер/минификатор/бандлер “для простых задач”; часто идеален как часть сборки (или для библиотек/CLI/инструментов).
Turbopack — если ты в Next.js 16+ и хочешь максимум скорости “из коробки”; как standalone-бандлер — пока не твой универсальный молоток. (nextjs.org)

Что это вообще за звери (в двух строках)

Vite

Dev-сервер на ESM (браузер грузит модули как есть), прод-сборка через Rollup. В итоге dev обычно ощущается “мгновенным”, особенно на средних проектах. (strapi.io)

Webpack 5

Классический “всё в один граф”, огромная экосистема, гибкость и цена этой гибкости: конфиги, лоадеры, магия. Официально много внимания к performance-гайдам и кэшированию. (webpack)

esbuild

Нативный бинарник (Go), очень быстрые трансформации, но как “бандлер для всего” ограничен: экосистема и тонкая настройка хуже, чем у Webpack/Vite. (Часто выигрывает как ускоритель внутри других инструментов.) (Medium)

Turbopack

Rust-бандлер внутри Next.js. В Next.js 16 заявлен как стабильный и дефолтный для новых проектов; цель — скорость в dev и в билд-пайплайне. (nextjs.org)

Реальные бенчмарки (а не “у меня на ноуте летает”)

Тут важно: сравнивать нужно 2 вещи — dev (холодный старт + HMR/Fast Refresh) и prod build (время сборки + размер + стабильность).

Типичные результаты, которые стабильно повторяются в статьях/замерах

🔧 Сценарии использования бандлеров

Dev: быстрые пересборки

Vite — очень быстро

Webpack 5 — медленнее на крупных графах зависимостей

Turbopack (Next.js) — очень быстро

esbuild — очень быстро

Prod build

Vite — быстро (зависит от Rollup и плагинов)

Webpack 5 — может быть долго, лечится кэшем

Turbopack (Next.js) — заявлено в 2–5× быстрее Webpack

esbuild — быстро на простых проектах

По источникам:

В обзорах по “современным бандлерам” Vite/esbuild дают “почти мгновенную обратную связь” в dev, тогда как Webpack чаще медленнее на пересборках. (strapi.io)
В Next.js 16 заявляют прирост 2–5× к production builds и до 10× к Fast Refresh относительно Webpack (в контексте Next). (nextjs.org)
В сравнительных статьях Vite часто выигрывает по скорости и DX, Webpack выигрывает по “всё можно сделать”. (Kinsta®)

Как сделать честный бенчмарк у себя (копипаст)

Сделай три прогона и считай медиану (первый прогон прогревает кэши).

package.json


{

"scripts": {

"bench:clean": "rm -rf node\_modules/.cache dist .vite",

"bench:vite": "npm run build",

"bench:webpack": "webpack --mode production",

"bench:time": "node -e \"const {execSync}=require('child\_process'); const t=Date.now(); execSync(process.argv[1],{stdio:'inherit'}); console.log('ms:',Date.now()-t)\""

}

}

И запускай:


npm run bench:clean

npm run bench:time "npm run bench:vite"

npm run bench:time "npm run bench:webpack"

(Да, это не лаборатория NASA, но для выбора инструмента — более чем.)

Когда что использовать

Vite — “стандартная скорость для стандартного мира”

Бери Vite, если у тебя:

SPA/MPA на React/Vue/Svelte/vanilla
нужен быстрый dev и простая конфигурация
проект не завязан на экзотические webpack-лоадеры “из 2018”

Минусы Vite в реальности:

миграции с Webpack часто ломаются на “магии лоадеров” (SVG, raw-импорты, алиасы, define globals)
некоторые плагины/кейсы проще реализованы в Webpack (особенно enterprise-легаси)

Webpack 5 — “legacy-тяжеловес, который ещё всем нужен”

Бери Webpack, если:

огромная кодовая база + нестандартная сборка + куча лоадеров
модульная федерация/микрофронты (часто исторически на Webpack)
нужно тонко контролировать чанкинг/оптимизации/полифиллы

Ключ к скорости Webpack — кэш и дисциплина конфигов. Официальный гайд по performance реально полезен. (webpack)

esbuild — “быстро, но без фанатизма”

Отлично, если:

собираешь библиотеку , CLI-утилиту, простое приложение без наворотов
хочешь быстрый TS/JS билд и нормальный minify
готов жить без “всё поддерживается плагином”

Минус: сложные кейсы (CSS-pipeline, asset graph, тонкий split) — быстрее решаются Vite/Webpack.

Turbopack — “Next.js-дорога, без съездов”

Если проект на Next.js — Turbopack в 2026 уже не эксперимент, а реальный дефолт в новых Next-проектах. (nextjs.org)

Но как “универсальный бандлер для всего подряд” — пока осторожно: он в первую очередь про Next-экосистему.

Миграция с Webpack на Vite: что ломается и как чинить

1) process.env, __dirname, Node-полифиллы

В Webpack часто “само работало”. В Vite по умолчанию — браузерная реальность: никакого Node, если ты это явно не включил.

Было (Webpack):


if (process.env.NODE\_ENV === 'production') {

console.log('Production build');

}

Стало (Vite):


if (import.meta.env.PROD) {

console.log('Production build');

}

// Переменные из .env (префикс VITE\_ обязателен для клиента):

const apiUrl = import.meta.env.VITE\_API\_URL ?? 'https://api.example.com';

Замена __dirname в Vite (нужен путь к файлу в конфиге):


import { fileURLToPath } from 'node:url';

import path from 'node:path';

const \_\_dirname = path.dirname(fileURLToPath(import.meta.url));

// теперь: path.resolve(\_\_dirname, 'src')

2) Алиасы

Vite (vite.config.ts) — алиасы без __dirname через import.meta.url:


import { defineConfig } from 'vite';

import path from 'node:path';

import { fileURLToPath } from 'node:url';

const \_\_dirname = path.dirname(fileURLToPath(import.meta.url));

export default defineConfig({

resolve: {

alias: {

'@': path.resolve(\_\_dirname, 'src'),

'@components': path.resolve(\_\_dirname, 'src/components'),

},

},

});

3) SVG / raw imports / file-loader

В Webpack: file-loader, raw-loader, svgr.

В Vite: чаще через плагины.

Пример для React + SVG как компонент:


npm i -D vite-plugin-svgr

ts

// vite.config.ts

import svgr from 'vite-plugin-svgr';

export default defineConfig({

plugins: [svgr()],

});

4) CSS/SCSS pipeline

В Webpack обычно style-loader + css-loader + postcss-loader + sass-loader.

В Vite многие вещи “просто работают”, но если у тебя кастомный PostCSS — перенеси конфиг в postcss.config.cjs.

5) Define/ProvidePlugin и “глобалы”

Если проект завязан на глобальные константы из Webpack — переноси в define:


export default defineConfig({

define: {

\_\_APP\_VERSION\_\_: JSON.stringify('1.2.3'),

},

});

Использование в коде (React-компонент):


// src/components/AppVersion.tsx

export function AppVersion() {

return (

<span title={import.meta.env.PROD ? 'Production' : 'Development'}>

v{(import.meta as any).env.\_\_APP\_VERSION\_\_ ?? '0.0.0'}

</span>

);

}

Либо через глобальный тип для TypeScript:


// env.d.ts

/// <reference types="vite/client" />

interface ImportMetaEnv {

readonly VITE\_API\_URL: string;

readonly \_\_APP\_VERSION\_\_: string;

}

Готовые конфиги для типовых сценариев

Vite + React (2026)


npm create vite@latest my-app -- --template react-ts

Минимальный vite.config.ts:


import { defineConfig } from 'vite';

import react from '@vitejs/plugin-react';

export default defineConfig({

plugins: [react()],

server: { port: 5173 }

});

Ленивая загрузка (code splitting) — Vite и Rollup автоматически режут чанки по динамическому import():


// src/App.tsx — тяжёлый компонент подгружается только при переходе

import { lazy, Suspense } from 'react';

const HeavyChart = lazy(() => import('./components/HeavyChart'));

export function App() {

return (

<Suspense fallback={<div>Загрузка…</div>}>

<HeavyChart />

</Suspense>

);

}

Vite + Vue


npm create vite@latest my-vue -- --template vue-ts

Vite + vanilla JS


npm create vite@latest my-vanilla -- --template vanilla

Webpack 5 (минимальный скелет под React)

Если нужен Webpack именно как “свой контролируемый пайплайн”:


// webpack.config.js

const path = require('path');

module.exports = {

mode: 'production',

entry: './src/main.tsx',

output: {

path: path.resolve(\_\_dirname, 'dist'),

filename: 'bundle.[contenthash].js',

clean: true

},

resolve: { extensions: ['.ts', '.tsx', '.js'] },

module: {

rules: [

{ test: /\.[tj]sx?$/, exclude: /node\_modules/, use: 'babel-loader' },

{ test: /\.css$/, use: ['style-loader', 'css-loader'] }

]

},

cache: { type: 'filesystem' } // must-have в 2026

};

esbuild (быстрая сборка vanilla/TS)


// build.mjs

import esbuild from 'esbuild';

await esbuild.build({

entryPoints: ['src/index.ts'],

bundle: true,

outdir: 'dist',

minify: true,

sourcemap: true,

target: ['es2020']

});

Запуск:


node build.mjs

Практический вывод тимлида (без философии)

Если у тебя нет железных причин сидеть на Webpack — бери Vite. Это сейчас самый “нормальный по умолчанию” выбор. (Syncfusion)
Если проект — Next.js , то в 2026 разумно смотреть в сторону Turbopack как дефолта экосистемы Next. (nextjs.org)
Если ты пишешь инструменты/библиотеки/простые фронты , и хочешь speedrun — esbuild отличный, но не пытайся сделать из него Webpack (он обидится и уйдёт в Go). (Medium)
Webpack 5 — оставляй там, где он реально нужен: legacy-монстры, кастомные пайплайны, экзотика. И обязательно включай кэш и оптимизации по гайду. (webpack)

Практические сниппеты по теме

На сайте есть готовые сниппеты с конфигами и миграцией:

Vite: production vite.config.ts (2026) — алиасы, build.target, sourcemap, порты dev/preview
Webpack 5: production webpack.config.js (2026) — mode, output с contenthash, filesystem cache, базовая обработка JS/TS
esbuild: сборка библиотеки или утилиты (build.mjs) — entryPoints, bundle, outdir, minify, sourcemap, target; запуск через node build.mjs
Миграция Webpack → Vite: типовые отличия — process.env → import.meta.env, алиасы, DefinePlugin → define, что проверить в первую очередь

Полезные ссылки