Bundler — шта је то, које врсте постоје и принцип рада

Шта је Bundler?

Bundler (сакупљач модула) — алатка командне линије која на улазу прима улазну тачку (entry point) — главни фајл апликације — и рекурзивно прегледа све њене зависности, градећи граф модула. На излазу бандлер генерише један или неколико фајлова који се могу повезати у HTML страницу или покренути у мобилној апликацији.

Зашто је потребан бандлер у савременом развоју

Прегледачи дуго нису подржавали модуларни систем JavaScript на нивоу платформе. Bundler је решавао овај проблем, претварајући стотине import и require у један фајл. Данас, чак и са изворном подршком ES модула у прегледачима, бандлери обављају додатне задатке: транспилација JSX и TypeScript, минификација кода, code splitting за лењо учитавање и hot module replacement (HMR) за убрзање развоја.

У развоју мобилних апликација React Native користи Metro као подразумевани бандлер, а Flutter — сопствени систем изградње заснован на Dart-у. Избор бандлера директно утиче на брзину развоја, величину апликације и перформансе runtime-a.

Како ради бандловање?

Бандловање пролази кроз неколико фаза: парсирање улазних фајлова, грађење графа зависности, трансформација модула и генерисање излазних фајлова. У свакој фази бандлер примењује лоадере за трансформацију изворног кода и плагине за оптимизацију.

Фаза парсирања и граф зависности

Бандлер почиње од улазне тачке, чита фајл и гради AST (апстрактно синтаксно стабло). Из AST-а се извлаче све инструкције import и require. За сваки пронађени import бандлер понавља процес рекурзивно, док све зависности не буду прикупљене у јединствени граф.

// Поједностављена имплементација бандлера
const fs = require('fs');
const path = require('path');

function buildGraph(entry) {
  const content = fs.readFileSync(entry, 'utf-8');
  const imports = content.match(/require\(['"](.+?)['"]\)/g);
  const modulePath = path.resolve(path.dirname(entry), imports[0]);
  return { entry, content, deps: [buildGraph(modulePath)] };
}

Након грађења графа, бандлер примењује лоадере — трансформације које конвертују фајлове у JavaScript: TypeScript → JS, SCSS → CSS, JSX → JSX функције. Затим плагини обављају додатне трансформације: минификација, уметање слика, генерисање service worker-a.

Главне врсте бандлера

Бандлери се дијеле на три генерације: класични, специјализовани и нове генерације засновани на ES модулима. Свака врста има сопствену архитектуру и област примјене.

Класични бандлери

Webpack — најраспрострањенији бандлер са огромним екосистемом. Његова главна предност је флексибилност: хиљаде лоадера и плагина покривају практично сваки сценариј изградње. Parcel нуди zero-config приступ, аутоматски одређујући потребне трансформације на основу екстензија фајлова. Оба бандлера подржавају code splitting и HMR.

Специјализовани бандлери

Metro је створен специјално за React Native и ради само са JavaScript и TypeScript. Његова архитектура је оптимизована за мобилни развој: подршка за inline requires, асинхроно учитавање модула и интеграција са Hermes engine-ом. Rollup је оријентисан на библиотеке и npm пакете, генеришући чист ES модуларни излаз без додатног омота.

Поређење Webpack, Metro и Vite

Избор бандлера зависи од платформе и захтјева пројекта. Webpack је универзалан, али захтијева детаљно подешавање. Metro је незамјењив за React Native. Vite обезбјеђује најбржи развој захваљујући изворним ES модулима.

Vite користи esbuild за претходно бандловање зависности и Rollup за продукцијску изградњу, што даје повећање брзине од 5–10 пута у поређењу са Webpack-ом у режиму развоја. Metro не подржава веб циљеве, али обезбјеђује беспрекорну интеграцију са React Native bridge и Turbo Modules.

Подешавање бандлера у пројекту

Конфигурација бандлера одређује како се обрађују различите врсте фајлова, гдје се генерише изградња и које оптимизације се примјењују. Типичан конфигурациони фајл укључује улазну тачку, правила за модуле, плагине и подешавања излаза.

Примјер конфигурације Webpack за React Native веб пројекат

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } },
      },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
  devServer: { port: 3000, hot: true },
};

Metro користи одвојене фајлове metro.config.js и babel.config.js за подешавање. За разлику од Webpack-а, конфигурација Metro је знатно једноставнија, јер је бандлер специјализован за React Native и не захтијева подешавање лоадера за стилове или слике.

Типичне грешке при изградњи

Чак и искусни програмери наилазе на грешке бандловања. Duplicate module — један од најчешћих проблема, када иста зависност доспјева у бандл неколико пута због некомпатибилности верзија у package.json. Module not found настаје када је путања импорта нетачна или пакет није инсталиран.

Грешке специфичне за Metro

Metro је ограничен величинама бандла за мобилне уређаје. При прекорачењу границе од 2–5 MB, јавља се грешка Unable to resolve module због недостатка меморије на уређају. Рјешење — користите inline requires и RAM packages за лењо учитавање модула. Metro је такође осјетљив на симлинкове, због чега је за монорепозиторијуме потребно додатно подешавање watchFolders у конфигурацији.

За Webpack типичан проблем је Module parse failed, када фајл има неочекивани формат или недостаје потребан лоадер. Провјера екстензије фајла и додавање одговарајућег правила у module.rules рјешава проблем. Коришћење source-map-explorer помаже да се пронађу дуплирани модули и сувишне зависности у коначном бандлу.

Оптимизација конфигурације за убрзање изградње

Споро изграђивање — један од главних проблема при раду са бандлерима. За убрзање користите persistent caching, који чува резултате трансформације модула између покретања. Webpack 5 подржава кеш датотечног система преко cache: { type: 'filesystem' }, Vite користи esbuild за претходно бандловање, а Metro се ослања на модуларни кеш у RAM-у. Додатно поставите exclude за node_modules у лоадерима да не бисте поново обрађивали већ готове пакете.

Избор стратегије раздвајања кода

Code splitting — раздвајање бандла на дијелове који се учитавају по потреби. Различити бандлери имплементирају ову стратегију на свој начин. Webpack подржава динамички import import(), који ствара одвојене дијелове за сваки модул. Metro користи inline requires за одложено учитавање. Vite аутоматски раздваја vendor-дијелове и динамичке импорте без додатне конфигурације. Избор стратегије зависи од захтјева пројекта: за мобилне апликације пожељнији су мањи почетни бандлови са лењим учитавањем.

За исправан рад code splitting у React Native потребно је додатно подешавање: Metro мора бити конфигурисан за рад са асинхроним дијеловима преко inlineRequires. У Webpack и Vite code splitting ради одмах при коришћењу динамичке синтаксе import(), која аутоматски ствара тачке раздвајања. За максималну ефикасност комбинујте code splitting са preload савјетима преко <link rel="preload"> за критичне дијелове.