ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ

ನೇರ ಸಾಸ್ ಆಮದುಗಳು

ನಿಮ್ಮ ಆಸ್ತಿ ಪೈಪ್‌ಲೈನ್‌ನಲ್ಲಿ ಸಾಸ್ ಅನ್ನು ಬಳಸುವಾಗ, @importನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಘಟಕಗಳನ್ನು ಮಾತ್ರ ಮಾಡುವ ಮೂಲಕ ನೀವು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುತ್ತೀರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. Layout & Componentsನಿಮ್ಮ ದೊಡ್ಡ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳು ನಮ್ಮ ವಿಭಾಗದಿಂದ ಬರಬಹುದು bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

ನೀವು ಘಟಕವನ್ನು ಬಳಸದಿದ್ದರೆ, ಅದನ್ನು ಕಾಮೆಂಟ್ ಮಾಡಿ ಅಥವಾ ಅದನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಅಳಿಸಿ. ಉದಾಹರಣೆಗೆ, ನೀವು ಏರಿಳಿಕೆಯನ್ನು ಬಳಸದಿದ್ದರೆ, ನಿಮ್ಮ ಕಂಪೈಲ್ ಮಾಡಿದ CSS ನಲ್ಲಿ ಕೆಲವು ಫೈಲ್ ಗಾತ್ರವನ್ನು ಉಳಿಸಲು ಆ ಆಮದು ತೆಗೆದುಹಾಕಿ. ಸಾಸ್ ಆಮದುಗಳಾದ್ಯಂತ ಕೆಲವು ಅವಲಂಬನೆಗಳಿವೆ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ, ಅದು ಫೈಲ್ ಅನ್ನು ಬಿಟ್ಟುಬಿಡಲು ಹೆಚ್ಚು ಕಷ್ಟಕರವಾಗಬಹುದು.

ನೇರ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಮ್ಮ ಪ್ರಾಥಮಿಕ ಡಿಸ್ಟ್ ಫೈಲ್‌ಗಳಲ್ಲಿ ( bootstrap.jsಮತ್ತು bootstrap.min.js), ಮತ್ತು ನಮ್ಮ ಬಂಡಲ್ ಫೈಲ್‌ಗಳೊಂದಿಗೆ ( bootstrap.bundle.jsಮತ್ತು bootstrap.bundle.min.js) ನಮ್ಮ ಪ್ರಾಥಮಿಕ ಅವಲಂಬನೆಯನ್ನು (ಪಾಪರ್) ಒಳಗೊಂಡಿರುತ್ತದೆ. ನೀವು Sass ಮೂಲಕ ಕಸ್ಟಮೈಸ್ ಮಾಡುತ್ತಿರುವಾಗ, ಸಂಬಂಧಿತ JavaScript ಅನ್ನು ತೆಗೆದುಹಾಕಲು ಮರೆಯದಿರಿ.

ಉದಾಹರಣೆಗೆ, ನೀವು ವೆಬ್‌ಪ್ಯಾಕ್ ಅಥವಾ ರೋಲಪ್‌ನಂತಹ ನಿಮ್ಮ ಸ್ವಂತ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಂಡ್ಲರ್ ಅನ್ನು ಬಳಸುತ್ತಿರುವಿರಿ ಎಂದು ಭಾವಿಸಿದರೆ, ನೀವು ಬಳಸಲು ಯೋಜಿಸಿರುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಮಾತ್ರ ನೀವು ಆಮದು ಮಾಡಿಕೊಳ್ಳುತ್ತೀರಿ. ಕೆಳಗಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಮ್ಮ ಮಾದರಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು ಎಂಬುದನ್ನು ನಾವು ತೋರಿಸುತ್ತೇವೆ:

// Import just what we need

// import 'bootstrap/js/dist/alert';
// import 'bootstrap/js/dist/button';
// import 'bootstrap/js/dist/carousel';
// import 'bootstrap/js/dist/collapse';
// import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

ಈ ರೀತಿಯಾಗಿ, ಬಟನ್‌ಗಳು, ಏರಿಳಿಕೆಗಳು ಮತ್ತು ಟೂಲ್‌ಟಿಪ್‌ಗಳಂತಹ ಘಟಕಗಳಿಗಾಗಿ ನೀವು ಬಳಸಲು ಉದ್ದೇಶಿಸದ ಯಾವುದೇ JavaScript ಅನ್ನು ನೀವು ಸೇರಿಸುತ್ತಿಲ್ಲ. ನೀವು ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು, ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಅಥವಾ ಪಾಪೋವರ್‌ಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುತ್ತಿದ್ದರೆ, ನಿಮ್ಮ package.jsonಫೈಲ್‌ನಲ್ಲಿ ಪಾಪ್ಪರ್ ಅವಲಂಬನೆಯನ್ನು ಪಟ್ಟಿ ಮಾಡಲು ಮರೆಯದಿರಿ.

import Modal from 'bootstrap/js/dist/modal'

const modal = new Modal(document.getElementById('myModal'))

ಆಟೋಪ್ರಿಫಿಕ್ಸರ್ .browserslistrc

ಕೆಲವು CSS ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಬ್ರೌಸರ್ ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸೇರಿಸಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಆಟೋಪ್ರಿಫಿಕ್ಸರ್ ಅನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ. ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ನಮ್ಮ .browserslistrcಫೈಲ್‌ನಿಂದ ನಿರ್ದೇಶಿಸಲಾಗುತ್ತದೆ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ರೆಪೊದ ಮೂಲದಲ್ಲಿ ಕಂಡುಬರುತ್ತದೆ. ಈ ಬ್ರೌಸರ್‌ಗಳ ಪಟ್ಟಿಯನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು ಮತ್ತು ಸಾಸ್ ಅನ್ನು ಮರುಕಂಪೈಲ್ ಮಾಡುವುದರಿಂದ ಆ ಬ್ರೌಸರ್ ಅಥವಾ ಆವೃತ್ತಿಗೆ ವಿಶಿಷ್ಟವಾದ ಮಾರಾಟಗಾರರ ಪೂರ್ವಪ್ರತ್ಯಯಗಳು ಇದ್ದಲ್ಲಿ, ನಿಮ್ಮ ಕಂಪೈಲ್ ಮಾಡಿದ CSS ನಿಂದ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕೆಲವು CSS ಅನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ.

ಬಳಕೆಯಾಗದ CSS

ಈ ವಿಭಾಗದಲ್ಲಿ ಸಹಾಯ ಬೇಕು, ದಯವಿಟ್ಟು PR ತೆರೆಯುವುದನ್ನು ಪರಿಗಣಿಸಿ. ಧನ್ಯವಾದಗಳು!

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ PurgeCSS ಅನ್ನು ಬಳಸುವುದಕ್ಕಾಗಿ ನಾವು ಪೂರ್ವನಿರ್ಮಿತ ಉದಾಹರಣೆಯನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೂ , ಸಮುದಾಯವು ಬರೆದ ಕೆಲವು ಉಪಯುಕ್ತ ಲೇಖನಗಳು ಮತ್ತು ದರ್ಶನಗಳಿವೆ. ಇಲ್ಲಿ ಕೆಲವು ಆಯ್ಕೆಗಳಿವೆ:

• https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772
• https://lukelowrey.com/automatically-removeunused-css-from-bootstrap-or-other-frameworks/

ಕೊನೆಯದಾಗಿ, ಬಳಕೆಯಾಗದ CSS ಕುರಿತು ಈ CSS ಟ್ರಿಕ್ಸ್ ಲೇಖನವು PurgeCSS ಮತ್ತು ಇತರ ರೀತಿಯ ಸಾಧನಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.

ಮಿನಿಫೈ ಮತ್ತು ಜಿಜಿಪ್

ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ, ನಿಮ್ಮ ಸಂದರ್ಶಕರಿಗೆ ನೀವು ಒದಗಿಸುವ ಎಲ್ಲಾ ಕೋಡ್ ಅನ್ನು ಕುಗ್ಗಿಸಲು ಮರೆಯದಿರಿ. ನೀವು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಡಿಸ್ಟ್ ಫೈಲ್‌ಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ಮಿನಿಫೈಡ್ ಆವೃತ್ತಿಗಳಿಗೆ ಅಂಟಿಕೊಳ್ಳಲು ಪ್ರಯತ್ನಿಸಿ ( .min.cssಮತ್ತು .min.jsವಿಸ್ತರಣೆಗಳಿಂದ ಸೂಚಿಸಲಾಗುತ್ತದೆ). ನಿಮ್ಮ ಸ್ವಂತ ನಿರ್ಮಾಣ ವ್ಯವಸ್ಥೆಯೊಂದಿಗೆ ನೀವು ಮೂಲದಿಂದ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದರೆ, HTML, CSS ಮತ್ತು JS ಗಾಗಿ ನಿಮ್ಮ ಸ್ವಂತ ಮಿನಿಫೈಯರ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಮರೆಯದಿರಿ.

ನಿರ್ಬಂಧಿಸದ ಫೈಲ್‌ಗಳು

ಸಂಕೋಚನವನ್ನು ಕಡಿಮೆಗೊಳಿಸುವುದು ಮತ್ತು ಬಳಸುವುದು ಸಾಕಷ್ಟು ಎಂದು ತೋರುತ್ತದೆಯಾದರೂ, ನಿಮ್ಮ ಫೈಲ್‌ಗಳನ್ನು ನಿರ್ಬಂಧಿಸದಂತೆ ಮಾಡುವುದು ನಿಮ್ಮ ಸೈಟ್ ಅನ್ನು ಉತ್ತಮವಾಗಿ ಹೊಂದುವಂತೆ ಮತ್ತು ಸಾಕಷ್ಟು ವೇಗವಾಗಿ ಮಾಡುವಲ್ಲಿ ಒಂದು ದೊಡ್ಡ ಹೆಜ್ಜೆಯಾಗಿದೆ.

ನೀವು Google Chrome ನಲ್ಲಿ ಲೈಟ್‌ಹೌಸ್ ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ , ನೀವು FCP ಯಲ್ಲಿ ಎಡವಿರಬಹುದು. ಮೊದಲ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ ಮೆಟ್ರಿಕ್ ಪುಟವು ಲೋಡ್ ಆಗಲು ಪ್ರಾರಂಭಿಸಿದಾಗಿನಿಂದ ಪುಟದ ವಿಷಯದ ಯಾವುದೇ ಭಾಗವನ್ನು ಪರದೆಯ ಮೇಲೆ ಪ್ರದರ್ಶಿಸುವ ಸಮಯವನ್ನು ಅಳೆಯುತ್ತದೆ.

ನಿರ್ಣಾಯಕವಲ್ಲದ JavaScript ಅಥವಾ CSS ಅನ್ನು ಮುಂದೂಡುವ ಮೂಲಕ ನೀವು FCP ಅನ್ನು ಸುಧಾರಿಸಬಹುದು. ಹಾಗೆಂದರೆ ಅರ್ಥವೇನು? ಸರಳವಾಗಿ, ನಿಮ್ಮ ಪುಟದ ಮೊದಲ ಪೇಂಟ್‌ನಲ್ಲಿ ಇರಬೇಕಾದ ಅಗತ್ಯವಿಲ್ಲದ JavaScript ಅಥವಾ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು asyncಅಥವಾ deferಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಗುರುತಿಸಬೇಕು.

ಕಡಿಮೆ ಪ್ರಮುಖ ಸಂಪನ್ಮೂಲಗಳನ್ನು ನಂತರ ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ ಮತ್ತು ಮೊದಲ ಬಣ್ಣವನ್ನು ನಿರ್ಬಂಧಿಸುವುದಿಲ್ಲ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಮತ್ತೊಂದೆಡೆ, ನಿರ್ಣಾಯಕ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಇನ್‌ಲೈನ್ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಅಥವಾ ಶೈಲಿಗಳಾಗಿ ಸೇರಿಸಿಕೊಳ್ಳಬಹುದು.

ನೀವು ಇದರ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿದುಕೊಳ್ಳಲು ಬಯಸಿದರೆ, ಅದರ ಬಗ್ಗೆ ಈಗಾಗಲೇ ಸಾಕಷ್ಟು ಉತ್ತಮ ಲೇಖನಗಳಿವೆ:

• https://web.dev/render-blocking-resources/
• https://web.dev/defer-non-critical-css/

ಯಾವಾಗಲೂ HTTPS ಬಳಸಿ

ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಉತ್ಪಾದನೆಯಲ್ಲಿ HTTPS ಸಂಪರ್ಕಗಳಲ್ಲಿ ಮಾತ್ರ ಲಭ್ಯವಿರಬೇಕು. HTTPS ಎಲ್ಲಾ ಸೈಟ್‌ಗಳ ಭದ್ರತೆ, ಗೌಪ್ಯತೆ ಮತ್ತು ಲಭ್ಯತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ ಮತ್ತು ಸೂಕ್ಷ್ಮವಲ್ಲದ ವೆಬ್ ಟ್ರಾಫಿಕ್‌ನಂತಹ ಯಾವುದೇ ವಿಷಯಗಳಿಲ್ಲ . ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು HTTPS ಮೂಲಕ ಪ್ರತ್ಯೇಕವಾಗಿ ಒದಗಿಸುವಂತೆ ಕಾನ್ಫಿಗರ್ ಮಾಡುವ ಹಂತಗಳು ನಿಮ್ಮ ಆರ್ಕಿಟೆಕ್ಚರ್ ಮತ್ತು ವೆಬ್ ಹೋಸ್ಟಿಂಗ್ ಪೂರೈಕೆದಾರರನ್ನು ಅವಲಂಬಿಸಿ ವ್ಯಾಪಕವಾಗಿ ಬದಲಾಗುತ್ತವೆ ಮತ್ತು ಆದ್ದರಿಂದ ಈ ಡಾಕ್ಸ್‌ಗಳ ವ್ಯಾಪ್ತಿಯನ್ನು ಮೀರಿದೆ.

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