ଅପ୍ଟିମାଇଜ୍ କରନ୍ତୁ |

ପତଳା ସାସ୍ ଆମଦାନୀ |

ତୁମର ସମ୍ପତ୍ତି ପାଇପଲାଇନରେ ସାସ୍ ବ୍ୟବହାର କରିବାବେଳେ, ନିଶ୍ଚିତ କର ଯେ @importତୁମେ ଆବଶ୍ୟକ କରୁଥିବା ଉପାଦାନଗୁଡ଼ିକୁ କେବଳ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଅପ୍ଟିମାଇଜ୍ କର | Layout & Componentsତୁମର ସବୁଠୁ ବଡ ଅପ୍ଟିମାଇଜେସନ୍ ସମ୍ଭବତ our ଆମର ବିଭାଗରୁ ଆସିବ 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";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

ଯଦି ଆପଣ ଏକ ଉପାଦାନ ବ୍ୟବହାର କରୁନାହାଁନ୍ତି, ଏହାକୁ କମେଣ୍ଟ କରନ୍ତୁ କିମ୍ବା ଏହାକୁ ସଂପୂର୍ଣ୍ଣ ଭାବରେ ଡିଲିଟ୍ କରନ୍ତୁ | ଉଦାହରଣ ସ୍ୱରୂପ, ଯଦି ଆପଣ କାରୁସେଲ୍ ବ୍ୟବହାର କରୁନାହାଁନ୍ତି, ତେବେ ଆପଣଙ୍କର ସଙ୍କଳିତ CSS ରେ କିଛି ଫାଇଲ୍ ଆକାର ସଂରକ୍ଷଣ କରିବାକୁ ସେହି ଆମଦାନୀକୁ ଅପସାରଣ କରନ୍ତୁ | ମନେରଖନ୍ତୁ ସାସ୍ ଆମଦାନୀରେ କିଛି ନିର୍ଭରଶୀଳତା ଅଛି ଯାହା ଏକ ଫାଇଲ୍ ଛାଡିବା ଅଧିକ କଷ୍ଟସାଧ୍ୟ କରିପାରେ |

ଲିନ ଜାଭାସ୍କ୍ରିପ୍ଟ |

ବୁଟଷ୍ଟ୍ରାପ୍ ର ଜାଭାସ୍କ୍ରିପ୍ଟ ଆମର ପ୍ରାଥମିକ ଡିଷ୍ଟ ଫାଇଲ୍ ( bootstrap.jsଏବଂ ) ରେ ପ୍ରତ୍ୟେକ ଉପାଦାନ ଅନ୍ତର୍ଭୂକ୍ତ କରେ, ଏବଂ ଆମର ବଣ୍ଡଲ୍ ଫାଇଲ୍ ( ଏବଂ ) bootstrap.min.jsସହିତ ଆମର ପ୍ରାଥମିକ ନିର୍ଭରଶୀଳତା (ପପର୍ ) | ଯେତେବେଳେ ଆପଣ ସାସ୍ ମାଧ୍ୟମରେ କଷ୍ଟୋମାଇଜ୍ କରୁଛନ୍ତି, ସମ୍ପୃକ୍ତ ଜାଭାସ୍କ୍ରିପ୍ଟ ଅପସାରଣ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |bootstrap.bundle.jsbootstrap.bundle.min.js

ଉଦାହରଣ ସ୍ .ରୁପ, ୱେବପ୍ୟାକ୍ କିମ୍ବା ରୋଲଅପ୍ ପରି ଆପଣ ନିଜର ଜାଭାସ୍କ୍ରିପ୍ଟ ବଣ୍ଡଲର୍ ବ୍ୟବହାର କରୁଛନ୍ତି ବୋଲି ମନେକରି, ଆପଣ କେବଳ ବ୍ୟବହାର କରିବାକୁ ଯୋଜନା କରୁଥିବା ଜାଭାସ୍କ୍ରିପ୍ଟ ଆମଦାନି କରିବେ | ନିମ୍ନରେ ଥିବା ଉଦାହରଣରେ, ଆମେ କିପରି ଆମର ମୋଡାଲ୍ ଜାଭାସ୍କ୍ରିପ୍ଟକୁ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଦେଖାଇବୁ:

// 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/offcanvas';
// 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';

ଏହି ଉପାୟରେ, ଆପଣ କ Java ଣସି ଜାଭାସ୍କ୍ରିପ୍ଟକୁ ଅନ୍ତର୍ଭୂକ୍ତ କରୁନାହାଁନ୍ତି ଯାହାକୁ ଆପଣ ବଟନ୍, କାରୁସେଲ୍, ଏବଂ ଟୁଲ୍ ଟିପ୍ସ ଭଳି ଉପାଦାନ ପାଇଁ ବ୍ୟବହାର କରିବାକୁ ଇଚ୍ଛା କରନ୍ତି ନାହିଁ | ଯଦି ଆପଣ ଡ୍ରପଡାଉନ୍, ଟୁଲ୍ ଟିପ୍ସ କିମ୍ବା ପପୋଭର ଆମଦାନୀ କରୁଛନ୍ତି, ତେବେ ଆପଣଙ୍କ package.jsonଫାଇଲରେ ପପର୍ ନିର୍ଭରଶୀଳତା ତାଲିକାଭୁକ୍ତ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |

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

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

Autoprefixer .browserslistrc

ନିର୍ଦ୍ଦିଷ୍ଟ CSS ଗୁଣରେ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ବ୍ରାଉଜର୍ ଉପସର୍ଗ ଯୋଡିବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଅଟୋଫ୍ରେଫିକ୍ସର୍ ଉପରେ ନିର୍ଭର କରେ | .browserslistrcବୁଟଷ୍ଟ୍ରାପ୍ ରେପୋର ମୂଳରେ ମିଳୁଥିବା ପ୍ରିଫିକ୍ସ ଆମ ଫାଇଲ୍ ଦ୍ୱାରା ନିର୍ଦ୍ଧେଶିତ | ବ୍ରାଉଜରର ଏହି ତାଲିକାକୁ କଷ୍ଟୋମାଇଜ୍ କରିବା ଏବଂ ସାସ୍କୁ ପୁନ omp କମ୍ପାଇଲ୍ କରିବା ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଆପଣଙ୍କର ସଙ୍କଳିତ CSS ରୁ କିଛି CSS ଅପସାରଣ କରିବ, ଯଦି ସେହି ବ୍ରାଉଜର୍ କିମ୍ବା ସଂସ୍କରଣ ପାଇଁ ଭେଣ୍ଡର ପ୍ରିଫିକ୍ସ ଅଛି |

ଅବ୍ୟବହୃତ CSS

ଏହି ବିଭାଗ ସହିତ ସାହାଯ୍ୟ ଚାହୁଁ, ଦୟାକରି ଏକ PR ଖୋଲିବାକୁ ବିଚାର କରନ୍ତୁ | ଧନ୍ୟବାଦ!

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସହିତ PurgeCSS ବ୍ୟବହାର କରିବା ପାଇଁ ଆମର ଏକ ପୂର୍ବ ନିର୍ମିତ ଉଦାହରଣ ନଥିବାବେଳେ ସେଠାରେ କିଛି ସାହାଯ୍ୟକାରୀ ପ୍ରବନ୍ଧ ଏବଂ ପଦଯାତ୍ରା ଅଛି ଯାହା ସମ୍ପ୍ରଦାୟ ଲେଖିଛି | ଏଠାରେ କିଛି ବିକଳ୍ପ ଅଛି:

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

ଶେଷରେ, ଅବ୍ୟବହୃତ CSS ଉପରେ ଏହି CSS କ icks ଶଳ ପ୍ରବନ୍ଧଟି PurgeCSS ଏବଂ ଅନ୍ୟାନ୍ୟ ସମାନ ଉପକରଣଗୁଡ଼ିକୁ କିପରି ବ୍ୟବହାର କରାଯିବ ତାହା ଦର୍ଶାଏ |

କ୍ଷୁଦ୍ର ଏବଂ gzip

ଯେତେବେଳେ ସମ୍ଭବ, ଆପଣ ଆପଣଙ୍କର ଭ୍ରମଣକାରୀଙ୍କୁ ସେବା କରୁଥିବା ସମସ୍ତ କୋଡ୍ ସଙ୍କୋଚନ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ | ଯଦି ଆପଣ ବୁଟଷ୍ଟ୍ରାପ୍ ଡିଷ୍ଟ ଫାଇଲଗୁଡିକ ବ୍ୟବହାର କରୁଛନ୍ତି, ମିନିଫାଏଡ୍ ଭର୍ସନ୍ ( .min.cssଏବଂ .min.jsଏକ୍ସଟେନ୍ସନ୍ ଦ୍ୱାରା ସୂଚିତ) ରେ ରହିବାକୁ ଚେଷ୍ଟା କରନ୍ତୁ | ଯଦି ଆପଣ ନିଜ ନିଜ ବିଲ୍ଡ ସିଷ୍ଟମ ସହିତ ଉତ୍ସରୁ ବୁଟଷ୍ଟ୍ରାପ୍ ନିର୍ମାଣ କରୁଛନ୍ତି, ତେବେ HTML, CSS, ଏବଂ JS ପାଇଁ ଆପଣଙ୍କର ମିନିଫାୟର୍ଗୁଡ଼ିକୁ କାର୍ଯ୍ୟକାରୀ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |

ଅଣ-ଅବରୋଧକାରୀ ଫାଇଲଗୁଡିକ |

ସଙ୍କୋଚନ ଏବଂ ବ୍ୟବହାର କରିବା ଯଥେଷ୍ଟ ପରି ମନେହୁଏ, ଆପଣଙ୍କର ଫାଇଲଗୁଡ଼ିକୁ ଅଣ-ଅବରୋଧକାରୀ କରିବା ମଧ୍ୟ ଆପଣଙ୍କ ସାଇଟକୁ ଭଲ-ଅପ୍ଟିମାଇଜ୍ ଏବଂ ଯଥେଷ୍ଟ ଶୀଘ୍ର କରିବା ପାଇଁ ଏକ ବଡ଼ ପଦକ୍ଷେପ |

ଯଦି ଆପଣ ଗୁଗୁଲ୍ କ୍ରୋମରେ ଏକ ଲାଇଟହାଉସ୍ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରୁଛନ୍ତି, ଆପଣ ହୁଏତ FCP ଉପରେ umb ୁଣ୍ଟି ପଡ଼ିଥିବେ | ପ୍ରଥମ ବିଷୟବସ୍ତୁ ପେଣ୍ଟ ମେଟ୍ରିକ୍ ପୃଷ୍ଠା ଲୋଡିଂ ଆରମ୍ଭ କରିବା ଠାରୁ ପୃଷ୍ଠାର ବିଷୟବସ୍ତୁର ଯେକ part ଣସି ଅଂଶ ପରଦାରେ ପ୍ରଦର୍ଶିତ ହେବା ପର୍ଯ୍ୟନ୍ତ ସମୟ ମାପ କରିଥାଏ |

ଅଣ-ଜଟିଳ ଜାଭାସ୍କ୍ରିପ୍ଟ କିମ୍ବା CSS କୁ ସ୍ଥଗିତ କରି ଆପଣ FCP କୁ ଉନ୍ନତ କରିପାରିବେ | ଏହାର ଅର୍ଥ କ’ଣ? asyncସରଳ ଭାବରେ, ଜାଭାସ୍କ୍ରିପ୍ଟ କିମ୍ବା ଷ୍ଟାଇଲସିଟ୍ ଯାହା ଆପଣଙ୍କ ପୃଷ୍ଠାର ପ୍ରଥମ ପେଣ୍ଟରେ ଉପସ୍ଥିତ ହେବା ଆବଶ୍ୟକ ନାହିଁ defer|

ଏହା ସୁନିଶ୍ଚିତ କରେ ଯେ କମ୍ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ଉତ୍ସଗୁଡ଼ିକ ପରେ ଲୋଡ୍ ହୋଇଛି ଏବଂ ପ୍ରଥମ ପେଣ୍ଟକୁ ଅବରୋଧ କରୁନାହିଁ | ଅନ୍ୟ ପଟେ, ଜଟିଳ ଉତ୍ସଗୁଡିକ ଇନଲାଇନ ସ୍କ୍ରିପ୍ଟ କିମ୍ବା ଶ yles ଳୀ ଭାବରେ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇପାରେ |

ଯଦି ଆପଣ ଏହା ବିଷୟରେ ଅଧିକ ଜାଣିବାକୁ ଚାହାଁନ୍ତି, ତେବେ ଏହା ବିଷୟରେ ବହୁତ ଭଲ ଆର୍ଟିକିଲ୍ ଅଛି:

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

ସର୍ବଦା HTTPS ବ୍ୟବହାର କରନ୍ତୁ |

ତୁମର ୱେବସାଇଟ୍ କେବଳ ଉତ୍ପାଦନରେ HTTPS ସଂଯୋଗ ଉପରେ ଉପଲବ୍ଧ ହେବା ଉଚିତ | HTTPS ସମସ୍ତ ସାଇଟର ସୁରକ୍ଷା, ଗୋପନୀୟତା ଏବଂ ଉପଲବ୍ଧତାକୁ ଉନ୍ନତ କରିଥାଏ, ଏବଂ ସମ୍ବେଦନଶୀଳ ୱେବ୍ ଟ୍ରାଫିକ୍ ଭଳି କ thing ଣସି ଜିନିଷ ନାହିଁ | କେବଳ ଆପଣଙ୍କର HTTPS ଉପରେ ସେବା କରିବାକୁ ଆପଣଙ୍କର ୱେବସାଇଟ୍ ବିନ୍ୟାସ କରିବାର ପଦକ୍ଷେପଗୁଡିକ ଆପଣଙ୍କର ସ୍ଥାପତ୍ୟ ଏବଂ ୱେବ୍ ହୋଷ୍ଟିଂ ପ୍ରଦାନକାରୀ ଉପରେ ନିର୍ଭର କରି ଭିନ୍ନ ଭିନ୍ନ ହୋଇଥାଏ, ଏବଂ ଏହିପରି ଏହି ଡକସ୍ ପରିସର ବାହାରେ |

HTTPS ଉପରେ ପରିବେଷିତ ସାଇଟଗୁଡିକ HTTPS ସଂଯୋଗ ଉପରେ ସମସ୍ତ ଷ୍ଟାଇଲସିଟ୍, ସ୍କ୍ରିପ୍ଟ ଏବଂ ଅନ୍ୟାନ୍ୟ ସମ୍ପତ୍ତିକୁ ମଧ୍ୟ ପ୍ରବେଶ କରିବା ଉଚିତ | ଅନ୍ୟଥା, ଆପଣ ଉପଭୋକ୍ତାମାନଙ୍କୁ ମିଶ୍ରିତ ସକ୍ରିୟ ବିଷୟବସ୍ତୁ ପଠାଇବେ , ଯାହା ସମ୍ଭାବ୍ୟ ଦୁର୍ବଳତାକୁ ନେଇଥାଏ ଯେଉଁଠାରେ ଏକ ନିର୍ଭରଶୀଳତାକୁ ପରିବର୍ତ୍ତନ କରି ଏକ ସାଇଟ୍ ଆପୋଷ ହୋଇପାରେ | ଏହା ଉପଭୋକ୍ତାଙ୍କୁ ପ୍ରଦର୍ଶିତ ସୁରକ୍ଷା ସମସ୍ୟା ଏବଂ ବ୍ରାଉଜର୍ ଚେତାବନୀ ଦେଇପାରେ | ଆପଣ ଏକ CDN ରୁ ବୁଟଷ୍ଟ୍ରାପ୍ ପାଇଛନ୍ତି କିମ୍ବା ନିଜେ ଏହାକୁ ସେବା କରୁଛନ୍ତି, ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ଆପଣ ଏହାକୁ କେବଳ HTTPS ସଂଯୋଗ ଉପରେ ପ୍ରବେଶ କରନ୍ତି |