ಸ್ಟಾಟಿಕ್ ಆಸೆಟ್ ನಿರ್ವಹಣೆ: ಕ್ಯಾಶೆ ಬಸ್ಟಿಂಗ್‌ನೊಂದಿಗೆ CDN ಡೆಲಿವರಿ

ಈ ಲೇಖನವು CSS, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, ಮತ್ತು ಇತರ ಸ್ಟಾಟಿಕ್ ಆಸೆಟ್‌ಗಳನ್ನು ಹೇಗೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿರ್ವಹಿಸಿ ತಲುಪಿಸುತ್ತೇವೆ ಎಂಬುದನ್ನು ವಿವರಿಸುತ್ತದೆ.

ಸಮಸ್ಯೆ: ಸ್ಟಾಟಿಕ್ ಆಸೆಟ್‌ಗಳಿಗೆ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅಗತ್ಯವಿದೆ

ಒಂದು ಸಾಮಾನ್ಯ ಪುಟ ಲೋಡ್ ಆಗುವುದು:

• CSS ಫೈಲ್‌ಗಳು: ಲೇಔಟ್ ಮತ್ತು ಡಿಸೈನ್‌ಗಾಗಿ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು

• ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳು: ಅಪ್ಲಿಕೇಶನ್ ಕೋಡ್ ಮತ್ತು ಲೈಬ್ರರಿಗಳು

• ಚಿತ್ರಗಳು: ಉತ್ಪನ್ನ ಚಿತ್ರಗಳು, ಥಂಬ್‌ನೇಲ್‌ಗಳು, ಐಕಾನ್‌ಗಳು

• ಫಾಂಟ್‌ಗಳು: ಟೈಪೋಗ್ರಫಿಗಾಗಿ ವೆಬ್ ಫಾಂಟ್‌ಗಳು

ಆಪ್ಟಿಮೈಸೇಶನ್ ಇಲ್ಲದೆ:

• ನಿಧಾನ ಡೌನ್‌ಲೋಡ್‌ಗಳು: ದೊಡ್ಡ ಫೈಲ್‌ಗಳಿಗೆ ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ

• ಕ್ಯಾಶಿಂಗ್ ಇಲ್ಲ: ಪ್ರತಿ ಭೇಟಿಯಲ್ಲೂ ಮರು-ಡೌನ್‌ಲೋಡ್

• ಕಂಪ್ರೆಶನ್ ಇಲ್ಲ: ವ್ಯರ್ಥ ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್

• CDN ಇಲ್ಲ: ಜಾಗತಿಕ ಬಳಕೆದಾರರಿಗೆ ನಿಧಾನ

ಇದರ ಪರಿಣಾಮ 3-5 ಸೆಕೆಂಡ್ ಪುಟ್ ಲೋಡ್‌ಗಳಾಗುತ್ತವೆ.

ಪರಿಹಾರ: S3 + ಕ್ಲೌಡ್‌ಫ್ರಂಟ್ + ಕ್ಯಾಶೆ ಬಸ್ಟಿಂಗ್

ನಾವು ಮೂರು-ಭಾಗದ ತಂತ್ರವನ್ನು ಬಳಸುತ್ತೇವೆ:

1. S3 ಸಂಗ್ರಹಣೆ: ಆಸೆಟ್‌ಗಳಿಗೆ ಸ್ಕೇಲಬಲ್ ಆಬ್ಜೆಕ್ಟ್ ಸ್ಟೋರೇಜ್
2. ಕ್ಲೌಡ್‌ಫ್ರಂಟ್ CDN: ವೇಗವಾದ ಡೆಲಿವರಿಗಾಗಿ ಜಾಗತಿಕ ಎಡ್ಜ್ ಲೊಕೇಶನ್‌ಗಳು
3. ಕ್ಯಾಶೆ ಬಸ್ಟಿಂಗ್: ವರ್ಶನ್-ಆಧಾರಿತ URLಗಳು ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಒತ್ತಾಯಿಸುತ್ತವೆ

ಸ್ಟಾಟಿಕ್ ಆಸೆಟ್ ಸಂಗ್ರಹಣೆ

ಸ್ಟಾಟಿಕ್ ಆಸೆಟ್‌ಗಳನ್ನು S3 ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾಗಿದೆ:

• S3 ಬಕೆಟ್: ಸ್ಟಾಟಿಕ್ ಫೈಲ್‌ಗಳಿಗೆ ಆಬ್ಜೆಕ್ಟ್ ಸ್ಟೋರೇಜ್

• ವಿಷಯ: CSS, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, ಚಿತ್ರಗಳು, ಫಾಂಟ್‌ಗಳು

• ಸಂಘಟನೆ: ಆಸೆಟ್ ಪ್ರಕಾರದಿಂದ ರಚನಾತ್ಮಕವಾಗಿ

ಕ್ಲೌಡ್‌ಫ್ರಂಟ್ ಡೆಲಿವರಿ

ಕ್ಲೌಡ್‌ಫ್ರಂಟ್ ಸ್ಟಾಟಿಕ್ ಆಸೆಟ್‌ಗಳನ್ನು ಸೇವೆ ಸಲ್ಲಿಸುತ್ತದೆ:

• ಎಡ್ಜ್ ಲೊಕೇಶನ್‌ಗಳು: ವೇಗವಾದ ಡೆಲಿವರಿಗಾಗಿ ಜಾಗತಿಕ CDN

• ಕ್ಯಾಶಿಂಗ್: ಸ್ಟಾಟಿಕ್ ಆಸೆಟ್‌ಗಳಿಗೆ ದೀರ್ಘ TTL

• ಕಂಪ್ರೆಶನ್: ಪಠ್ಯ-ಆಧಾರಿತ ಆಸೆಟ್‌ಗಳಿಗೆ Gzip

• SSL/TLS: ಎಲ್ಲಾ ಆಸೆಟ್ ಡೆಲಿವರಿಗಾಗಿ HTTPS

ಕ್ಯಾಶೆ ಬಸ್ಟಿಂಗ್

ನಾವು ಕ್ಯಾಶೆ ಬಸ್ಟಿಂಗ್‌ಗಾಗಿ ವರ್ಶನಿಂಗ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ:

• ವರ್ಶನ್ ಸಂಖ್ಯೆಗಳು: ಫೈಲ್‌ನೇಮ್‌ನಲ್ಲಿ ಆಸೆಟ್ ವರ್ಶನ್

• ಮ್ಯಾನಿಫೆಸ್ಟ್: ಆಸೆಟ್ ವರ್ಶನ್‌ಗಳ ಕೇಂದ್ರ ರಿಜಿಸ್ಟ್ರಿ

• ಸ್ವಯಂಚಾಲಿತ ಅಪ್‌ಡೇಟ್‌ಗಳು: ಹೊಸ ವರ್ಶನ್ ಕ್ಯಾಶೆ ಅಮಾನ್ಯತೆಯನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ

ಆಸೆಟ್ ಆಪ್ಟಿಮೈಸೇಶನ್

ನಾವು ಆಸೆಟ್‌ಗಳನ್ನು ಪರಿಣಾಮಕಾರಿತ್ವಕ್ಕಾಗಿ ಆಪ್ಟಿಮೈಸ್ ಮಾಡುತ್ತೇವೆ:

• ಮಿನಿಫಿಕೇಶನ್: CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಿನಿಫಿಕೇಶನ್

• ಚಿತ್ರ ಆಪ್ಟಿಮೈಸೇಶನ್: WebP ಫಾರ್ಮ್ಯಾಟ್, ರೆಸ್ಪಾನ್ಸಿವ್ ಚಿತ್ರಗಳು

• ಸ್ಪ್ರೈಟ್ ಶೀಟ್‌ಗಳು: ಐಕಾನ್‌ಗಳಿಗೆ CSS ಸ್ಪ್ರೈಟ್‌ಗಳು

• ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್: ನಾನ್-ಕ್ರಿಟಿಕಲ್ ಆಸೆಟ್‌ಗಳಿಗೆ ಲೇಜಿ ಲೋಡಿಂಗ್

ಆಸೆಟ್ ಪೈಪ್‌ಲೈನ್

ಆಸೆಟ್ ಪೈಪ್‌ಲೈನ್ ಈ ಹಂತಗಳ ಮೂಲಕ ಹರಿಯುತ್ತದೆ:

1. ಮೂಲ ಆಸೆಟ್‌ಗಳು: ಮೂಲ CSS, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, ಮತ್ತು ಚಿತ್ರಗಳು
2. ಮಿನಿಫಿಕೇಶನ್: ವೈಟ್‌ಸ್ಪೇಸ್ ತೆಗೆದುಹಾಕಿ, ವೇರಿಯಬಲ್ ಹೆಸರುಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಿ
3. ವರ್ಶನಿಂಗ್: ಫೈಲ್‌ನೇಮ್‌ಗೆ ವರ್ಶನ್ ಹ್ಯಾಶ್ ಸೇರಿಸಿ
4. S3 ಅಪ್‌ಲೋಡ್: ಆಬ್ಜೆಕ್ಟ್ ಸ್ಟೋರೇಜ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ
5. ಕ್ಲೌಡ್‌ಫ್ರಂಟ್ CDN: ಎಡ್ಜ್ ಲೊಕೇಶನ್‌ಗಳಿಗೆ ವಿತರಿಸಿ
6. ಬ್ರೌಸರ್ ಕ್ಯಾಶೆ: ಕ್ಲೈಂಟ್-ಸೈಡ್ ಕ್ಯಾಶಿಂಗ್

ಆಸೆಟ್ ಸೇರ್ಪಡೆ

ಆಸೆಟ್‌ಗಳನ್ನು ಟೆಂಪ್ಲೇಟ್‌ಗಳಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ:

• CSS: <link rel="stylesheet">

• ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್: <script src="">

• ಚಿತ್ರಗಳು: <img src="">

• ವರ್ಶನ್: ಮ್ಯಾನಿಫೆಸ್ಟ್‌ನಿಂದ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸೇರಿಸಲಾಗಿದೆ

ಸಾರಾಂಶ

ಸ್ಟಾಟಿಕ್ ಆಸೆಟ್ ನಿರ್ವಹಣೆಯು ಒದಗಿಸುತ್ತದೆ:

• S3 ಸಂಗ್ರಹಣೆ: CSS, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, ಚಿತ್ರಗಳು, ಫಾಂಟ್‌ಗಳು

• ಕ್ಲೌಡ್‌ಫ್ರಂಟ್ CDN: ವೇಗವಾದ ಜಾಗತಿಕ ಡೆಲಿವರಿ

• ಕ್ಯಾಶೆ ಬಸ್ಟಿಂಗ್: ಅಪ್‌ಡೇಟ್‌ಗಳಿಗೆ ವರ್ಶನ್ ಸಂಖ್ಯೆಗಳು

• ಆಪ್ಟಿಮೈಸೇಶನ್: ಮಿನಿಫಿಕೇಶನ್, ಕಂಪ್ರೆಶನ್, ಆಪ್ಟಿಮೈಸೇಶನ್

• ಸ್ವಯಂಚಾಲಿತ ಅಪ್‌ಡೇಟ್‌ಗಳು: ವರ್ಶನ್ ಆಸೆಟ್ ಡೆಲಿವರಿ