ஜாவாஸ்கிரிப்ட் மாடியூல் லேசி லோடிங்: உலகளாவிய பயன்பாடுகளுக்கான ஒரு செயல்திறன் உத்தி

இன்றைய வலை மேம்பாட்டுச் சூழலில், வேகமான மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை வழங்குவது மிக முக்கியமானது. உலகெங்கிலும் உள்ள பயனர்கள், தங்கள் புவியியல் இருப்பிடம் அல்லது நெட்வொர்க் இணைப்பு வேகத்தைப் பொருட்படுத்தாமல், வலைத்தளங்கள் மற்றும் பயன்பாடுகள் விரைவாகவும் திறமையாகவும் ஏற்றப்பட வேண்டும் என்று எதிர்பார்க்கிறார்கள். முன்-முனை மேம்பாட்டிற்கான ஒரு பரவலான மொழியான ஜாவாஸ்கிரிப்ட், குறிப்பாக சிக்கலான பயன்பாடுகளில், பக்க ஏற்றுதல் நேரங்களுக்கு கணிசமாக பங்களிக்கிறது. இந்த சிக்கலைத் தணிக்க ஒரு சக்திவாய்ந்த நுட்பம் ஜாவாஸ்கிரிப்ட் மாடியூல் லேசி லோடிங் ஆகும்.

ஜாவாஸ்கிரிப்ட் மாடியூல் லேசி லோடிங் என்றால் என்ன?

மாடியூல் லேசி லோடிங், தேவைக்கேற்ப ஏற்றுதல் என்றும் அழைக்கப்படுகிறது, இது ஜாவாஸ்கிரிப்ட் மாடியூல்கள் ஆரம்ப பக்க ஏற்றத்தின் போது ஒரே நேரத்தில் ஏற்றுவதற்குப் பதிலாக, அவை தேவைப்படும்போது மட்டுமே ஏற்றப்படும் ஒரு உத்தி ஆகும். இந்த அணுகுமுறை ஆரம்ப பதிவிறக்க அளவைக் குறைக்கிறது, இது வேகமான பக்க ஏற்றுதல் நேரங்களுக்கும் மேம்பட்ட உணரப்பட்ட செயல்திறனுக்கும் வழிவகுக்கிறது. எல்லா மாடியூல்களையும் முன்கூட்டியே ஏற்றுவதற்குப் பதிலாக, ஒரு குறிப்பிட்ட அம்சம் அல்லது கூறு தேவைப்படும்போது மட்டுமே உலாவி குறியீட்டைப் பதிவிறக்கி இயக்குகிறது. இது ஒற்றைப் பக்க பயன்பாடுகள் (SPAs) மற்றும் ஏராளமான அம்சங்கள் மற்றும் செயல்பாடுகளைக் கொண்ட பெரிய வலைப் பயன்பாடுகளுக்கு குறிப்பாக நன்மை பயக்கும்.

இதை ஆன்லைனில் உணவு ஆர்டர் செய்வது போல் நினைத்துப் பாருங்கள். நீங்கள் முழு மெனுவையும் ஒரே நேரத்தில் ஆர்டர் செய்ய மாட்டீர்கள், இல்லையா? நீங்கள் விரும்புவதைத் தேர்ந்தெடுப்பீர்கள், அந்த குறிப்பிட்ட பொருட்கள் வழங்கப்படும். லேசி லோடிங் இதேபோல் செயல்படுகிறது – தேவையான குறியீடு மட்டுமே பெறப்பட்டு செயல்படுத்தப்படுகிறது.

மாடியூல் லேசி லோடிங்கை ஏன் செயல்படுத்த வேண்டும்?

மாடியூல் லேசி லோடிங்கை செயல்படுத்துவதன் நன்மைகள் பல மற்றும் பயனர் அனுபவம் மற்றும் ஒட்டுமொத்த பயன்பாட்டு செயல்திறனை நேரடியாக பாதிக்கின்றன:

• குறைக்கப்பட்ட ஆரம்ப பக்க ஏற்றுதல் நேரம்: முக்கியமானவை அல்லாத மாடியூல்களின் ஏற்றத்தை தாமதப்படுத்துவதன் மூலம், ஆரம்ப பக்க ஏற்றுதல் நேரம் கணிசமாகக் குறைக்கப்படுகிறது. பயனர்களைத் தக்கவைத்துக்கொள்வதற்கும் தேடுபொறி தரவரிசைகளை மேம்படுத்துவதற்கும் இது முக்கியமானது. விரைவாக ஏற்றப்படும் ஒரு இணையதளத்தில் பயனர்கள் தங்குவதற்கான வாய்ப்புகள் அதிகம்.
• மேம்படுத்தப்பட்ட உணரப்பட்ட செயல்திறன்: மொத்த பதிவிறக்க அளவு அப்படியே இருந்தாலும், லேசி லோடிங் பயன்பாட்டை வேகமாக உணரச் செய்கிறது. பயனர்கள் முக்கிய செயல்பாடுகள் விரைவாக ஏற்றப்படுவதைப் பார்க்கிறார்கள், இது ஒரு நேர்மறையான அனுபவத்திற்கு வழிவகுக்கிறது.
• குறைக்கப்பட்ட வள நுகர்வு: தேவையான மாடியூல்களை மட்டும் ஏற்றுவதன் மூலம், ஆரம்ப ஏற்றத்தின் போது உலாவி நினைவகம் மற்றும் CPU போன்ற குறைவான வளங்களைப் பயன்படுத்துகிறது. பழைய சாதனங்கள் அல்லது குறைந்த அலைவரிசை உள்ள பயனர்களுக்கு இது குறிப்பாக முக்கியமானது.
• மேம்படுத்தப்பட்ட தற்காலிக சேமிப்புக்கான கோட் ஸ்பிளிட்டிங்: லேசி லோடிங்கில் பெரும்பாலும் கோட் ஸ்பிளிட்டிங் அடங்கும், இது பயன்பாட்டை சிறிய, சுயாதீனமான பண்டல்களாகப் பிரிக்கிறது. இது உலாவிகள் இந்த பண்டல்களை மிகவும் திறம்பட தற்காலிகமாக சேமிக்க அனுமதிக்கிறது. ஒரு மாடியூல் புதுப்பிக்கப்படும்போது, முழுப் பயன்பாட்டையும் விட, தொடர்புடைய பண்டல் மட்டுமே மீண்டும் பதிவிறக்கம் செய்யப்பட வேண்டும்.
• உலகளாவிய பார்வையாளர்களுக்கு சிறந்த பயனர் அனுபவம்: மெதுவான இணைய இணைப்புகள் அல்லது வரையறுக்கப்பட்ட டேட்டா திட்டங்களைக் கொண்ட பயனர்கள் குறைக்கப்பட்ட ஆரம்ப ஏற்றுதல் நேரங்களிலிருந்து கணிசமாகப் பயனடைகிறார்கள். இந்த பயனர்கள் பயன்பாட்டின் முக்கிய செயல்பாடுகளை அதிகப்படியான தாமதமின்றி அணுக முடியும் என்பதை லேசி லோடிங் உறுதி செய்கிறது. குறைந்த அலைவரிசையுடன் கிராமப்புறத்தில் உள்ள ஒரு பயனரைக் கற்பனை செய்து பாருங்கள்; லேசி லோடிங் பயன்படுத்தக்கூடிய பயன்பாட்டிற்கும் பயன்படுத்த முடியாத பயன்பாட்டிற்கும் உள்ள வித்தியாசத்தை ஏற்படுத்தும்.

மாடியூல் லேசி லோடிங்கை செயல்படுத்துவதற்கான நுட்பங்கள்

ஜாவாஸ்கிரிப்ட் பயன்பாடுகளில் மாடியூல் லேசி லோடிங்கை செயல்படுத்த பல நுட்பங்களைப் பயன்படுத்தலாம்:

1. டைனமிக் இம்போர்ட்ஸ் (import())

import() சிண்டாக்ஸ் மாடியூல்களை லேசியாக ஏற்றுவதற்கான மிகவும் நவீன மற்றும் பரிந்துரைக்கப்பட்ட அணுகுமுறையாகும். இது மாடியூல்களை இயக்க நேரத்தில் டைனமிக்காக ஏற்ற அனுமதிக்கிறது. ஸ்டேடிக் இம்போர்ட்ஸ் (import ... from ...) போலல்லாமல், டைனமிக் இம்போர்ட்ஸ் ஒரு ப்ராமிஸைத் திருப்பித் தருகிறது, அது மாடியூல் ஏற்றப்பட்டவுடன் அதன் ஏற்றுமதிகளுடன் தீர்க்கப்படும்.

உதாரணம்:

பயனர் தொடர்புகளைக் கண்காணிக்கும் analytics.js என்ற மாடியூல் உங்களிடம் உள்ளது என்று வைத்துக்கொள்வோம். ஒரு பயனர் ஒரு பட்டனைக் கிளிக் செய்வது போன்ற ஒரு குறிப்பிட்ட செயலைச் செய்யும்போது மட்டுமே இந்த மாடியூலை ஏற்ற நீங்கள் விரும்பலாம்.

asyn