Webpack — bu nədir, arxitektura və iş prinsipi

Webpack nədir?

Webpack — tətbiqin asılılıqlarını təhlil edən və onları brauzer və ya server üçün statik fayllara yığan modul bundleridir. 2012-ci ildə Tobias Koppers tərəfindən yaradılan Webpack, bütün fayllar modullardır konsepsiyası sayəsində tez bir zamanda qurulum standartına çevrildi: JavaScript, CSS, şəkillər, şriftlər və hətta HTML vahid loader sistemi vasitəsilə emal olunur.

Nəyə Webpack sənaye standartına çevrildi

Webpack öz dövrü üçün inqilabi bir ideya təklif etdi: loader-lər istənilən resursları import və ya require vasitəsilə qoşmağa imkan verir. Bu, proqramçıları CSS preprosessorları (SCSS), TypeScript kompilyatorları və şəkil optimallaşdırıcıları kimi ayrı alətlərdən istifadə etmək zörurətindən azad etdi. 2020-ci ilə qədər JavaScript layihələrinin 80%-dən çoxu Webpack-dən istifadə edirdi (npm stat: 2019–2024).

Rəqiblər — Vite, Parcel və Turbopack — daha yüksək inkişaf sürəti təklif edir, lakin Webpack sabitliyi, yetkin ekosistemi və geriyə uyğunluğu sayəsində enterprise seqmentində liderliyini qoruyur. Böyük layihələrdə Webpack-dən Vite-yə miqrasiya həftələr çəkir və çox vaxt plugin uyğunsuzluğu səbəbindən bloklanır.

Webpack necə işləyir

Webpack giriş nöqtəsindən başlayaraq asılılıq qrafiki qurur. Tapılan hər import və ya require qrafikə əlavə edilir, loader zəncirindən keçir vɘ chunk-a yerləşdirilir. Yekun nəticə konfiqurasiyadan asılıdır: bir bundl, bir neçə chunk və ya UMD, CommonJS və ya ES Module formatlarında kitabxana çıxışı.

Webpack qurulum prosesi

// Webpack 5-in minimal konfiqurasiyası
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    clean: true,
  },
  module: {
    rules: [
      { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ },
    ],
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, filename: 'vendor.[contenthash:8].js' } },
    },
  },
};

Webpack 5 fayl sisteminə əsaslanan daxili keşi təqdim etdi ki, bu da təkrarlanan qurulumları 2–5 dəfə sürətləndirir. Persistent caching modul transformasiyalarının nəticələrini işə salınmalar arasında saxlayır, bu xüsusilə CI/CD üçün vacibdir. Aktivləşdirmək üçün konfiqurasiyada cache: { type: 'filesystem' } əlavə etmək kifayətdir.

Webpack-in əsas anlayışları

Webpack dörd əsas anlayışla işləyir: Entry (giriş nöqtəsi), Output (çıxış), Loaders (transformasiyalar) və Plugins (genişlənmələr). Bu anlayışları başa düşmək sadə saytdan mürəkkəb enterprise tətbiqinə qədər istənilən qurulumu konfiqurasiya etmək üçün zəruridir.

Entry, Output və rejimlər

Entry — bir və ya bir neçə giriş nöqtəsini təyin edən massiv və ya obyekt. Multi-entry çoxkomponentli tətbiqlərdə istifadə olunur. Output — çıxış fayllarının parametrləri: yol, ad şablonu, publik URL. Mode — development, production və ya none — hər rejim üçün avtomatik olaraq optimal pluginləri və standart dəyərləri aktivləşdirir.

Content Hash — fayl adına məzmun hashi əlavə etmək ([contenthash]) uzunmüddətli keşləməni təmin edir. Brauzer yeni faylı yalnız məzmunu dəyişdikdə yükləyir. SplitChunksPlugin müxtəlif entry-lərdən ümumi asılılıqları avtomatik olaraq ayrı chunk-lara ayırır və kod təkrarlanmasının qarşısını alır.

Loaders və Plugins

Loaders asılılıq qrafikinə əlavə etməzdən əvvəl mənbə fayllarını transformasiya edir. Hər loader faylın məzmununu qəbul edən və JavaScript modulu qaytaran funksiyadır. Plugins — qurulumun bütün həyat dövrünə çıxışı olan daha güclü genişlənmələr: işə salınmadan çıxış fayllarının yaradılmasına qədər.

Məşhur loader-lər və onların təyinatı

Plugins, loader-lərdən fərqli olaraq, qurulumun istənilən mərhələsində hərəkət edə bilər. HtmlWebpackPlugin qoşulmuş skriptlərlə HTML faylı avtomatik yaradır. MiniCssExtractPlugin paralel yükləmə üçün CSS-i ayrı fayllara ayırır. DefinePlugin qurulum zamanı ətraf mühit dəyişənlərini tətbiq koduna ötürməyə imkan verir.

Webpack qurulumunun optimallaşdırılması

Webpack daxili optimallaşdırma mexanizmləri təmin edir: tree shaking, code splitting və sıxışdırma. Tree shaking ES modullarından istifadə olunmayan ixracı silir. Code splitting import() vasitəsilə bundlı dinamik chunk-lara bölür. Minimizer — JS üçün TerserPlugin və CSS üçün CssMinimizerPlugin.

Qabaqcıl optimallaşdırma texnikaları

// webpack.config.js — istehsal qurulumunun optimallaşdırılması
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: { compress: { drop_console: true }, mangle: true },
      }),
      new CssMinimizerPlugin(),
    ],
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      maxAsyncRequests: 30,
    },
  },
};

Module Federation — mikrofrontendlər üçün Webpack 5-in ən güclü funksiyası. O, runtime zamanı digər müstəqil qurulumlardan modulları yükləməyə imkan verir. Hər mikroproqram müstəqil şəkildə hazırlanır və yerləşdirilir, lakin istifadəçi üçün vahid interfeysdə birləşir. Segment Analytics 2021-ci ildən Module Federation-dan istehsalatda istifadə edir və yerləşdirmə vaxtını 80% azaldır.

React Native və web layihələri üçün Webpack

Webpack birbaşa React Native-də nadir hallarda istifadə olunur — bunun üçün Metro var. Bununla belə, Webpack React Native Web layihələrində tətbiq olunur, bu zaman eyni kod bazası mobil platformalar (üçün Metro vasitəsilə) və web (üçün Webpack vasitəsilə) üçün qurulur. Webpack həmçinin Ionic və Cordova üzərində hibrid tətbiqlərdə də məşhurdur.

Cross-platform qurulum üçün Webpack

React Native Web-in web renderinqi üçün istifadə edildiyi layihələrdə, Webpack yerli modulları web tətbiqləri ilə əvəz edən aliaslarla konfiqurasiya olunur. Alias react-native → react-native-web ümumi komponentlərdən importları dəyişmədən istifadə etməyə imkan verir. DefinePlugin platforma-spesifik kodun şərti kompilyasiyası üçün platforma bayrağını ötürür.

Mobil web üçün Webpack optimallaşdırılması desktopdan fərqlənir. Mobile-first qurulum aqressiv minifikasiya, şəkillərin lazy loadingi və kritik CSS-in prioritet yüklənməsini əhatə edir. Brotli sıxışdırması ilə CompressionPlugin 3G/4G mobil şəbəkələri üçün bundl ölçüsünü 20–25% azaldır. Müxtəlif platformalar üçün konfiqurasiyaları ayırmaq üçün webpack-merge istifadə edin: mobile-first və desktop-optimallaşdırılmış qurulum.

Webpack 5 Module Federation: mikrofrontendlər

Module Federation — Webpack 5-in inqilabi funksiyası olub, npm-də nəşr etmədən digər müstəqil qurulumlardan JavaScript modullarını yükləməyə imkan verir. Hər mikroproqram müstəqil şəkildə hazırlanır, öz Webpack konfiqurasiyasına malikdir və ayrıca yerləşdirilir. Host tətbiqi ModuleFederationPlugin plagininin xüsusi konfiqurasiyası vasitəsilə uzaq qurulumlardan modulları qoşur.

Təminatçı exposes seçilmiş modulları açıqlayır, host isə onları qoşmaq üçün remotes istifadə edir. Module Federation paylaşılan kitabxanaları dəstəkləyir: əgər React iki mikroproqramda istifadə olunursa, Webpack onu yalnız bir dəfə yükləyir. Bu, istifadəçi üçün trafikdə 60%-ə qədər qənaət verir. Segment və Best Buy da daxil olmaqla böyük şirkətlər Module Federation-dan istehsalatda istifadə edir, yerləşdirmə vaxtını saatlardan dəqiqələrə endirir.

Tipik problemlər və onların həlli

Module Federation ilə işləyərkən proqramçılar tez-tez müxtəlif versiyaların shared asılılıq konfliktləri ilə qarşılaşırlar. Həll yolu kritik kitabxanalar üçün requiredVersion və singleton: true göstərməkdir. Digər problem — xüsusilə React Context və Redux ilə uzaq qurulumdan komponentlərin idxalı zamanə kontekst itkisi. Bunu həll etmək üçün shared: { react: { singleton: true } } istifadə edin ki, bütün mikroproqramlar React-in eyni nüsxəsini istifadə etsin. Böyük mikrofrontend arxitekturaları üçün ümumi asılılıqların versiyalarını sinxronlaşdırmaq və qurulumların ardıcıllığını təmin etmək üçün Module Federation-ı monorepo sistemi (Nx, Turborepo) ilə birlikdə istifadə etmək tövsiyə olunur.