Next.js ಮೆಮೊರಿ ನಿರ್ವಹಣೆ: ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯ ಆಪ್ಟಿಮೈಸೇಶನ್

Next.js ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಸ್ಕೇಲೆಬಲ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಂದು ಪ್ರಮುಖ ಫ್ರೇಮ್‌ವರ್ಕ್ ಆಗಿದೆ. ಇದರ ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (SSR) ಮತ್ತು ಸ್ಟ್ಯಾಟಿಕ್ ಸೈಟ್ ಜನರೇಷನ್ (SSG) ನಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳು ಗಮನಾರ್ಹ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತವೆ. ಆದಾಗ್ಯೂ, ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಸಂಕೀರ್ಣತೆಯಲ್ಲಿ ಬೆಳೆದಂತೆ, ವಿಶೇಷವಾಗಿ ವೈವಿಧ್ಯಮಯ ಡೇಟಾ ಸೆಟ್‌ಗಳು ಮತ್ತು ಸ್ಥಳೀಕರಣದ ಅವಶ್ಯಕತೆಗಳೊಂದಿಗೆ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರನ್ನು ಗುರಿಯಾಗಿಸಿಕೊಂಡಾಗ, ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯ ಸಮಯದಲ್ಲಿ ಮೆಮೊರಿಯನ್ನು ನಿರ್ವಹಿಸುವುದು ನಿರ್ಣಾಯಕವಾಗುತ್ತದೆ. ಅಸಮರ್ಥ ಮೆಮೊರಿ ಬಳಕೆಯು ನಿಧಾನವಾದ ಬಿಲ್ಡ್‌ಗಳು, ಡಿಪ್ಲಾಯ್‌ಮೆಂಟ್ ವೈಫಲ್ಯಗಳು, ಮತ್ತು ಅಂತಿಮವಾಗಿ, ಕಳಪೆ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ಜಾಗತಿಕ ಬಳಕೆದಾರರಿಗೆ ಸೇವೆ ಸಲ್ಲಿಸುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಸುಗಮ ಡಿಪ್ಲಾಯ್‌ಮೆಂಟ್‌ಗಳು ಮತ್ತು ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ವರ್ಧಿತ ಮೆಮೊರಿ ದಕ್ಷತೆಗಾಗಿ Next.js ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ವಿವಿಧ ತಂತ್ರಗಳು ಮತ್ತು ವಿಧಾನಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ.

Next.js ಬಿಲ್ಡ್‌ಗಳಲ್ಲಿ ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳಿಗೆ ಧುಮುಕುವ ಮೊದಲು, Next.js ಬಿಲ್ಡ್ ಸಮಯದಲ್ಲಿ ಮೆಮೊರಿ ಎಲ್ಲಿ ಬಳಕೆಯಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಅತ್ಯಗತ್ಯ. ಪ್ರಮುಖ ಕೊಡುಗೆದಾರರು ಇವುಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತಾರೆ:

• ವೆಬ್‌ಪ್ಯಾಕ್: Next.js ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, CSS, ಮತ್ತು ಇತರ ಅಸೆಟ್‌ಗಳನ್ನು ಬಂಡಲ್ ಮಾಡಲು ವೆಬ್‌ಪ್ಯಾಕ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. ವೆಬ್‌ಪ್ಯಾಕ್‌ನ ಡಿಪೆಂಡೆನ್ಸಿ ಗ್ರಾಫ್ ವಿಶ್ಲೇಷಣೆ ಮತ್ತು ರೂಪಾಂತರ ಪ್ರಕ್ರಿಯೆಗಳು ಹೆಚ್ಚು ಮೆಮೊರಿಯನ್ನು ಬಳಸುತ್ತವೆ.
• ಬಾಬೆಲ್: ಬಾಬೆಲ್ ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡನ್ನು ಬ್ರೌಸರ್-ಹೊಂದಾಣಿಕೆಯ ಆವೃತ್ತಿಗಳಾಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ. ಈ ಪ್ರಕ್ರಿಯೆಗೆ ಕೋಡ್ ಅನ್ನು ಪಾರ್ಸಿಂಗ್ ಮತ್ತು ಮ್ಯಾನಿಪುಲೇಟ್ ಮಾಡುವುದು ಅಗತ್ಯವಿರುತ್ತದೆ, ಇದು ಮೆಮೊರಿಯನ್ನು ಬಳಸುತ್ತದೆ.
• ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್: ವಿಭಿನ್ನ ಸಾಧನಗಳು ಮತ್ತು ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಿಗಾಗಿ ಇಮೇಜ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ಒಂದು ಪ್ರಮುಖ ಮೆಮೊರಿ ಡ್ರೈನ್ ಆಗಬಹುದು, ವಿಶೇಷವಾಗಿ ದೊಡ್ಡ ಇಮೇಜ್ ಅಸೆಟ್‌ಗಳು ಮತ್ತು ಹಲವಾರು ಲೊಕೇಲ್‌ಗಳಿಗೆ.
• ಡೇಟಾ ಫೆಚಿಂಗ್: SSR ಮತ್ತು SSG ಸಾಮಾನ್ಯವಾಗಿ ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯ ಸಮಯದಲ್ಲಿ ಡೇಟಾ ಫೆಚಿಂಗ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ದೊಡ್ಡ ಡೇಟಾಸೆಟ್‌ಗಳು ಅಥವಾ ಸಂಕೀರ್ಣ ಡೇಟಾ ರೂಪಾಂತರಗಳು ಹೆಚ್ಚಿದ ಮೆಮೊರಿ ಬಳಕೆಗೆ ಕಾರಣವಾಗಬಹುದು.
• ಸ್ಟ್ಯಾಟಿಕ್ ಸೈಟ್ ಜನರೇಷನ್: ಪ್ರತಿ ರೂಟ್‌ಗೆ ಸ್ಟ್ಯಾಟಿಕ್ HTML ಪುಟಗಳನ್ನು ರಚಿಸುವುದಕ್ಕೆ ಉತ್ಪತ್ತಿಯಾದ ವಿಷಯವನ್ನು ಮೆಮೊರಿಯಲ್ಲಿ ಸಂಗ್ರಹಿಸಬೇಕಾಗುತ್ತದೆ. ದೊಡ್ಡ ಸೈಟ್‌ಗಳಿಗೆ, ಇದು ಗಣನೀಯ ಪ್ರಮಾಣದ ಮೆಮೊರಿಯನ್ನು ಬಳಸಬಹುದು.
• ಸ್ಥಳೀಕರಣ (i18n): ಬಹು ಲೊಕೇಲ್‌ಗಳು ಮತ್ತು ಅನುವಾದಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಮೆಮೊರಿ ಫುಟ್‌ಪ್ರಿಂಟ್‌ಗೆ ಸೇರಿಸುತ್ತದೆ ಏಕೆಂದರೆ ಪ್ರತಿಯೊಂದು ಲೊಕೇಲ್‌ಗೆ ಪ್ರೊಸೆಸಿಂಗ್ ಮತ್ತು ಸಂಗ್ರಹಣೆ ಅಗತ್ಯವಿರುತ್ತದೆ. ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ, ಇದು ಒಂದು ಪ್ರಮುಖ ಅಂಶವಾಗಬಹುದು.

ಮೆಮೊರಿ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸುವುದು

ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವ ಮೊದಲ ಹೆಜ್ಜೆ ಎಂದರೆ ಅಡಚಣೆಗಳು ಎಲ್ಲಿವೆ ಎಂಬುದನ್ನು ಗುರುತಿಸುವುದು. ಸುಧಾರಣೆಗಾಗಿ ಪ್ರದೇಶಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುವ ಕೆಲವು ವಿಧಾನಗಳು ಇಲ್ಲಿವೆ:

1. Node.js ಇನ್ಸ್ಪೆಕ್ಟರ್

Node.js ಇನ್ಸ್ಪೆಕ್ಟರ್ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯ ಸಮಯದಲ್ಲಿ ಹೀಪ್ ಸ್ನ್ಯಾಪ್‌ಶಾಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಮತ್ತು ಮೆಮೊರಿ ಹಂಚಿಕೆ ಮಾದರಿಗಳನ್ನು ವಿಶ್ಲೇಷಿಸಲು ನೀವು ಇದನ್ನು ಬಳಸಬಹುದು.

ಉದಾಹರಣೆ:

            node --inspect node_modules/.bin/next build
            

              
                Copy
              
            
          

ಈ ಕಮಾಂಡ್ Node.js ಇನ್ಸ್ಪೆಕ್ಟರ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ Next.js ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ನಂತರ ನೀವು Chrome DevTools ಅಥವಾ ಇತರ ಹೊಂದಾಣಿಕೆಯ ಟೂಲ್‌ಗಳನ್ನು ಬಳಸಿ ಇನ್ಸ್ಪೆಕ್ಟರ್‌ಗೆ ಸಂಪರ್ಕಿಸಬಹುದು.

2. `memory-stats` ಪ್ಯಾಕೇಜ್

`memory-stats` ಪ್ಯಾಕೇಜ್ ಬಿಲ್ಡ್ ಸಮಯದಲ್ಲಿ ನೈಜ-ಸಮಯದ ಮೆಮೊರಿ ಬಳಕೆಯ ಅಂಕಿಅಂಶಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಮೆಮೊರಿ ಲೀಕ್‌ಗಳು ಅಥವಾ ಅನಿರೀಕ್ಷಿತ ಮೆಮೊರಿ ಸ್ಪೈಕ್‌ಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಇನ್‌ಸ್ಟಾಲೇಷನ್:

            npm install memory-stats
            

              
                Copy
              
            
          

ಬಳಕೆ:

            const memoryStats = require('memory-stats');

setInterval(() => {
  console.log(memoryStats());
}, 1000);
            

              
                Copy
              
            
          

ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಈ ಕೋಡ್ ತುಣುಕನ್ನು ನಿಮ್ಮ Next.js ಬಿಲ್ಡ್ ಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಸೇರಿಸಿ. ಪ್ರೊಡಕ್ಷನ್ ಪರಿಸರದಲ್ಲಿ ಇದನ್ನು ತೆಗೆದುಹಾಕಲು ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಮರೆಯದಿರಿ.

3. ಬಿಲ್ಡ್ ಟೈಮ್ ವಿಶ್ಲೇಷಣೆ

ಬಿಲ್ಡ್ ಸಮಯವನ್ನು ವಿಶ್ಲೇಷಿಸುವುದು ಪರೋಕ್ಷವಾಗಿ ಮೆಮೊರಿ ಸಮಸ್ಯೆಗಳನ್ನು ಸೂಚಿಸಬಹುದು. ಕೋಡ್ ಬದಲಾವಣೆಗಳಿಲ್ಲದೆ ಬಿಲ್ಡ್ ಸಮಯದಲ್ಲಿ ಹಠಾತ್ ಹೆಚ್ಚಳವು ಮೆಮೊರಿ ಅಡಚಣೆಯನ್ನು ಸೂಚಿಸಬಹುದು.

4. CI/CD ಪೈಪ್‌ಲೈನ್‌ಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದು

ನಿಮ್ಮ CI/CD ಪೈಪ್‌ಲೈನ್‌ಗಳ ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ನಿಕಟವಾಗಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ. ಮೆಮೊರಿ ಕೊರತೆಯ ದೋಷಗಳಿಂದಾಗಿ ಬಿಲ್ಡ್‌ಗಳು ಸತತವಾಗಿ ವಿಫಲವಾದರೆ, ಮೆಮೊರಿ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅಗತ್ಯವಿದೆ ಎಂಬುದಕ್ಕೆ ಇದು ಸ್ಪಷ್ಟ ಸಂಕೇತವಾಗಿದೆ. ಅನೇಕ CI/CD ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳು ಮೆಮೊರಿ ಬಳಕೆಯ ಮೆಟ್ರಿಕ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ.

ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳು

ನೀವು ಮೆಮೊರಿ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಿದ ನಂತರ, Next.js ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯ ಸಮಯದಲ್ಲಿ ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ನೀವು ವಿವಿಧ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಅನ್ವಯಿಸಬಹುದು.

1. ವೆಬ್‌ಪ್ಯಾಕ್ ಆಪ್ಟಿಮೈಸೇಶನ್

a. ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್

ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಕೋಡನ್ನು ಸಣ್ಣ ತುಂಡುಗಳಾಗಿ ವಿಭಜಿಸುತ್ತದೆ, ಇವುಗಳನ್ನು ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ಲೋಡ್ ಮಾಡಬಹುದು. ಇದು ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯ ಮತ್ತು ಮೆಮೊರಿ ಫುಟ್‌ಪ್ರಿಂಟ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. Next.js ಪುಟಗಳಿಗಾಗಿ ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ, ಆದರೆ ನೀವು ಡೈನಾಮಿಕ್ ಇಂಪೋರ್ಟ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅದನ್ನು ಇನ್ನಷ್ಟು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಬಹುದು.

ಉದಾಹರಣೆ:

            import dynamic from 'next/dynamic';

const MyComponent = dynamic(() => import('../components/MyComponent'));

function MyPage() {
  return (
    

      
    
  );
}

export default MyPage;
            

              
                Copy
              
            
          

ಈ ಕೋಡ್ ತುಣುಕು `MyComponent` ಅನ್ನು ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ ಲೋಡ್ ಮಾಡಲು `next/dynamic` ಇಂಪೋರ್ಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. ಇದು ಕಾಂಪೊನೆಂಟ್‌ನ ಕೋಡ್ ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಲೋಡ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಆರಂಭಿಕ ಮೆಮೊರಿ ಫುಟ್‌ಪ್ರಿಂಟ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.

b. ಟ್ರೀ ಶೇಕಿಂಗ್

ಟ್ರೀ ಶೇಕಿಂಗ್ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಬಂಡಲ್‌ಗಳಿಂದ ಬಳಕೆಯಾಗದ ಕೋಡ್ ಅನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. ಇದು ಒಟ್ಟಾರೆ ಬಂಡಲ್ ಗಾತ್ರ ಮತ್ತು ಮೆಮೊರಿ ಫುಟ್‌ಪ್ರಿಂಟ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಟ್ರೀ ಶೇಕಿಂಗ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ನೀವು ES ಮಾಡ್ಯೂಲ್‌ಗಳು ಮತ್ತು ಹೊಂದಾಣಿಕೆಯ ಬಂಡ್ಲರ್ (ವೆಬ್‌ಪ್ಯಾಕ್‌ನಂತಹ) ಅನ್ನು ಬಳಸುತ್ತಿರುವಿರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಉದಾಹರಣೆ:

ಹಲವಾರು ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಯುಟಿಲಿಟಿ ಲೈಬ್ರರಿಯನ್ನು ಪರಿಗಣಿಸಿ, ಆದರೆ ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ಒಂದನ್ನು ಮಾತ್ರ ಬಳಸುತ್ತದೆ:

            // utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

            

              
                Copy
              
            
          

            // MyComponent.js
import { add } from './utils';

function MyComponent() {
  return 
{add(2, 3)}
;
}

export default MyComponent;
            

              
                Copy
              
            
          

ಟ್ರೀ ಶೇಕಿಂಗ್‌ನೊಂದಿಗೆ, ಕೇವಲ `add` ಫಂಕ್ಷನ್ ಮಾತ್ರ ಅಂತಿಮ ಬಂಡಲ್‌ನಲ್ಲಿ ಸೇರಿಸಲ್ಪಡುತ್ತದೆ, ಇದು ಬಂಡಲ್ ಗಾತ್ರ ಮತ್ತು ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.

c. ವೆಬ್‌ಪ್ಯಾಕ್ ಪ್ಲಗಿನ್‌ಗಳು

ಹಲವಾರು ವೆಬ್‌ಪ್ಯಾಕ್ ಪ್ಲಗಿನ್‌ಗಳು ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡಬಹುದು:

• `webpack-bundle-analyzer`: ನಿಮ್ಮ ವೆಬ್‌ಪ್ಯಾಕ್ ಬಂಡಲ್‌ಗಳ ಗಾತ್ರವನ್ನು ದೃಶ್ಯೀಕರಿಸುತ್ತದೆ, ದೊಡ್ಡ ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
• `terser-webpack-plugin`: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಅನ್ನು ಮಿನಿಫೈ ಮಾಡುತ್ತದೆ, ಬಂಡಲ್ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
• `compression-webpack-plugin`: ಅಸೆಟ್‌ಗಳನ್ನು ಸಂಕುಚಿತಗೊಳಿಸುತ್ತದೆ, ಮೆಮೊರಿಯಲ್ಲಿ ಸಂಗ್ರಹಿಸಬೇಕಾದ ಡೇಟಾದ ಪ್ರಮಾಣವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.

ಉದಾಹರಣೆ:

            // next.config.js
const withPlugins = require('next-compose-plugins');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.optimization.minimizer = config.optimization.minimizer || [];
      config.optimization.minimizer.push(new TerserPlugin());

      config.plugins.push(new CompressionPlugin());
    }

    return config;
  },
};

module.exports = withPlugins([[withBundleAnalyzer]], nextConfig);
            

              
                Copy
              
            
          

ಈ ಕಾನ್ಫಿಗರೇಶನ್ ಬಂಡಲ್ ಅನಲೈಜರ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ, TerserPlugin ನೊಂದಿಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಅನ್ನು ಮಿನಿಫೈ ಮಾಡುತ್ತದೆ ಮತ್ತು CompressionPlugin ನೊಂದಿಗೆ ಅಸೆಟ್‌ಗಳನ್ನು ಸಂಕುಚಿತಗೊಳಿಸುತ್ತದೆ. ಮೊದಲು ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ `npm install --save-dev @next/bundle-analyzer terser-webpack-plugin compression-webpack-plugin`

2. ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್

ಇಮೇಜ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಒಟ್ಟಾರೆ ಗಾತ್ರಕ್ಕೆ ಗಣನೀಯವಾಗಿ ಕೊಡುಗೆ ನೀಡುತ್ತವೆ. ಇಮೇಜ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದರಿಂದ ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯ ಸಮಯದಲ್ಲಿ ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ನಾಟಕೀಯವಾಗಿ ಕಡಿಮೆ ಮಾಡಬಹುದು ಮತ್ತು ವೆಬ್‌ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಬಹುದು. Next.js `next/image` ಕಾಂಪೊನೆಂಟ್‌ನೊಂದಿಗೆ ಅಂತರ್ನಿರ್ಮಿತ ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು:

• `next/image` ಬಳಸಿ: `next/image` ಕಾಂಪೊನೆಂಟ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ವಿಭಿನ್ನ ಸಾಧನಗಳು ಮತ್ತು ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಿಗಾಗಿ ಇಮೇಜ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುತ್ತದೆ.
• ಲೇಜಿ ಲೋಡಿಂಗ್: ಇಮೇಜ್‌ಗಳು ವ್ಯೂಪೋರ್ಟ್‌ನಲ್ಲಿ ಗೋಚರಿಸಿದಾಗ ಮಾತ್ರ ಅವುಗಳನ್ನು ಲೋಡ್ ಮಾಡಿ. ಇದು ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯ ಮತ್ತು ಮೆಮೊರಿ ಫುಟ್‌ಪ್ರಿಂಟ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. `next/image` ಇದನ್ನು ನೇರವಾಗಿ ಬೆಂಬಲಿಸುತ್ತದೆ.
• ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ: WebP ನಂತಹ ಆಧುನಿಕ ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಬಳಸಿ, ಇದು JPEG ಅಥವಾ PNG ಗಿಂತ ಉತ್ತಮ ಕಂಪ್ರೆಷನ್ ನೀಡುತ್ತದೆ. ಬ್ರೌಸರ್ ಬೆಂಬಲಿಸಿದರೆ `next/image` ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಇಮೇಜ್‌ಗಳನ್ನು WebP ಗೆ ಪರಿವರ್ತಿಸಬಹುದು.
• ಇಮೇಜ್ CDN: ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ಮತ್ತು ವಿತರಣೆಯನ್ನು ವಿಶೇಷ ಸೇವೆಗೆ ಆಫ್‌ಲೋಡ್ ಮಾಡಲು ಇಮೇಜ್ CDN ಅನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ಉದಾಹರಣೆ:

            import Image from 'next/image';

function MyComponent() {
  return (
    
  );
}

export default MyComponent;
            

              
                Copy
              
            
          

ಈ ಕೋಡ್ ತುಣುಕು ಇಮೇಜ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು `next/image` ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. Next.js ಸ್ವಯಂಚಾಲಿತವಾಗಿ ವಿಭಿನ್ನ ಸಾಧನಗಳು ಮತ್ತು ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಿಗಾಗಿ ಇಮೇಜ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುತ್ತದೆ.

3. ಡೇಟಾ ಫೆಚಿಂಗ್ ಆಪ್ಟಿಮೈಸೇಶನ್

ದಕ್ಷ ಡೇಟಾ ಫೆಚಿಂಗ್ ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ನಿರ್ಣಾಯಕವಾಗಿದೆ, ವಿಶೇಷವಾಗಿ SSR ಮತ್ತು SSG ಸಮಯದಲ್ಲಿ. ದೊಡ್ಡ ಡೇಟಾಸೆಟ್‌ಗಳು ಲಭ್ಯವಿರುವ ಮೆಮೊರಿಯನ್ನು ಬೇಗನೆ ಖಾಲಿ ಮಾಡಬಹುದು.

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು:

• ಪೇಜಿನೇಷನ್: ಡೇಟಾವನ್ನು ಸಣ್ಣ ತುಂಡುಗಳಲ್ಲಿ ಲೋಡ್ ಮಾಡಲು ಪೇಜಿನೇಷನ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ.
• ಡೇಟಾ ಕ್ಯಾಶಿಂಗ್: ಪುನರಾವರ್ತಿತ ಫೆಚಿಂಗ್ ಅನ್ನು ತಪ್ಪಿಸಲು ಆಗಾಗ್ಗೆ ಪ್ರವೇಶಿಸುವ ಡೇಟಾವನ್ನು ಕ್ಯಾಶ್ ಮಾಡಿ.
• GraphQL: ನಿಮಗೆ ಬೇಕಾದ ಡೇಟಾವನ್ನು ಮಾತ್ರ ಫೆಚ್ ಮಾಡಲು GraphQL ಬಳಸಿ, ಓವರ್-ಫೆಚಿಂಗ್ ಅನ್ನು ತಪ್ಪಿಸಿ.
• ಸ್ಟ್ರೀಮಿಂಗ್: ಸರ್ವರ್‌ನಿಂದ ಕ್ಲೈಂಟ್‌ಗೆ ಡೇಟಾವನ್ನು ಸ್ಟ್ರೀಮ್ ಮಾಡಿ, ಯಾವುದೇ ಸಮಯದಲ್ಲಿ ಮೆಮೊರಿಯಲ್ಲಿ ಸಂಗ್ರಹಿಸಬೇಕಾದ ಡೇಟಾದ ಪ್ರಮಾಣವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.

ಉದಾಹರಣೆ (ಪೇಜಿನೇಷನ್):

            async function getPosts(page = 1, limit = 10) {
  const response = await fetch(`https://api.example.com/posts?page=${page}&limit=${limit}`);
  const data = await response.json();
  return data;
}

export async function getStaticProps() {
  const posts = await getPosts();

  return {
    props: {
      posts,
    },
  };
}
            

              
                Copy
              
            
          

ಈ ಕೋಡ್ ತುಣುಕು ಪೋಸ್ಟ್‌ಗಳನ್ನು ಪೇಜಿನೇಟೆಡ್ ರೂಪದಲ್ಲಿ ಫೆಚ್ ಮಾಡುತ್ತದೆ, ಒಂದು ಬಾರಿಗೆ ಫೆಚ್ ಮಾಡುವ ಡೇಟಾದ ಪ್ರಮಾಣವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಬಳಕೆದಾರರ ಸಂವಹನದ ಆಧಾರದ ಮೇಲೆ (ಉದಾ., "ಮುಂದಿನ ಪುಟ" ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುವುದು) ನಂತರದ ಪುಟಗಳನ್ನು ಫೆಚ್ ಮಾಡಲು ನೀವು ಲಾಜಿಕ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬೇಕಾಗುತ್ತದೆ.

4. ಸ್ಥಳೀಕರಣ (i18n) ಆಪ್ಟಿಮೈಸೇಶನ್

ಬಹು ಲೊಕೇಲ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಗಣನೀಯವಾಗಿ ಹೆಚ್ಚಿಸಬಹುದು, ವಿಶೇಷವಾಗಿ ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ. ಮೆಮೊರಿ ದಕ್ಷತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಸ್ಥಳೀಕರಣ ತಂತ್ರವನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ಅತ್ಯಗತ್ಯ.

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು:

• ಲೇಜಿ ಲೋಡ್ ಅನುವಾದಗಳು: ಸಕ್ರಿಯ ಲೊಕೇಲ್‌ಗಾಗಿ ಮಾತ್ರ ಅನುವಾದಗಳನ್ನು ಲೋಡ್ ಮಾಡಿ.
• ಅನುವಾದ ಕ್ಯಾಶಿಂಗ್: ಪುನರಾವರ್ತಿತ ಲೋಡಿಂಗ್ ಅನ್ನು ತಪ್ಪಿಸಲು ಅನುವಾದಗಳನ್ನು ಕ್ಯಾಶ್ ಮಾಡಿ.
• ಲೊಕೇಲ್‌ಗಳಿಗಾಗಿ ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಕೋಡನ್ನು ಲೊಕೇಲ್ ಆಧಾರದ ಮೇಲೆ ವಿಭಜಿಸಿ, ಇದರಿಂದ ಪ್ರತಿ ಲೊಕೇಲ್‌ಗೆ ಅಗತ್ಯವಿರುವ ಕೋಡ್ ಮಾತ್ರ ಲೋಡ್ ಆಗುತ್ತದೆ.
• ಅನುವಾದ ನಿರ್ವಹಣಾ ವ್ಯವಸ್ಥೆಯನ್ನು (TMS) ಬಳಸಿ: ಒಂದು TMS ನಿಮ್ಮ ಅನುವಾದಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಉದಾಹರಣೆ (`next-i18next` ನೊಂದಿಗೆ ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನುವಾದಗಳು):

            // next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr', 'es'],
    localePath: path.resolve('./public/locales'),
    localeStructure: '{lng}/{ns}.json', // Ensures lazy loading per namespace and locale
  },
};

            

              
                Copy
              
            
          

            // pages/_app.js
import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);
            

              
                Copy
              
            
          

`next-i18next` ನೊಂದಿಗಿನ ಈ ಕಾನ್ಫಿಗರೇಶನ್ ಅನುವಾದಗಳ ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ನಿಮ್ಮ ಅನುವಾದ ಫೈಲ್‌ಗಳು `public/locales` ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ ನಿರ್ದಿಷ್ಟ `localeStructure` ಅನ್ನು ಅನುಸರಿಸಿ ಸರಿಯಾಗಿ ಸಂಘಟಿತವಾಗಿವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಮೊದಲು `next-i18next` ಪ್ಯಾಕೇಜ್ ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ.

5. ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್

ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ (GC) ಇನ್ನು ಮುಂದೆ ಬಳಕೆಯಲ್ಲಿಲ್ಲದ ಮೆಮೊರಿಯನ್ನು ಮರುಪಡೆಯುವ ಪ್ರಕ್ರಿಯೆಯಾಗಿದೆ. ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯ ಸಮಯದಲ್ಲಿ ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ಅನ್ನು ಒತ್ತಾಯಿಸುವುದರಿಂದ ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸಹಾಯ ಮಾಡಬಹುದು. ಆದಾಗ್ಯೂ, ಅತಿಯಾದ ಮ್ಯಾನುಯಲ್ GC ಕರೆಗಳು ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಹಾನಿ ಮಾಡಬಹುದು, ಆದ್ದರಿಂದ ಇದನ್ನು ವಿವೇಚನೆಯಿಂದ ಬಳಸಿ.

ಉದಾಹರಣೆ:

            if (global.gc) {
  global.gc();
} else {
  console.warn('Garbage collection unavailable.  Run with --expose-gc');
}

            

              
                Copy
              
            
          

ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ಸಕ್ರಿಯಗೊಳಿಸಿ ನಿಮ್ಮ ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಚಲಾಯಿಸಲು, `--expose-gc` ಫ್ಲ್ಯಾಗ್ ಬಳಸಿ:

            node --expose-gc node_modules/.bin/next build
            

              
                Copy
              
            
          

ಪ್ರಮುಖ: `--expose-gc` ಅನ್ನು ಪ್ರೊಡಕ್ಷನ್ ಪರಿಸರದಲ್ಲಿ ಬಳಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ ನಿರುತ್ಸಾಹಿಸಲಾಗುತ್ತದೆ ಏಕೆಂದರೆ ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಇದನ್ನು ಮುಖ್ಯವಾಗಿ ಅಭಿವೃದ್ಧಿಯ ಸಮಯದಲ್ಲಿ ಡೀಬಗ್ ಮಾಡಲು ಮತ್ತು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಬಳಸಿ. ಇದನ್ನು ಷರತ್ತುಬದ್ಧವಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸಲು ಪರಿಸರ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

6. ಇಂಕ್ರಿಮೆಂಟಲ್ ಬಿಲ್ಡ್ಸ್

Next.js ಇಂಕ್ರಿಮೆಂಟಲ್ ಬಿಲ್ಡ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ಕೊನೆಯ ಬಿಲ್ಡ್‌ನಿಂದ ಬದಲಾದ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಭಾಗಗಳನ್ನು ಮಾತ್ರ ಪುನರ್ನಿರ್ಮಿಸುತ್ತದೆ. ಇದು ಬಿಲ್ಡ್ ಸಮಯ ಮತ್ತು ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಗಣನೀಯವಾಗಿ ಕಡಿಮೆ ಮಾಡಬಹುದು.

ಪರ್ಸಿಸ್ಟೆಂಟ್ ಕ್ಯಾಶಿಂಗ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ:

ನಿಮ್ಮ Next.js ಕಾನ್ಫಿಗರೇಶನ್‌ನಲ್ಲಿ ಪರ್ಸಿಸ್ಟೆಂಟ್ ಕ್ಯಾಶಿಂಗ್ ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

            // next.config.js
module.exports = {
  cache: {
    type: 'filesystem',
    allowCollectingMemory: true,
  },
};
            

              
                Copy
              
            
          

ಈ ಕಾನ್ಫಿಗರೇಶನ್ Next.js ಗೆ ಕ್ಯಾಶಿಂಗ್‌ಗಾಗಿ ಫೈಲ್‌ಸಿಸ್ಟಮ್ ಅನ್ನು ಬಳಸಲು ಹೇಳುತ್ತದೆ, ಇದು ಹಿಂದೆ ನಿರ್ಮಿಸಿದ ಅಸೆಟ್‌ಗಳನ್ನು ಮರುಬಳಕೆ ಮಾಡಲು ಮತ್ತು ಬಿಲ್ಡ್ ಸಮಯ ಹಾಗೂ ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. `allowCollectingMemory: true` Next.js ಗೆ ಮೆಮೊರಿ ಫುಟ್‌ಪ್ರಿಂಟ್ ಅನ್ನು ಮತ್ತಷ್ಟು ಕಡಿಮೆ ಮಾಡಲು ಬಳಕೆಯಾಗದ ಕ್ಯಾಶ್ ಐಟಂಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಈ ಫ್ಲ್ಯಾಗ್ ಕೇವಲ Node v16 ಮತ್ತು ಮೇಲ್ಪಟ್ಟ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

7. ಸರ್ವರ್‌ಲೆಸ್ ಫಂಕ್ಷನ್‌ಗಳ ಮೆಮೊರಿ ಮಿತಿಗಳು

Next.js ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಸರ್ವರ್‌ಲೆಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳಿಗೆ (ಉದಾ., Vercel, Netlify, AWS Lambda) ಡಿಪ್ಲಾಯ್ ಮಾಡುವಾಗ, ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ವಿಧಿಸುವ ಮೆಮೊರಿ ಮಿತಿಗಳ ಬಗ್ಗೆ ಗಮನವಿರಲಿ. ಈ ಮಿತಿಗಳನ್ನು ಮೀರುವುದು ಡಿಪ್ಲಾಯ್‌ಮೆಂಟ್ ವೈಫಲ್ಯಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.

ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ:

ನಿಮ್ಮ ಸರ್ವರ್‌ಲೆಸ್ ಫಂಕ್ಷನ್‌ಗಳ ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ನಿಕಟವಾಗಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ ಮತ್ತು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೊಂದಿಸಿ. ಮೆಮೊರಿ-ತೀವ್ರ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಗುರುತಿಸಲು ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ನ ಮೇಲ್ವಿಚಾರಣಾ ಸಾಧನಗಳನ್ನು ಬಳಸಿ.

ಫಂಕ್ಷನ್ ಗಾತ್ರವನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ:

ನಿಮ್ಮ ಸರ್ವರ್‌ಲೆಸ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಸಾಧ್ಯವಾದಷ್ಟು ಚಿಕ್ಕದಾಗಿ ಮತ್ತು ಕೇಂದ್ರೀಕೃತವಾಗಿಡಿ. ಅನಗತ್ಯ ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ಸೇರಿಸುವುದನ್ನು ಅಥವಾ ಫಂಕ್ಷನ್‌ಗಳೊಳಗೆ ಸಂಕೀರ್ಣ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ನಿರ್ವಹಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ.

8. ಪರಿಸರ ವೇರಿಯಬಲ್‌ಗಳು

ಕಾನ್ಫಿಗರೇಶನ್‌ಗಳು ಮತ್ತು ಫೀಚರ್ ಫ್ಲ್ಯಾಗ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಪರಿಸರ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಿ. ಪರಿಸರ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಸರಿಯಾಗಿ ಕಾನ್ಫಿಗರ್ ಮಾಡುವುದರಿಂದ ಮೆಮೊರಿ ಬಳಕೆಯ ಮಾದರಿಗಳ ಮೇಲೆ ಪ್ರಭಾವ ಬೀರಬಹುದು ಮತ್ತು ಪರಿಸರವನ್ನು (ಅಭಿವೃದ್ಧಿ, ಸ್ಟೇಜಿಂಗ್, ಪ್ರೊಡಕ್ಷನ್) ಆಧರಿಸಿ ಮೆಮೊರಿ-ತೀವ್ರ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಬಹುದು.

ಉದಾಹರಣೆ:

            // next.config.js
module.exports = {
  env: {
    ENABLE_IMAGE_OPTIMIZATION: process.env.NODE_ENV === 'production',
  },
};
            

              
                Copy
              
            
          

            // components/MyComponent.js
function MyComponent() {
  const enableImageOptimization = process.env.ENABLE_IMAGE_OPTIMIZATION === 'true';

  return (
    

      {enableImageOptimization ? (
        
      ) : (
        
      )}
    
  );
}
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯು ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನ್ನು ಕೇವಲ ಪ್ರೊಡಕ್ಷನ್ ಪರಿಸರದಲ್ಲಿ ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ, ಇದು ಅಭಿವೃದ್ಧಿ ಬಿಲ್ಡ್‌ಗಳ ಸಮಯದಲ್ಲಿ ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಸಂಭಾವ್ಯವಾಗಿ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.

ಕೇಸ್ ಸ್ಟಡೀಸ್ ಮತ್ತು ಜಾಗತಿಕ ಉದಾಹರಣೆಗಳು

ವಿಶ್ವದಾದ್ಯಂತ ವಿವಿಧ ಕಂಪನಿಗಳು ಮೆಮೊರಿ ದಕ್ಷತೆಗಾಗಿ Next.js ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಗಳನ್ನು ಹೇಗೆ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿವೆ ಎಂಬುದರ ಕೆಲವು ಕೇಸ್ ಸ್ಟಡೀಸ್ ಮತ್ತು ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ:

ಕೇಸ್ ಸ್ಟಡಿ 1: ಇ-ಕಾಮರ್ಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ (ಜಾಗತಿಕ ವ್ಯಾಪ್ತಿ)

ಹಲವಾರು ದೇಶಗಳಲ್ಲಿ ಗ್ರಾಹಕರನ್ನು ಹೊಂದಿರುವ ಒಂದು ದೊಡ್ಡ ಇ-ಕಾಮರ್ಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಉತ್ಪನ್ನ ಡೇಟಾ, ಇಮೇಜ್‌ಗಳು ಮತ್ತು ಅನುವಾದಗಳ ದೊಡ್ಡ ಪ್ರಮಾಣದಿಂದಾಗಿ ಹೆಚ್ಚುತ್ತಿರುವ ಬಿಲ್ಡ್ ಸಮಯ ಮತ್ತು ಮೆಮೊರಿ ಸಮಸ್ಯೆಗಳನ್ನು ಎದುರಿಸಿತು. ಅವರ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರವು ಒಳಗೊಂಡಿತ್ತು:

• ಬಿಲ್ಡ್ ಸಮಯದಲ್ಲಿ ಉತ್ಪನ್ನ ಡೇಟಾ ಫೆಚಿಂಗ್‌ಗಾಗಿ ಪೇಜಿನೇಷನ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು.
• ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನ್ನು ಆಫ್‌ಲೋಡ್ ಮಾಡಲು ಇಮೇಜ್ CDN ಅನ್ನು ಬಳಸುವುದು.
• ವಿವಿಧ ಲೊಕೇಲ್‌ಗಳಿಗಾಗಿ ಅನುವಾದಗಳನ್ನು ಲೇಜಿ ಲೋಡ್ ಮಾಡುವುದು.
• ಭೌಗೋಳಿಕ ಪ್ರದೇಶಗಳ ಆಧಾರದ ಮೇಲೆ ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ಮಾಡುವುದು.

ಈ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳು ಬಿಲ್ಡ್ ಸಮಯ ಮತ್ತು ಮೆಮೊರಿ ಬಳಕೆಯಲ್ಲಿ ಗಣನೀಯ ಇಳಿಕೆಗೆ ಕಾರಣವಾಯಿತು, ಇದು ವಿಶ್ವದಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗೆ ವೇಗವಾದ ಡಿಪ್ಲಾಯ್‌ಮೆಂಟ್‌ಗಳು ಮತ್ತು ಸುಧಾರಿತ ವೆಬ್‌ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸಾಧ್ಯವಾಗಿಸಿತು.

ಕೇಸ್ ಸ್ಟಡಿ 2: ಸುದ್ದಿ ಸಂಗ್ರಾಹಕ (ಬಹುಭಾಷಾ ವಿಷಯ)

ಹಲವಾರು ಭಾಷೆಗಳಲ್ಲಿ ವಿಷಯವನ್ನು ಒದಗಿಸುವ ಒಂದು ಸುದ್ದಿ ಸಂಗ್ರಾಹಕವು ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯ ಸಮಯದಲ್ಲಿ ಮೆಮೊರಿ ಕೊರತೆಯ ದೋಷಗಳನ್ನು ಅನುಭವಿಸಿತು. ಅವರ ಪರಿಹಾರವು ಒಳಗೊಂಡಿತ್ತು:

• ಹೆಚ್ಚು ಮೆಮೊರಿ-ದಕ್ಷ ಅನುವಾದ ನಿರ್ವಹಣಾ ವ್ಯವಸ್ಥೆಗೆ ಬದಲಾಯಿಸುವುದು.
• ಬಳಕೆಯಾಗದ ಕೋಡ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲು ಆಕ್ರಮಣಕಾರಿ ಟ್ರೀ ಶೇಕಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು.
• ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ಮತ್ತು ಲೇಜಿ ಲೋಡಿಂಗ್ ಬಳಸುವುದು.
• ಪುನರ್ನಿರ್ಮಾಣ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಇಂಕ್ರಿಮೆಂಟಲ್ ಬಿಲ್ಡ್‌ಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುವುದು.

ಈ ಬದಲಾವಣೆಗಳು ಅವರಿಗೆ ಮೆಮೊರಿ ಮಿತಿಗಳನ್ನು ಮೀರದೆ ತಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಯಶಸ್ವಿಯಾಗಿ ನಿರ್ಮಿಸಲು ಮತ್ತು ಡಿಪ್ಲಾಯ್ ಮಾಡಲು ಅವಕಾಶ ಮಾಡಿಕೊಟ್ಟಿತು, ತಮ್ಮ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಸುದ್ದಿ ವಿಷಯವನ್ನು ಸಮಯೋಚಿತವಾಗಿ ತಲುಪಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿತು.

ಉದಾಹರಣೆ: ಅಂತರರಾಷ್ಟ್ರೀಯ ಪ್ರಯಾಣ ಬುಕಿಂಗ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್

ಒಂದು ಜಾಗತಿಕ ಪ್ರಯಾಣ ಬುಕಿಂಗ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ತನ್ನ ಫ್ರಂಟ್-ಎಂಡ್ ಅಭಿವೃದ್ಧಿಗಾಗಿ Next.js ಅನ್ನು ಬಳಸುತ್ತದೆ. ಅವರು ವಿಮಾನಗಳು, ಹೋಟೆಲ್‌ಗಳು ಮತ್ತು ಇತರ ಪ್ರಯಾಣ ಸೇವೆಗಳಿಗೆ ಸಂಬಂಧಿಸಿದ ಬೃಹತ್ ಪ್ರಮಾಣದ ಡೈನಾಮಿಕ್ ಡೇಟಾವನ್ನು ನಿರ್ವಹಿಸುತ್ತಾರೆ. ಮೆಮೊರಿ ನಿರ್ವಹಣೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು, ಅವರು:

• ಪುನರಾವರ್ತಿತ ಡೇಟಾ ಫೆಚಿಂಗ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಕ್ಯಾಶಿಂಗ್‌ನೊಂದಿಗೆ ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಬಳಸುತ್ತಾರೆ.
• ನಿರ್ದಿಷ್ಟ ರೂಟ್‌ಗಳು ಮತ್ತು ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಅಗತ್ಯವಿರುವ ಡೇಟಾವನ್ನು ಮಾತ್ರ ಫೆಚ್ ಮಾಡಲು GraphQL ಅನ್ನು ಬಳಸುತ್ತಾರೆ.
• ಬಳಕೆದಾರರ ಸಾಧನ ಮತ್ತು ಸ್ಥಳವನ್ನು ಆಧರಿಸಿ ಇಮೇಜ್‌ಗಳ ಮರುಗಾತ್ರ ಮತ್ತು ಫಾರ್ಮ್ಯಾಟ್ ಪರಿವರ್ತನೆಯನ್ನು ನಿರ್ವಹಿಸಲು CDN ಬಳಸಿಕೊಂಡು ದೃಢವಾದ ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ಪೈಪ್‌ಲೈನ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತಾರೆ.
• ಪರಿಸರವನ್ನು (ಅಭಿವೃದ್ಧಿ, ಸ್ಟೇಜಿಂಗ್, ಪ್ರೊಡಕ್ಷನ್) ಆಧರಿಸಿ ಸಂಪನ್ಮೂಲ-ತೀವ್ರ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು (ಉದಾ., ವಿವರವಾದ ನಕ್ಷೆ ರೆಂಡರಿಂಗ್) ಸಕ್ರಿಯಗೊಳಿಸಲು ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಪರಿಸರ-ನಿರ್ದಿಷ್ಟ ಕಾನ್ಫಿಗರೇಶನ್‌ಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತಾರೆ.

ತೀರ್ಮಾನ

ಮೆಮೊರಿ ದಕ್ಷತೆಗಾಗಿ Next.js ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ಸುಗಮ ಡಿಪ್ಲಾಯ್‌ಮೆಂಟ್‌ಗಳು ಮತ್ತು ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿರ್ಣಾಯಕವಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರನ್ನು ಗುರಿಯಾಗಿಸಿಕೊಂಡ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ. ಮೆಮೊರಿ ಬಳಕೆಗೆ ಕೊಡುಗೆ ನೀಡುವ ಅಂಶಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸುವ ಮೂಲಕ ಮತ್ತು ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ ಚರ್ಚಿಸಲಾದ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಅನ್ವಯಿಸುವ ಮೂಲಕ, ನೀವು ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಗಣನೀಯವಾಗಿ ಕಡಿಮೆ ಮಾಡಬಹುದು ಮತ್ತು ನಿಮ್ಮ Next.js ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಒಟ್ಟಾರೆ ವಿಶ್ವಾಸಾರ್ಹತೆ ಮತ್ತು ಸ್ಕೇಲೆಬಿಲಿಟಿಯನ್ನು ಸುಧಾರಿಸಬಹುದು. ನಿಮ್ಮ ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನಿರಂತರವಾಗಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ ಮತ್ತು ಅತ್ಯುತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ವಿಕಸನಗೊಂಡಂತೆ ನಿಮ್ಮ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಹೊಂದಿಸಿಕೊಳ್ಳಿ.

ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ಅಪ್ಲಿಕೇಶನ್ ಮತ್ತು ಮೂಲಸೌಕರ್ಯಕ್ಕೆ ಅತ್ಯಂತ ಮಹತ್ವದ ಪರಿಣಾಮವನ್ನು ನೀಡುವ ತಂತ್ರಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಲು ಮರೆಯದಿರಿ. ನಿಮ್ಮ ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನಿಯಮಿತವಾಗಿ ಪ್ರೊಫೈಲ್ ಮಾಡುವುದು ಮತ್ತು ವಿಶ್ಲೇಷಿಸುವುದು ಸುಧಾರಣೆಗಾಗಿ ಪ್ರದೇಶಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ Next.js ಅಪ್ಲಿಕೇಶನ್ ವಿಶ್ವದಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗೆ ಮೆಮೊರಿ-ದಕ್ಷ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳದ್ದಾಗಿ ಉಳಿಯುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.