M
MLOG
JavaScript Modullarini Optimallashtirish: Build Asboblarini Integratsiyalashni O'zlashtirish | MLOG | MLOG

Ushbu misolda, MyComponent faqat Suspense komponenti ichida render qilinganda yuklanadi.

5. Modul Federatsiyasi (Module Federation)

Modul federatsiyasi - bu ish vaqtida turli ilovalar o'rtasida kodni almashish imkonini beruvchi ancha ilg'or usul. Bu, ayniqsa, bir nechta jamoalar ilovaning mustaqil qismlarini ishlab chiqadigan va joylashtiradigan mikrofrontend arxitekturalari uchun foydalidir.

Modul Federatsiyasining Afzalliklari:

Webpack Bilan Amalga Oshirish:

Modul federatsiyasi asosan Webpack 5 tomonidan qo'llab-quvvatlanadi. U "host" (mezbon) ilovasini va "remote" (masofaviy) ilovalarni sozlashni o'z ichiga oladi. Host ilovasi ish vaqtida remote ilovalardan modullarni iste'mol qiladi.

Misol (Webpack Konfiguratsiyasi):

Host Ilovasi (webpack.config.js):

            
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'HostApp',
      remotes: {
        RemoteApp: 'RemoteApp@http://localhost:3001/remoteEntry.js',
      },
    }),
  ],
};

Remote Ilovasi (webpack.config.js):

            
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'RemoteApp',
      exposes: {
        './MyComponent': './src/MyComponent.js',
      },
    }),
  ],
};

6. Uchinchi Tomon Kutubxonalarini Optimallashtirish

Uchinchi tomon kutubxonalari zamonaviy veb-dasturlashning ajralmas qismi bo'lib, muhim funksionallikni ta'minlaydi va dasturlash vaqtini tejaydi. Biroq, ular to'plam hajmiga sezilarli hissa qo'shishi va unumdorlikka ta'sir qilishi mumkin. Ulardan foydalanishni qanday optimallashtirish mumkin:

7. Rasmlarni Optimallashtirish

To'g'ridan-to'g'ri JavaScript modullariga bog'liq bo'lmasa-da, rasmlarni optimallashtirish umumiy veb unumdorligi uchun juda muhimdir. Katta, optimallashtirilmagan rasmlar sahifaning yuklanish vaqtiga va foydalanuvchi tajribasiga sezilarli darajada ta'sir qilishi mumkin. Rasmlarni qanday optimallashtirish mumkin:

Amaliy Misollar va Foydalanish Holatlari

Ushbu optimallashtirish usullari real hayotiy stsenariylarda qanday qo'llanilishi mumkinligini ko'rsatish uchun ba'zi amaliy misollar va foydalanish holatlarini ko'rib chiqaylik.

1. Yagona Sahifali Ilova (SPA)

SPA'da dastlabki yuklanish vaqtini qisqartirish uchun kodni bo'lish juda muhim. Ilovani turli yo'nalishlar (routes) yoki komponentlar uchun alohida qismlarga bo'lish orqali siz foydalanuvchilarning faqat dastlabki ko'rinish uchun kerakli kodni yuklab olishlarini ta'minlashingiz mumkin.

2. Elektron Tijorat Veb-sayti

Elektron tijorat veb-sayti uchun rasmlarni optimallashtirish va kechiktirib yuklash sahifaning yuklanish vaqtini va foydalanuvchi tajribasini yaxshilash uchun juda muhimdir. Mahsulot rasmlarini optimallashtiring, responsiv rasmlardan foydalaning va darhol ko'rinmaydigan rasmlarni kechiktirib yuklang.

3. Kutubxona Yaratish

JavaScript kutubxonasini ishlab chiqishda "tree shaking" foydalanuvchilarning o'z ilovalariga faqat kerakli kodni kiritishlarini ta'minlash uchun juda muhimdir. Kutubxonani ES modullari bilan loyihalashtiring va uning "tree-shakeable" ekanligiga ishonch hosil qiling.

Maxsus Build Asboblari Bilan Integratsiya

Modullarni optimallashtirish uchun maxsus konfiguratsiya siz foydalanayotgan build asbobiga qarab farq qiladi. Mana ommabop build asboblari uchun ba'zi misollar:

Webpack

Konfiguratsiya (webpack.config.js):

            
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  mode: 'production', // Optimallashtirish uchun production rejimini yoqish
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    minimizer: [
      new TerserPlugin(), // JavaScript'ni minifikatsiyalash
    ],
    splitChunks: {
      chunks: 'all', // Barcha qismlar uchun kodni bo'lishni yoqish
    },
  },
  plugins: [
    new CompressionPlugin({ // Gzip siqishni yoqish
      algorithm: 'gzip',
      test: /\.(js|css)$/,
    }),
  ],
};

Parcel

Parcel minimal konfiguratsiyani talab qiladi. Shunchaki parcel build buyrug'i yordamida production uchun yig'ing:

            
parcel build src/index.html --dist-dir dist

Parcel avtomatik ravishda "tree shaking", kodni bo'lish, minifikatsiya va siqishni boshqaradi.

Rollup

Konfiguratsiya (rollup.config.js):

            
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm', // "Tree shaking" uchun ES modul formatidan foydalanish
  },
  plugins: [
    terser(), // JavaScript'ni minifikatsiyalash
  ],
};

Modullarni Optimallashtirish bo'yicha Eng Yaxshi Amaliyotlar

Modullarni samarali optimallashtirishni ta'minlash uchun ushbu eng yaxshi amaliyotlarga rioya qiling:

Xulosa

JavaScript modullarini optimallashtirish yuqori unumdorlikka ega veb-ilovalarni yaratishning muhim jihatidir. Modul tizimlari tamoyillarini tushunish, zamonaviy build asboblaridan foydalanish va "tree shaking", kodni bo'lish, minifikatsiya va kechiktirib yuklash kabi optimallashtirish usullarini qo'llash orqali siz loyihalaringizning unumdorligini, saqlanishini va masshtablashuvchanligini sezilarli darajada yaxshilashingiz mumkin. Veb rivojlanishda davom etar ekan, ushbu optimallashtirish strategiyalarini o'zlashtirish ajoyib foydalanuvchi tajribasini taqdim etish uchun muhim bo'ladi.

Loyihangiz uchun to'g'ri build asbobini tanlashni va uning optimallashtirish xususiyatlaridan foydalanish uchun uni to'g'ri sozlashni unutmang. Ilovangiz vaqt o'tishi bilan optimallashtirilgan holda qolishini ta'minlash uchun to'plamlaringizni muntazam tahlil qiling, kodingizni ko'rib chiqing va unumdorlikni sinovdan o'tkazing. Ushbu eng yaxshi amaliyotlarga rioya qilish orqali siz JavaScript modullarining to'liq salohiyatini ochishingiz va global auditoriya uchun tez, samarali va foydalanishga qulay veb-ilovalarni yaratishingiz mumkin.