Bundler — ano ito, anu-ano ang mga uri at prinsipyo ng paggana

Ano ang Bundler?

Bundler (module bundler) — isang command-line tool na tumatanggap ng entry point — ang pangunahing file ng app — at recursively na tinatahak ang lahat ng dependency nito, na bumubuo ng graph ng mga module. Sa output, ang bundler ay gumagawa ng isa o higit pang file na maaaring ikonekta sa HTML page o patakbuhin sa mobile app.

Bakit kailangan ang bundler sa modernong development

Ang mga browser ay matagal na hindi sumusuporta ng modular JavaScript system sa antas ng platform. Bundler ay nilutas ang problemang ito sa pamamagitan ng pag-convert ng daan-daang import at require sa iisang file. Ngayon, kahit may native na suporta para sa ES modules sa browser, ang mga bundler ay gumaganap ng karagdagang mga gawain: transpilation ng JSX at TypeScript, minification ng code, code splitting para sa lazy loading, at hot module replacement (HMR) para mapabilis ang development.

Sa mobile app development, ang React Native ay gumagamit ng Metro bilang default na bundler, at ang Flutter ay gumagamit ng sarili nitong build system na batay sa Dart. Ang pagpili ng bundler ay direktang nakakaapekto sa bilis ng development, laki ng app, at runtime performance.

Paano gumagana ang bundling?

Bundling ay dumadaan sa ilang yugto: pag-parse ng input file, pagbuo ng dependency graph, pag-transform ng mga module, at pag-generate ng output file. Sa bawat yugto, ang bundler ay naglalapat ng mga loader para sa transpormasyon ng source code at mga plugin para sa optimization.

Yugto ng pag-parse at dependency graph

Ang bundler ay nagsisimula sa entry point, binabasa ang file at bumubuo ng AST (abstract syntax tree). Mula sa AST ay kinukuha ang lahat ng import at require na pahayag. Para sa bawat import na natagpuan, ang bundler ay umuulit ng proseso nang recursively hanggang ang lahat ng dependency ay nakolekta sa iisang graph.

// Pinadaling implementasyon ng bundler
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)] };
}

Pagkatapos mabuo ang graph, ang bundler ay naglalapat ng loader — mga transpormasyon na nagko-convert ng file sa JavaScript: TypeScript → JS, SCSS → CSS, JSX → JSX functions. Pagkatapos, ang plugin ay nagsasagawa ng karagdagang transpormasyon: minification, inline ng mga imahe, pag-generate ng service worker.

Mga pangunahing uri ng bundler

Mga bundler ay nahahati sa tatlong henerasyon: klasiko, espesyalisado, at bagong henerasyon batay sa ES modules. Ang bawat uri ay may sariling arkitektura at lugar ng aplikasyon.

Klasikong bundler

Webpack — ang pinakalaganap na bundler na may malaking ecosystem. Ang pangunahing bentahe nito ay flexibility: libu-libong loader at plugin ang sumasaklaw sa halos lahat ng build scenario. Parcel ay nag-aalok ng zero-config approach, awtomatikong tinutukoy ang kinakailangang transpormasyon batay sa file extension. Parehong sinusuportahan ng dalawang bundler ang code splitting at HMR.

Espesyalisadong bundler

Metro ay ginawa partikular para sa React Native at gumagana lamang sa JavaScript at TypeScript. Ang arkitektura nito ay na-optimize para sa mobile development: suporta para sa inline requires, asynchronous na pag-load ng module, at integrasyon sa Hermes engine. Rollup ay nakatuon sa mga library at npm package, na gumagawa ng malinis na ES module output nang walang sobrang wrapper.

Paghahambing ng Webpack, Metro at Vite

Ang pagpili ng bundler ay depende sa platform at mga kinakailangan ng proyekto. Webpack ay unibersal, ngunit nangangailangan ng detalyadong configuration. Metro ay walang alternatibo para sa React Native. Vite ay nagbibigay ng pinakamabilis na development salamat sa native na ES modules.

Vite ay gumagamit ng esbuild para sa pre-bundling ng dependencies at Rollup para sa production build, na nagbibigay ng 5–10 beses na pagtaas ng bilis kumpara sa Webpack sa development mode. Metro ay hindi sumusuporta sa web targets, ngunit nagbibigay ng seamless na integrasyon sa React Native bridge at Turbo Modules.

Configuration ng bundler sa proyekto

Configuration ng bundler ay tumutukoy kung paano pinoproseso ang iba't ibang uri ng file, kung saan nabuo ang build, at anong optimization ang inilalapat. Ang tipikal na configuration file ay may kasamang entry point, mga patakaran para sa module, plugin, at mga setting ng output.

Halimbawa ng Webpack configuration para sa React Native web project

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 ay gumagamit ng hiwalay na mga file na metro.config.js at babel.config.js para sa configuration. Hindi tulad ng Webpack, ang configuration ng Metro ay mas simple dahil ang bundler ay espesyalisado para sa React Native at hindi nangangailangan ng configuration ng loader para sa mga estilo o imahe.

Mga karaniwang error sa pag-build

Kahit ang mga bihasang developer ay nakakaranas ng bundling error. Duplicate module — isa sa mga pinakakaraniwang problema, kapag ang parehong dependency ay napunta sa bundle nang maraming beses dahil sa hindi pagkakatugma ng bersyon sa package.json. Module not found ay nangyayari kapag mali ang import path o hindi naka-install ang package.

Mga error na espesipiko sa Metro

Metro ay limitado ng laki ng bundle para sa mobile devices. Kapag lumampas sa limitasyon na 2–5 MB, lumalabas ang error na Unable to resolve module dahil sa kakulangan ng memory sa device. Ang solusyon — gumamit ng inline requires at RAM bundles para sa lazy loading ng modules. Ang Metro ay sensitibo rin sa symlink, kaya para sa monorepositories ay kinakailangan ang karagdagang configuration ng watchFolders sa configuration.

Para sa Webpack, ang tipikal na problema ay Module parse failed, kapag ang file ay may hindi inaasahang format o nawawala ang kinakailangang loader. Pagsusuri ng file extension at pagdagdag ng tamang patakaran sa module.rules ay nalulutas ang problema. Paggamit ng source-map-explorer ay tumutulong na makahanap ng mga duplicate na module at labis na dependency sa final bundle.

Optimization ng configuration para mapabilis ang build

Mabagal na build — isa sa mga pangunahing problema sa pagtatrabaho sa mga bundler. Para mapabilis, gumamit ng persistent caching, na nag-iimbak ng mga resulta ng transpormasyon ng module sa pagitan ng mga run. Webpack 5 ay sumusuporta sa filesystem cache sa pamamagitan ng cache: { type: 'filesystem' }, Vite ay gumagamit ng esbuild para sa pre-bundling, at Metro ay umaasa sa module cache sa RAM. Dagdag pa, itakda ang exclude para sa node_modules sa mga loader upang hindi na muling iproseso ang mga nakahandang package.

Pagpili ng strategy sa code splitting

Code splitting — paghahati ng bundle sa mga bahagi na nilo-load kapag kinakailangan. Iba't ibang bundler ang nagpapatupad ng strategy na ito sa kani-kanilang paraan. Webpack ay sumusuporta sa dynamic import import(), na gumagawa ng hiwalay na mga bahagi para sa bawat module. Metro ay gumagamit ng inline requires para sa delayed loading. Vite ay awtomatikong naghahati ng vendor-chunks at dynamic imports nang walang karagdagang configuration. Ang pagpili ng strategy ay depende sa mga kinakailangan ng proyekto: para sa mobile apps, mas gusto ang mas maliit na initial bundle na may lazy loading.

Para sa tamang paggana ng code splitting sa React Native, kinakailangan ang karagdagang configuration: Metro ay dapat i-configure para sa pagtatrabaho sa asynchronous chunks sa pamamagitan ng inlineRequires. Sa Webpack at Vite, ang code splitting ay gumagana agad kapag ginagamit ang dynamic syntax na import(), na awtomatikong gumagawa ng mga split point. Para sa maximum na efficiency, pagsamahin ang code splitting sa mga preload hint sa pamamagitan ng <link rel="preload"> para sa mga kritikal na chunks.