M
MLOG
ஜாவாஸ்கிரிப்ட் மாட்யூல் வரைபட மேம்படுத்தல்: சார்பு வரைபடத்தை எளிமைப்படுத்துதல் | MLOG | MLOG 
            document.addEventListener("DOMContentLoaded", function() {
 var lazyloadImages = document.querySelectorAll("img.lazy");

 function lazyload () {
 lazyloadImages.forEach(function(img) {
 if (img.offsetTop < (window.innerHeight + window.pageYOffset)) {
 img.src = img.dataset.src;
 img.classList.remove("lazy");
 }
 });
 if(lazyloadImages.length === 0) {
 document.removeEventListener("scroll", lazyload);
 window.removeEventListener("resize", lazyload);
 window.removeEventListener("orientationChange", lazyload);
 }
 }

 document.addEventListener("scroll", lazyload);
 window.addEventListener("resize", lazyload);
 window.addEventListener("orientationChange", lazyload);
 });

செயல்படுத்தக்கூடிய நுண்ணறிவு: திரையில் உடனடியாகத் தெரியாத படங்கள், வீடியோக்கள் மற்றும் பிற வளங்களுக்கு சோம்பேறி ஏற்றுதலைச் செயல்படுத்தவும். `lozad.js` போன்ற நூலகங்களைப் பயன்படுத்துவது அல்லது உலாவி-சொந்த சோம்பேறி ஏற்றுதல் பண்புக்கூறுகளைக் கருத்தில் கொள்ளுங்கள்.

6. ட்ரீ ஷேக்கிங் மற்றும் டெட் கோட் எலிமினேஷன்

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

உதாரணம்:

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

உள்ளமைவு:

உங்கள் பண்ட்லர் ட்ரீ ஷேக்கிங் செய்ய உள்ளமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும். வெப்பேக்கில், இது பொதுவாக உற்பத்தி பயன்முறையைப் பயன்படுத்தும்போது இயல்பாகவே இயக்கப்படும். ரோல்அப்பில், நீங்கள் `@rollup/plugin-commonjs` செருகுநிரலைப் பயன்படுத்த வேண்டியிருக்கலாம்.

செயல்படுத்தக்கூடிய நுண்ணறிவு: ட்ரீ ஷேக்கிங் செய்ய உங்கள் பண்ட்லரை உள்ளமைத்து, உங்கள் குறியீடு ட்ரீ ஷேக்கிங்குடன் இணக்கமாக எழுதப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும் (எ.கா., ES மாட்யூல்களைப் பயன்படுத்தி).

7. சார்புகளைக் குறைத்தல்

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

உதாரணம்:

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

செயல்படுத்தக்கூடிய நுண்ணறிவு: `npm audit` அல்லது `yarn audit` போன்ற கருவிகளைப் பயன்படுத்தி உங்கள் சார்புகளைத் தொடர்ந்து மதிப்பாய்வு செய்து, சார்புகளின் எண்ணிக்கையைக் குறைப்பதற்கான அல்லது சிறிய மாற்றுக்களுடன் மாற்றுவதற்கான வாய்ப்புகளைக் கண்டறியவும்.

8. பண்டில் அளவு மற்றும் செயல்திறனைப் பகுப்பாய்வு செய்தல்

மேம்படுத்துவதற்கான பகுதிகளைக் கண்டறிய உங்கள் பண்டில் அளவு மற்றும் செயல்திறனைத் தொடர்ந்து பகுப்பாய்வு செய்யவும். webpack-bundle-analyzer மற்றும் Lighthouse போன்ற கருவிகள் பெரிய மாட்யூல்கள், பயன்படுத்தப்படாத குறியீடு மற்றும் செயல்திறன் தடைகளைக் கண்டறிய உதவும்.

உதாரணம் (webpack-bundle-analyzer):

உங்கள் வெப்பேக் உள்ளமைவில் `webpack-bundle-analyzer` செருகுநிரலைச் சேர்க்கவும்.

            const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
 // ... other webpack configuration
 plugins: [
 new BundleAnalyzerPlugin()
 ]
};

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

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

9. மாட்யூல் ஃபெடரேஷன்

மாட்யூல் ஃபெடரேஷன், வெப்பேக் 5-இன் ஒரு அம்சம், இயக்க நேரத்தில் வெவ்வேறு பயன்பாடுகளுக்கு இடையில் குறியீட்டைப் பகிர உங்களை அனுமதிக்கிறது. மைக்ரோஃப்ரண்ட்எண்ட்களை உருவாக்குவதற்கோ அல்லது வெவ்வேறு திட்டங்களுக்கு இடையில் பொதுவான கூறுகளைப் பகிர்வதற்கோ இது பயனுள்ளதாக இருக்கும். மாட்யூல் ஃபெடரேஷன் குறியீட்டின் நகலெடுப்பைத் தவிர்ப்பதன் மூலம் பண்டில் அளவுகளைக் குறைக்கவும் செயல்திறனை மேம்படுத்தவும் உதவும்.

உதாரணம் (அடிப்படை மாட்யூல் ஃபெடரேஷன் அமைப்பு):

பயன்பாடு A (ஹோஸ்ட்):

            // webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
 // ... other webpack configuration
 plugins: [
 new ModuleFederationPlugin({
 name: "appA",
 remotes: {
 appB: "appB@http://localhost:3001/remoteEntry.js",
 },
 shared: ["react", "react-dom"]
 })
 ]
};

பயன்பாடு B (ரிமோட்):

            // webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
 // ... other webpack configuration
 plugins: [
 new ModuleFederationPlugin({
 name: "appB",
 exposes: {
 './MyComponent': './src/MyComponent',
 },
 shared: ["react", "react-dom"]
 })
 ]
};

செயல்படுத்தக்கூடிய நுண்ணறிவு: பகிரப்பட்ட குறியீட்டைக் கொண்ட பெரிய பயன்பாடுகளுக்கு அல்லது மைக்ரோஃப்ரண்ட்எண்ட்களை உருவாக்குவதற்கு மாட்யூல் ஃபெடரேஷனைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

குறிப்பிட்ட பண்ட்லர் பரிசீலனைகள்

மாட்யூல் வரைபட மேம்படுத்தலைப் பொறுத்தவரை வெவ்வேறு பண்ட்லர்கள் வெவ்வேறு பலங்களையும் பலவீனங்களையும் கொண்டுள்ளன. பிரபலமான பண்ட்லர்களுக்கான சில குறிப்பிட்ட பரிசீலனைகள் இங்கே:

வெப்பேக் (Webpack)

ரோல்அப் (Rollup)

பார்சல் (Parcel)

உலகளாவிய கண்ணோட்டம்: வெவ்வேறு சூழல்களுக்கு ஏற்ப மேம்படுத்தல்களை மாற்றியமைத்தல்

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

முடிவுரை

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

இந்த நுட்பங்களைத் தொடர்ந்து பயன்படுத்துவதன் மூலம், உலகெங்கிலும் உள்ள டெவலப்பர்கள் வேகமான, திறமையான மற்றும் பயனர் நட்பு வலை பயன்பாடுகளை உருவாக்க முடியும்.