M
MLOG
ജാവാസ്ക്രിപ്റ്റ് കോഡ് സ്പ്ലിറ്റിംഗ്: ഡൈനാമിക് ലോഡിംഗിനെയും പെർഫോമൻസ് ഒപ്റ്റിമൈസേഷനെയും കുറിച്ചുള്ള ഒരു ആഴത്തിലുള്ള പഠനം | MLOG | MLOG ); }

ഈ സാഹചര്യത്തിൽ, `HeavyModal`-നുള്ള കോഡ് ഉപയോക്താവ് "നിബന്ധനകളും വ്യവസ്ഥകളും കാണിക്കുക" എന്ന ബട്ടൺ ആദ്യമായി ക്ലിക്ക് ചെയ്യുമ്പോൾ മാത്രമേ സെർവറിൽ നിന്ന് അഭ്യർത്ഥിക്കുകയുള്ളൂ.

3. തേർഡ്-പാർട്ടി ലൈബ്രറികൾ വിഭജിക്കൽ (വെണ്ടർ ചങ്കുകൾ)

നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ കോഡ് പലപ്പോഴും `node_modules`-ൽ നിന്നുള്ള തേർഡ്-പാർട്ടി ലൈബ്രറികളെ ആശ്രയിച്ചിരിക്കുന്നു (ഉദാഹരണത്തിന്, റിയാക്റ്റ്, ലൊഡാഷ്, D3.js, Moment.js). ഈ ലൈബ്രറികൾ നിങ്ങളുടെ സ്വന്തം ആപ്ലിക്കേഷൻ കോഡിനേക്കാൾ വളരെ കുറച്ച് മാത്രമേ മാറാറുള്ളൂ. അവയെ ഒരു പ്രത്യേക "വെണ്ടർ" ചങ്കായി വിഭജിക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് ദീർഘകാല ബ്രൗസർ കാഷിംഗിൻ്റെ പ്രയോജനം നേടാനാകും.

നിങ്ങളുടെ ആപ്ലിക്കേഷൻ കോഡിൽ ഒരു മാറ്റം വരുത്തുമ്പോൾ, ഉപയോക്താവിന് മാറ്റം വരുത്തിയ ചെറിയ ആപ്പ് ചങ്ക് മാത്രം ഡൗൺലോഡ് ചെയ്താൽ മതി. വളരെ വലിയ വെണ്ടർ ചങ്ക് ബ്രൗസറിൻ്റെ കാഷെയിൽ നിന്ന് നേരിട്ട് നൽകാൻ കഴിയും, ഇത് മിന്നൽ വേഗത്തിലുള്ള തുടർന്നുള്ള പേജ് ലോഡുകളിലേക്ക് നയിക്കുന്നു.

വെബ്പാക്ക് (അതിൻ്റെ `SplitChunksPlugin` ഉപയോഗിച്ച്), വൈറ്റ് തുടങ്ങിയ ആധുനിക ബണ്ട്ലറുകൾ ഇക്കാര്യത്തിൽ അവിശ്വസനീയമാംവിധം മികച്ചതാണ്. മൊഡ്യൂൾ ഉപയോഗവും വലുപ്പവും അടിസ്ഥാനമാക്കി അവയ്ക്ക് പലപ്പോഴും വെണ്ടർ ചങ്കുകൾ സ്വയമേവ സൃഷ്ടിക്കാൻ കഴിയും, ഇതിന് കുറഞ്ഞ കോൺഫിഗറേഷൻ മാത്രമേ ആവശ്യമുള്ളൂ.

വെബ്പാക്ക് `splitChunks` കോൺഫിഗറേഷൻ ഉദാഹരണം:


// webpack.config.js
module.exports = {
  // ... മറ്റ് കോൺഫിഗറേഷനുകൾ
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[/]node_modules[/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

പെർഫോമൻസ് ഒപ്റ്റിമൈസേഷൻ്റെ പ്രയോജനം: സ്വാധീനം അളക്കൽ

കോഡ് സ്പ്ലിറ്റിംഗ് നടപ്പിലാക്കുന്നത് ഒരു സൈദ്ധാന്തിക വ്യായാമം മാത്രമല്ല; ഇത് ഉപയോക്തൃ അനുഭവവും നിങ്ങളുടെ കോർ വെബ് വൈറ്റൽസും നേരിട്ട് മെച്ചപ്പെടുത്തുന്ന, വ്യക്തവും അളക്കാവുന്നതുമായ പ്രകടന നേട്ടങ്ങൾ നൽകുന്നു.

അഡ്വാൻസ്ഡ് ടെക്നിക്കുകളും മികച്ച രീതികളും

നിങ്ങൾ അടിസ്ഥാനകാര്യങ്ങൾ പഠിച്ചുകഴിഞ്ഞാൽ, കൂടുതൽ നൂതനമായ ടെക്നിക്കുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ ലോഡിംഗ് തന്ത്രം കൂടുതൽ മെച്ചപ്പെടുത്താം.

പ്രിഫെച്ചിംഗും പ്രീലോഡിംഗും

ഡൈനാമിക് ലോഡിംഗ് മികച്ചതാണ്, പക്ഷേ ഉപയോക്താവ് പ്രവർത്തനം ട്രിഗർ ചെയ്യുമ്പോൾ ഇത് ഒരു ചെറിയ കാലതാമസം ഉണ്ടാക്കുന്നു, കാരണം ബ്രൗസർ പുതിയ ചങ്ക് ലഭ്യമാക്കണം. റിസോഴ്സ് ഹിൻ്റുകൾ ഉപയോഗിച്ച് നമുക്ക് ഇത് ലഘൂകരിക്കാം:

വെബ്പാക്ക് പോലുള്ള ബണ്ട്ലറുകൾ "മാജിക് കമൻ്റുകൾ" ഉപയോഗിച്ച് ഇത് എളുപ്പത്തിൽ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു:


// ഈ മൊഡ്യൂൾ വിലയിരുത്തുമ്പോൾ ഡാഷ്‌ബോർഡ് കോഡ് പ്രിഫെച്ച് ചെയ്യുക
const DashboardPage = lazy(() => 
  import(/* webpackPrefetch: true */ './pages/DashboardPage')
);

ബണ്ടിൽ അനലൈസറുകൾ ഉപയോഗിച്ച് സ്പ്ലിറ്റ് പോയിന്റുകൾ കണ്ടെത്തൽ

എന്താണ് സ്പ്ലിറ്റ് ചെയ്യേണ്ടതെന്ന് നിങ്ങൾ എങ്ങനെ അറിയും? ഊഹിക്കരുത്—വിശകലനം ചെയ്യുക! `webpack-bundle-analyzer` അല്ലെങ്കിൽ `source-map-explorer` പോലുള്ള ടൂളുകൾ നിങ്ങളുടെ ബണ്ടിലുകളുടെ ഒരു ഇൻ്ററാക്ടീവ് ട്രീമാപ്പ് വിഷ്വലൈസേഷൻ ഉണ്ടാക്കുന്നു. ഇത് വിഭജിക്കുന്നതിന് ഏറ്റവും അനുയോജ്യമായ ഏറ്റവും വലിയ മൊഡ്യൂളുകളും ലൈബ്രറികളും ഉടനടി തിരിച്ചറിയാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

നെറ്റ്‌വർക്ക് വാട്ടർഫാളുകൾ ഒഴിവാക്കുക

ഒരു ചങ്ക് ലോഡ് ചെയ്തതിനു ശേഷം മാത്രം അടുത്തതിൻ്റെ ലോഡിംഗ് ട്രിഗർ ചെയ്യുന്ന ഡൈനാമിക് ഇമ്പോർട്ടുകളുടെ ശൃംഖലകൾ ഉണ്ടാക്കുന്നത് ശ്രദ്ധിക്കുക. സാധ്യമാകുമ്പോഴെല്ലാം, മൊത്തം ലോഡ് സമയം കുറയ്ക്കുന്നതിന് ആവശ്യമായ ഒന്നിലധികം ചങ്കുകളുടെ ലോഡിംഗ് സമാന്തരമായി ട്രിഗർ ചെയ്യുക.

ഉപസംഹാരം: കോഡ് സ്പ്ലിറ്റിംഗ് ഒത്തുതീർപ്പില്ലാത്ത ഒന്നാണ്

മികച്ച വെബ് പ്രകടനത്തിനായുള്ള അന്വേഷണത്തിൽ, കോഡ് സ്പ്ലിറ്റിംഗ് ഒരു ചെറിയ ഒപ്റ്റിമൈസേഷനിൽ നിന്ന്, നിസ്സാരമല്ലാത്ത ഏതൊരു വെബ് ആപ്ലിക്കേഷനും ഒരു സാധാരണവും അത്യാവശ്യവുമായ പരിശീലനമായി മാറിയിരിക്കുന്നു. മോണോലിത്തിക്കിൽ നിന്ന് ആവശ്യാനുസരണം ലോഡിംഗ് തന്ത്രത്തിലേക്ക് മാറുന്നതിലൂടെ, നിങ്ങളുടെ ഉപയോക്താവിൻ്റെ സമയത്തെയും ഡാറ്റയെയും ഉപകരണ വിഭവങ്ങളെയും നിങ്ങൾ ബഹുമാനിക്കുന്നു.

പ്രയോജനങ്ങൾ വ്യക്തവും ആകർഷകവുമാണ്:

ആധുനിക ടൂളിംഗും ഫ്രെയിംവർക്ക് പിന്തുണയും ഉപയോഗിച്ച്, റൂട്ട്-ബേസ്ഡ്, കമ്പോണൻ്റ്-ബേസ്ഡ് സ്പ്ലിറ്റിംഗ് നടപ്പിലാക്കുന്നത് എന്നത്തേക്കാളും എളുപ്പമായിരിക്കുന്നു. പ്രവർത്തിക്കാനുള്ള സമയം ഇപ്പോഴാണ്. നിങ്ങളുടെ ബണ്ടിൽ വിശകലനം ചെയ്യുക, നിങ്ങളുടെ ഏറ്റവും വലിയ ഡിപൻഡൻസികളും ഏറ്റവും കുറഞ്ഞ ഉപയോഗിക്കുന്ന റൂട്ടുകളും തിരിച്ചറിയുക, നിങ്ങളുടെ ആദ്യത്തെ സ്പ്ലിറ്റ് പോയിൻ്റ് നടപ്പിലാക്കുക. നിങ്ങളുടെ ഉപയോക്താക്കളും—നിങ്ങളുടെ പ്രകടന അളവുകളും—അതിന് നിങ്ങളോട് നന്ദി പറയും.