ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್‌ಗೆ ನಮ್ಮ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯೊಂದಿಗೆ ವೇಗದ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಅನ್‌ಲಾಕ್ ಮಾಡಿ. ಆಧುನಿಕ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಿಗಾಗಿ ಡೈನಾಮಿಕ್ ಲೋಡಿಂಗ್, ರೂಟ್-ಆಧಾರಿತ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ಮತ್ತು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಕಲಿಯಿರಿ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್: ಡೈನಾಮಿಕ್ ಲೋಡಿಂಗ್ ಮತ್ತು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಆಪ್ಟಿಮೈಸೇಶನ್‌ನ ಆಳವಾದ ನೋಟ
ಆಧುನಿಕ ಡಿಜಿಟಲ್ ಜಗತ್ತಿನಲ್ಲಿ, ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಮೇಲೆ ಬಳಕೆದಾರರ ಮೊದಲ ಅಭಿಪ್ರಾಯವು ಸಾಮಾನ್ಯವಾಗಿ ಒಂದೇ ಒಂದು ಮೆಟ್ರಿಕ್‌ನಿಂದ ನಿರ್ಧರಿಸಲ್ಪಡುತ್ತದೆ: ವೇಗ. ನಿಧಾನವಾದ, ಜಡವಾದ ವೆಬ್‌ಸೈಟ್ ಬಳಕೆದಾರರ ಹತಾಶೆ, ಹೆಚ್ಚಿನ ಬೌನ್ಸ್ ದರಗಳು, ಮತ್ತು ವ್ಯಾಪಾರದ ಗುರಿಗಳ ಮೇಲೆ ನೇರ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು. ನಿಧಾನವಾದ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಹಿಂದಿನ ಪ್ರಮುಖ ಅಪರಾಧಿಗಳಲ್ಲಿ ಒಂದು ಏಕಶಿಲೆಯ (monolithic) ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಂಡಲ್ ಆಗಿದೆ—ಇದು ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಸೈಟ್‌ನ ಎಲ್ಲಾ ಕೋಡ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಒಂದು ದೊಡ್ಡ ಫೈಲ್, ಇದನ್ನು ಬಳಕೆದಾರರು ಪುಟದೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುವ ಮೊದಲು ಡೌನ್‌ಲೋಡ್, ಪಾರ್ಸ್, ಮತ್ತು ಎಕ್ಸಿಕ್ಯೂಟ್ ಮಾಡಬೇಕು.
ಇಲ್ಲೇ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ಬರುತ್ತದೆ. ಇದು ಕೇವಲ ಒಂದು ತಂತ್ರವಲ್ಲ; ನಾವು ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸುತ್ತೇವೆ ಮತ್ತು ತಲುಪಿಸುತ್ತೇವೆ ಎಂಬುದರಲ್ಲಿ ಇದು ಒಂದು ಮೂಲಭೂತ ವಾಸ್ತುಶಿಲ್ಪದ ಬದಲಾವಣೆಯಾಗಿದೆ. ಆ ದೊಡ್ಡ ಬಂಡಲ್ ಅನ್ನು ಸಣ್ಣ, ಆನ್-ಡಿಮಾಂಡ್ ಚಂಕ್‌ಗಳಾಗಿ ವಿಭಜಿಸುವ ಮೂಲಕ, ನಾವು ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ನಾಟಕೀಯವಾಗಿ ಸುಧಾರಿಸಬಹುದು ಮತ್ತು ಹೆಚ್ಚು ಸುಗಮವಾದ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸಬಹುದು. ಈ ಮಾರ್ಗದರ್ಶಿ ನಿಮ್ಮನ್ನು ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ಪ್ರಪಂಚದ ಆಳವಾದ ನೋಟಕ್ಕೆ ಕೊಂಡೊಯ್ಯುತ್ತದೆ, ಅದರ ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು, ಪ್ರಾಯೋಗಿಕ ಕಾರ್ಯತಂತ್ರಗಳು, ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲಿನ ಅದರ ಆಳವಾದ ಪ್ರಭಾವವನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ.
ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ಎಂದರೇನು, ಮತ್ತು ನೀವು ಯಾಕೆ ಕಾಳಜಿ ವಹಿಸಬೇಕು?
ಅದರ ಮೂಲದಲ್ಲಿ, ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ಎನ್ನುವುದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಅನ್ನು "ಚಂಕ್ಸ್" ಎಂದು ಕರೆಯಲ್ಪಡುವ ಅನೇಕ ಸಣ್ಣ ಫೈಲ್‌ಗಳಾಗಿ ವಿಭಜಿಸುವ ಅಭ್ಯಾಸವಾಗಿದೆ, ಇವುಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಅಥವಾ ಸಮಾನಾಂತರವಾಗಿ ಲೋಡ್ ಮಾಡಬಹುದು. ಬಳಕೆದಾರರು ನಿಮ್ಮ ಮುಖಪುಟಕ್ಕೆ ಮೊದಲ ಬಾರಿಗೆ ಬಂದಾಗ ಅವರಿಗೆ 2MB ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್ ಕಳುಹಿಸುವ ಬದಲು, ಆ ಪುಟವನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಅಗತ್ಯವಿರುವ ಕೇವಲ 200KB ಯನ್ನು ಮಾತ್ರ ನೀವು ಕಳುಹಿಸಬಹುದು. ಉಳಿದ ಕೋಡ್—ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್ ಪುಟ, ಅಡ್ಮಿನ್ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್, ಅಥವಾ ಸಂಕೀರ್ಣ ಡೇಟಾ ದೃಶ್ಯೀಕರಣ ಉಪಕರಣದಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳಿಗಾಗಿ—ಬಳಕೆದಾರರು ಆ ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದಾಗ ಅಥವಾ ಸಂವಹನ ನಡೆಸಿದಾಗ ಮಾತ್ರ ತರಲಾಗುತ್ತದೆ.
ಇದನ್ನು ಒಂದು ರೆಸ್ಟೋರೆಂಟ್‌ನಲ್ಲಿ ಆರ್ಡರ್ ಮಾಡುವಂತೆ ಯೋಚಿಸಿ. ಏಕಶಿಲೆಯ ಬಂಡಲ್ ಎಂದರೆ ನಿಮಗೆ ಬೇಕೋ ಬೇಡವೋ, ಸಂಪೂರ್ಣ ಬಹು-ಕೋರ್ಸ್ ಮೆನುವನ್ನು ಒಂದೇ ಬಾರಿಗೆ ಬಡಿಸಿದಂತೆ. ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ಎನ್ನುವುದು ಆ ಲಾ ಕಾರ್ಟೆ (à la carte) ಅನುಭವ: ನಿಮಗೆ ಬೇಕಾದುದನ್ನು, ನಿಮಗೆ ಬೇಕಾದಾಗ ನಿಖರವಾಗಿ ಪಡೆಯುತ್ತೀರಿ.
ಏಕಶಿಲೆಯ ಬಂಡಲ್‌ಗಳ ಸಮಸ್ಯೆ
ಪರಿಹಾರವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರಶಂಸಿಸಲು, ನಾವು ಮೊದಲು ಸಮಸ್ಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು. ಒಂದು ದೊಡ್ಡ ಬಂಡಲ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಹಲವಾರು ರೀತಿಯಲ್ಲಿ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ:
- ಹೆಚ್ಚಿದ ನೆಟ್‌ವರ್ಕ್ ಲೇಟೆನ್ಸಿ: ದೊಡ್ಡ ಫೈಲ್‌ಗಳು ಡೌನ್‌ಲೋಡ್ ಆಗಲು ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ, ವಿಶೇಷವಾಗಿ ವಿಶ್ವದ ಅನೇಕ ಭಾಗಗಳಲ್ಲಿ ಪ್ರಚಲಿತದಲ್ಲಿರುವ ನಿಧಾನವಾದ ಮೊಬೈಲ್ ನೆಟ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿ. ಈ ಆರಂಭಿಕ ಕಾಯುವ ಸಮಯವು ಸಾಮಾನ್ಯವಾಗಿ ಮೊದಲ ಅಡಚಣೆಯಾಗಿದೆ.
- ಹೆಚ್ಚಿನ ಪಾರ್ಸ್ ಮತ್ತು ಕಂಪೈಲ್ ಸಮಯಗಳು: ಒಮ್ಮೆ ಡೌನ್‌ಲೋಡ್ ಆದ ನಂತರ, ಬ್ರೌಸರ್‌ನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎಂಜಿನ್ ಸಂಪೂರ್ಣ ಕೋಡ್‌ಬೇಸ್ ಅನ್ನು ಪಾರ್ಸ್ ಮಾಡಿ ಮತ್ತು ಕಂಪೈಲ್ ಮಾಡಬೇಕು. ಇದು ಸಿಪಿಯು-ತೀವ್ರವಾದ ಕಾರ್ಯವಾಗಿದ್ದು, ಇದು ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ, ಅಂದರೆ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಹೆಪ್ಪುಗಟ್ಟಿದ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಿಸದ ಸ್ಥಿತಿಯಲ್ಲಿ ಉಳಿಯುತ್ತದೆ.
- ನಿರ್ಬಂಧಿತ ರೆಂಡರಿಂಗ್: ಮುಖ್ಯ ಥ್ರೆಡ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ನಿರತವಾಗಿರುವಾಗ, ಅದು ಪುಟವನ್ನು ರೆಂಡರಿಂಗ್ ಮಾಡುವ ಅಥವಾ ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವಂತಹ ಇತರ ನಿರ್ಣಾಯಕ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ. ಇದು ನೇರವಾಗಿ ಕಳಪೆ ಟೈಮ್ ಟು ಇಂಟರಾಕ್ಟಿವ್ (TTI) ಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
- ವ್ಯರ್ಥವಾದ ಸಂಪನ್ಮೂಲಗಳು: ಒಂದು ವಿಶಿಷ್ಟ ಬಳಕೆದಾರ ಸೆಶನ್‌ನಲ್ಲಿ ಏಕಶಿಲೆಯ ಬಂಡಲ್‌ನಲ್ಲಿನ ಕೋಡ್‌ನ ಗಮನಾರ್ಹ ಭಾಗವು ಎಂದಿಗೂ ಬಳಸಲ್ಪಡದೇ ಇರಬಹುದು. ಇದರರ್ಥ ಬಳಕೆದಾರರು ಅವರಿಗೆ ಯಾವುದೇ ಮೌಲ್ಯವನ್ನು ಒದಗಿಸದ ಕೋಡ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಮತ್ತು ಸಿದ್ಧಪಡಿಸಲು ಡೇಟಾ, ಬ್ಯಾಟರಿ ಮತ್ತು ಸಂಸ್ಕರಣಾ ಶಕ್ತಿಯನ್ನು ವ್ಯರ್ಥ ಮಾಡುತ್ತಾರೆ.
- ಕಳಪೆ ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್: ಈ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳು ನಿಮ್ಮ ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್ ಸ್ಕೋರ್‌ಗಳಿಗೆ ನೇರವಾಗಿ ಹಾನಿ ಮಾಡುತ್ತವೆ, ಇದು ನಿಮ್ಮ ಸರ್ಚ್ ಇಂಜಿನ್ ಶ್ರೇಯಾಂಕದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು. ನಿರ್ಬಂಧಿತ ಮುಖ್ಯ ಥ್ರೆಡ್ ಫಸ್ಟ್ ಇನ್‌ಪುಟ್ ಡಿಲೇ (FID) ಮತ್ತು ಇಂಟರಾಕ್ಷನ್ ಟು ನೆಕ್ಸ್ಟ್ ಪೇಂಟ್ (INP) ಅನ್ನು ಹದಗೆಡಿಸುತ್ತದೆ, ಆದರೆ ವಿಳಂಬಿತ ರೆಂಡರಿಂಗ್ ಲಾರ್ಜೆಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (LCP) ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ.
ಆಧುನಿಕ ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್‌ನ ತಿರುಳು: ಡೈನಾಮಿಕ್ `import()`
ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ತಂತ್ರಗಳ ಹಿಂದಿನ ಮ್ಯಾಜಿಕ್ ಒಂದು ಪ್ರಮಾಣಿತ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ: ಡೈನಾಮಿಕ್ `import()` ಎಕ್ಸ್‌ಪ್ರೆಶನ್. ಸ್ಥಿರ `import` ಸ್ಟೇಟ್‌ಮೆಂಟ್‌ನಂತಲ್ಲದೆ, ಇದನ್ನು ಬಿಲ್ಡ್ ಸಮಯದಲ್ಲಿ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಒಟ್ಟಿಗೆ ಬಂಡಲ್ ಮಾಡುತ್ತದೆ, ಡೈನಾಮಿಕ್ `import()` ಒಂದು ಫಂಕ್ಷನ್-ರೀತಿಯ ಎಕ್ಸ್‌ಪ್ರೆಶನ್ ಆಗಿದ್ದು ಅದು ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ.
ಅದು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:
import('/path/to/module.js')
ವೆಬ್‌ಪ್ಯಾಕ್, ವೈಟ್, ಅಥವಾ ರೋಲಪ್‌ನಂತಹ ಬಂಡ್ಲರ್ ಈ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ನೋಡಿದಾಗ, ಅದು `'./path/to/module.js'` ಮತ್ತು ಅದರ ಅವಲಂಬನೆಗಳನ್ನು ಪ್ರತ್ಯೇಕ ಚಂಕ್‌ನಲ್ಲಿ ಇಡಬೇಕು ಎಂದು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತದೆ. `import()` ಕರೆಯು ಒಂದು Promise ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಇದು ನೆಟ್‌ವರ್ಕ್ ಮೂಲಕ ಯಶಸ್ವಿಯಾಗಿ ಲೋಡ್ ಆದ ನಂತರ ಮಾಡ್ಯೂಲ್‌ನ ವಿಷಯಗಳೊಂದಿಗೆ ರಿಸಾಲ್ವ್ ಆಗುತ್ತದೆ.
ಒಂದು ವಿಶಿಷ್ಟ ಅನುಷ್ಠಾನವು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:
// id="load-feature" ಇರುವ ಬಟನ್ ಇದೆ ಎಂದು ಭಾವಿಸೋಣ
const featureButton = document.getElementById('load-feature');
featureButton.addEventListener('click', () => {
import('./heavy-feature.js')
.then(module => {
// ಮಾಡ್ಯೂಲ್ ಯಶಸ್ವಿಯಾಗಿ ಲೋಡ್ ಆಗಿದೆ
const feature = module.default;
feature.initialize(); // ಲೋಡ್ ಆದ ಮಾಡ್ಯೂಲ್‌ನಿಂದ ಒಂದು ಫಂಕ್ಷನ್ ರನ್ ಮಾಡಿ
})
.catch(err => {
// ಲೋಡ್ ಮಾಡುವಾಗ ಯಾವುದೇ ದೋಷಗಳನ್ನು ನಿಭಾಯಿಸಿ
console.error('Failed to load the feature:', err);
});
});
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `heavy-feature.js` ಅನ್ನು ಆರಂಭಿಕ ಪುಟ ಲೋಡ್‌ನಲ್ಲಿ ಸೇರಿಸಲಾಗಿಲ್ಲ. ಬಳಕೆದಾರರು ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಮಾತ್ರ ಅದನ್ನು ಸರ್ವರ್‌ನಿಂದ ವಿನಂತಿಸಲಾಗುತ್ತದೆ. ಇದು ಡೈನಾಮಿಕ್ ಲೋಡಿಂಗ್‌ನ ಮೂಲಭೂತ ತತ್ವವಾಗಿದೆ.
ಪ್ರಾಯೋಗಿಕ ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ತಂತ್ರಗಳು
"ಹೇಗೆ" ಎಂದು ತಿಳಿಯುವುದು ಒಂದು ವಿಷಯ; "ಎಲ್ಲಿ" ಮತ್ತು "ಯಾವಾಗ" ಎಂದು ತಿಳಿಯುವುದೇ ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ಅನ್ನು ನಿಜವಾಗಿಯೂ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಮಾಡುತ್ತದೆ. ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಬಳಸಲಾಗುವ ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಮತ್ತು ಶಕ್ತಿಯುತ ತಂತ್ರಗಳು ಇಲ್ಲಿವೆ.
1. ರೂಟ್-ಆಧಾರಿತ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್
ಇದು ಬಹುಶಃ ಅತ್ಯಂತ ಪ್ರಭಾವಶಾಲಿ ಮತ್ತು ವ್ಯಾಪಕವಾಗಿ ಬಳಸಲಾಗುವ ತಂತ್ರವಾಗಿದೆ. ಇದರ ಆಲೋಚನೆ ಸರಳವಾಗಿದೆ: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಪುಟ ಅಥವಾ ರೂಟ್‌ಗೆ ತನ್ನದೇ ಆದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಚಂಕ್ ಸಿಗುತ್ತದೆ. ಬಳಕೆದಾರರು `/home` ಗೆ ಭೇಟಿ ನೀಡಿದಾಗ, ಅವರು ಹೋಮ್ ಪೇಜ್‌ಗೆ ಬೇಕಾದ ಕೋಡ್ ಅನ್ನು ಮಾತ್ರ ಲೋಡ್ ಮಾಡುತ್ತಾರೆ. ಅವರು `/dashboard` ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದರೆ, ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗೆ ಬೇಕಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ತರಲಾಗುತ್ತದೆ.
ಈ ವಿಧಾನವು ಬಳಕೆದಾರರ ನಡವಳಿಕೆಯೊಂದಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ ಮತ್ತು ಬಹು-ಪುಟದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ (ಸಿಂಗಲ್ ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು, ಅಥವಾ SPA ಗಳು ಕೂಡ) ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ. ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ಇದಕ್ಕೆ ಅಂತರ್ನಿರ್ಮಿತ ಬೆಂಬಲವನ್ನು ಹೊಂದಿವೆ.
ರಿಯಾಕ್ಟ್‌ನೊಂದಿಗೆ ಉದಾಹರಣೆ (`React.lazy` ಮತ್ತು `Suspense`)
ರಿಯಾಕ್ಟ್, ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಇಂಪೋರ್ಟ್ ಮಾಡಲು `React.lazy` ಮತ್ತು ಕಾಂಪೊನೆಂಟ್‌ನ ಕೋಡ್ ಲೋಡ್ ಆಗುತ್ತಿರುವಾಗ ಫಾಲ್‌ಬ್ಯಾಕ್ UI (ಲೋಡಿಂಗ್ ಸ್ಪಿನ್ನರ್‌ನಂತೆ) ತೋರಿಸಲು `Suspense` ಅನ್ನು ಬಳಸಿಕೊಂಡು ರೂಟ್-ಆಧಾರಿತ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ಅನ್ನು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
// ಸಾಮಾನ್ಯ/ಆರಂಭಿಕ ರೂಟ್‌ಗಳಿಗಾಗಿ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸ್ಟ್ಯಾಟಿಕ್ ಆಗಿ ಇಂಪೋರ್ಟ್ ಮಾಡಿ
import HomePage from './pages/HomePage';
// ಕಡಿಮೆ ಸಾಮಾನ್ಯ ಅಥವಾ ಭಾರವಾದ ರೂಟ್‌ಗಳಿಗಾಗಿ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಇಂಪೋರ್ಟ್ ಮಾಡಿ
const DashboardPage = lazy(() => import('./pages/DashboardPage'));
const AdminPanel = lazy(() => import('./pages/AdminPanel'));
function App() {
return (
Loading page... Vue ನೊಂದಿಗೆ ಉದಾಹರಣೆ (ಅಸಿಂಕ್ ಕಾಂಪೊನೆಂಟ್ಸ್)
Vue ನ ರೂಟರ್, ರೂಟ್ ಡೆಫಿನಿಷನ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ಡೈನಾಮಿಕ್ `import()` ಸಿಂಟ್ಯಾಕ್ಸ್ ಬಳಸಿಕೊಂಡು ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಲೇಜಿ ಲೋಡ್ ಮಾಡಲು ಪ್ರಥಮ ದರ್ಜೆ ಬೆಂಬಲವನ್ನು ಹೊಂದಿದೆ.
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home // ಆರಂಭದಲ್ಲಿ ಲೋಡ್ ಆಗಿದೆ
},
{
path: '/about',
name: 'About',
// ರೂಟ್-ಮಟ್ಟದ ಕೋಡ್-ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್
// ಇದು ಈ ರೂಟ್‌ಗಾಗಿ ಪ್ರತ್ಯೇಕ ಚಂಕ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
2. ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್
ಕೆಲವೊಮ್ಮೆ, ಒಂದೇ ಪುಟದಲ್ಲಿಯೂ ಸಹ, ತಕ್ಷಣವೇ ಅಗತ್ಯವಿಲ್ಲದ ದೊಡ್ಡ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿರುತ್ತವೆ. ಇವು ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್‌ಗೆ ಸೂಕ್ತವಾದ ಅಭ್ಯರ್ಥಿಗಳಾಗಿವೆ. ಉದಾಹರಣೆಗಳು ಸೇರಿವೆ:
- ಬಳಕೆದಾರರು ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದ ನಂತರ ಕಾಣಿಸಿಕೊಳ್ಳುವ ಮೋಡಲ್‌ಗಳು ಅಥವಾ ಡೈಲಾಗ್‌ಗಳು.
- ಪೇಜ್‌ನ ಕೆಳಭಾಗದಲ್ಲಿರುವ ಸಂಕೀರ್ಣ ಚಾರ್ಟ್‌ಗಳು ಅಥವಾ ಡೇಟಾ ದೃಶ್ಯೀಕರಣಗಳು.
- ಬಳಕೆದಾರರು "edit" ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಮಾತ್ರ ಕಾಣಿಸಿಕೊಳ್ಳುವ ರಿಚ್ ಟೆಕ್ಸ್ಟ್ ಎಡಿಟರ್.
- ಬಳಕೆದಾರರು ಪ್ಲೇ ಐಕಾನ್ ಕ್ಲಿಕ್ ಮಾಡುವವರೆಗೆ ಲೋಡ್ ಆಗಬೇಕಿಲ್ಲದ ವೀಡಿಯೊ ಪ್ಲೇಯರ್ ಲೈಬ್ರರಿ.
ಇದರ ಅನುಷ್ಠಾನವು ರೂಟ್-ಆಧಾರಿತ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್‌ನಂತೆಯೇ ಇರುತ್ತದೆ ಆದರೆ ರೂಟ್ ಬದಲಾವಣೆಯ ಬದಲು ಬಳಕೆದಾರರ ಸಂವಹನದಿಂದ ಪ್ರಚೋದಿಸಲ್ಪಡುತ್ತದೆ.
ಉದಾಹರಣೆ: ಕ್ಲಿಕ್ ಮೇಲೆ ಮೋಡಲ್ ಲೋಡ್ ಮಾಡುವುದು
import React, { useState, Suspense, lazy } from 'react';
// ಮೋಡಲ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ತನ್ನದೇ ಫೈಲ್‌ನಲ್ಲಿ ಡಿಫೈನ್ ಮಾಡಲಾಗಿದೆ ಮತ್ತು ಇದು ಪ್ರತ್ಯೇಕ ಚಂಕ್‌ನಲ್ಲಿ ಇರುತ್ತದೆ
const HeavyModal = lazy(() => import('./components/HeavyModal'));
function MyPage() {
const [isModalOpen, setIsModalOpen] = useState(false);
const openModal = () => {
setIsModalOpen(true);
};
return (
Welcome to the Page
{isModalOpen && (
Loading modal... }>
setIsModalOpen(false)} />
)}