Vite ಅನ್ನು ಸರಳಗೊಳಿಸುವುದು
Webpack ಅಥವಾ CRA ನಂತಹ ಹಳೆಯ ಪರಿಕರಗಳು ಮೊದಲು ನಿಮ್ಮ ಇಡೀ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಬಂಡಲ್ ಮಾಡುವ ಮೂಲಕ ಕೆಲಸ ಮಾಡುತ್ತವೆ. ಅವು ಪ್ರತಿಯೊಂದು ಫೈಲ್ ಅನ್ನು ಓದುತ್ತವೆ ಮತ್ತು ಅವುಗಳನ್ನು ಒಂದೇ ದೊಡ್ಡ JavaScript ಫೈಲ್ ಆಗಿ ಸಂಯೋಜಿಸುತ್ತವೆ. ಇದು ಸಣ್ಣ ಪ್ರಾಜೆಕ್ಟ್ಗಳಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಆದರೆ ಸಾವಿರಾರು ಮಾಡ್ಯೂಲ್ಗಳನ್ನು ಹೊಂದಿರುವ ದೊಡ್ಡ ಪ್ರಾಜೆಕ್ಟ್ಗಳಿಗೆ ಇದು ವಿಫಲವಾಗುತ್ತದೆ. ದೊಡ್ಡ ಬಂಡಲ್ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸೆಕೆಂಡುಗಳು ಅಥವಾ ನಿಮಿಷಗಳು ಬೇಕಾಗುತ್ತವೆ. ನೀವು ಪ್ರತಿ ಬಾರಿ ಫೈಲ್ ಅನ್ನು ಸೇವ್ ಮಾಡಿದಾಗಲೂ, ಆ ಪರಿಕರವು ಬಂಡಲ್ನ ದೊಡ್ಡ ಭಾಗಗಳನ್ನು ಮರುನಿರ್ಮಿಸುತ್ತದೆ.
Vite ವಿಭಿನ್ನವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳು ES modules ಅನ್ನು ನೇರವಾಗಿ (natively) ಬೆಂಬಲಿಸುತ್ತವೆ. Vite ಅಭಿವೃದ್ಧಿಯ ಸಮಯದಲ್ಲಿ (development) ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಬಂಡಲ್ ಮಾಡುವುದಿಲ್ಲ. ಬ್ರೌಸರ್ ಕೇಳಿದಾಗ ಮಾತ್ರ ಅದು ಪ್ರತಿಯೊಂದು ಫೈಲ್ ಅನ್ನು ಪ್ರತ್ಯೇಕ ಮಾಡ್ಯೂಲ್ ಆಗಿ ನೀಡುತ್ತದೆ.
ಒಂದು ಬಫೆ (buffet) ರೆಸ್ಟೋರೆಂಟ್ ಬಗ್ಗೆ ಯೋಚಿಸಿ. ಬಾಗಿಲುಗಳು ತೆರೆಯುವ ಮೊದಲೇ ಶೆಫ್ ಎಲ್ಲಾ ಖಾದ್ಯಗಳನ್ನು ತಯಾರಿಸಿಡುತ್ತಾರೆ. ನೀವು ಒಂದು ಸಣ್ಣ ಬದಲಾವಣೆ ಬಯಸಿದರೆ, ಶೆಫ್ ಹೆಚ್ಚಿನ ಬಫೆ ಆಹಾರವನ್ನು ಮತ್ತೆ ತಯಾರಿಸಬೇಕಾಗುತ್ತದೆ. ನೀವು ನಿಮ್ಮ ಆಹಾರಕ್ಕಾಗಿ ಬಹಳ ಹೊತ್ತು ಕಾಯಬೇಕಾಗುತ್ತದೆ. Webpack ಹೀಗೆಯೇ ಕೆಲಸ ಮಾಡುತ್ತದೆ.
ಈಗ ಒಂದು à la carte ರೆಸ್ಟೋರೆಂಟ್ ಬಗ್ಗೆ ಯೋಚಿಸಿ. ಬಾಗಿಲುಗಳು ತಕ್ಷಣವೇ ತೆರೆಯುತ್ತವೆ. ನೀವು ಒಂದು ಖಾದ್ಯವನ್ನು ಆರ್ಡರ್ ಮಾಡುತ್ತೀರಿ. ಶೆಫ್ ಕೇವಲ ಆ ಖಾದ್ಯವನ್ನು ಮಾತ್ರ ತಯಾರಿಸುತ್ತಾರೆ. ನಿಮಗೆ ನಂತರ ಸಿಹಿ ತಿಂಡಿ (dessert) ಬೇಕಿದ್ದರೆ, ಶೆಫ್ ಕೇವಲ ಸಿಹಿ ತಿಂಡಿಯನ್ನು ಮಾತ್ರ ತಯಾರಿಸುತ್ತಾರೆ. ಇಡೀ ಮೆನುವನ್ನು ತಯಾರಿಸಲು ನೀವು ಕಾಯಬೇಕಾಗಿಲ್ಲ. Vite ಹೀಗೆಯೇ ಕೆಲಸ ಮಾಡುತ್ತದೆ.
Vite ಎರಡು ವಿಭಿನ್ನ ಅಗತ್ಯಗಳಿಗಾಗಿ ಎರಡು ವಿಭಿನ್ನ ತಂತ್ರಗಳನ್ನು ಬಳಸುತ್ತದೆ:
Development (vite dev)
- ತಂತ್ರ: ಬಂಡಲ್ ಮಾಡದೆ native ESM ಮಾಡ್ಯೂಲ್ಗಳನ್ನು ನೀಡುತ್ತದೆ.
- ವೇಗ: ತಕ್ಷಣವೇ. ಇದು ಪ್ರಾಜೆಕ್ಟ್ ಗಾತ್ರದ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿಲ್ಲ.
- ಏಕೆ: ಲೋಕಲ್ ನೆಟ್ವರ್ಕ್ ರಿಕ್ವೆಸ್ಟ್ಗಳು ವೇಗವಾಗಿರುತ್ತವೆ.
Production (vite build)
- ತಂತ್ರ: Rolldown ಬಳಸಿ ಎಲ್ಲವನ್ನೂ ಬಂಡಲ್ ಮಾಡುತ್ತದೆ.
- ವೇಗ: ಪ್ರಾಜೆಕ್ಟ್ ಗಾತ್ರದ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ.
- ಏಕೆ: ನೂರಾರು ಪ್ರತ್ಯೇಕ ಫೈಲ್ಗಳು ನಿಜವಾದ ಬಳಕೆದಾರರಿಗೆ ಅತೀ ಹೆಚ್ಚು HTTP ರಿಕ್ವೆಸ್ಟ್ಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತವೆ. ಬಂಡಲಿಂಗ್ ಮಾಡುವುದರಿಂದ ಅಂತಿಮ ಸೈಟ್ ಅವರಿಗೆ ವೇಗವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ.
ನೀವು ಕೋಡ್ ಮಾಡುವಾಗ Vite ನಿಮಗೆ ವೇಗವನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ನೀವು ಲಾಂಚ್ ಮಾಡಿದಾಗ ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೀಡುತ್ತದೆ.