ပိုကောင်းအောင် လုပ်ပါ။

Lean Sass တင်သွင်းမှု

@importသင်၏ပိုင်ဆိုင်မှုပိုက်လိုင်းတွင် Sass ကိုအသုံးပြုသောအခါ၊ သင်လိုအပ်သောအစိတ်အပိုင်းများကို သာထည့်သွင်းခြင်းဖြင့် Bootstrap ကိုအကောင်းဆုံးဖြစ်အောင်သေချာအောင်လုပ်ပါ ။ သင်၏ အကြီးမားဆုံး ပိုမိုကောင်းမွန်အောင် လုပ်ဆောင်မှုများသည် ကျွန်ုပ်တို့၏ Layout & Componentsကဏ္ဍမှ လာပေလိမ့်မည် bootstrap.scss။

// Configuration
@import "functions";
@import "variables";
@import "maps";
@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 တွင် ဖိုင်အရွယ်အစားအချို့ကို သိမ်းဆည်းရန် ထိုတင်သွင်းမှုကို ဖယ်ရှားပါ။ ဖိုင်တစ်ခုကို ချန်လှပ်ရန် ပိုမိုခက်ခဲစေမည့် Sass တင်သွင်းမှုများတွင် မှီခိုမှုအချို့ရှိကြောင်း သတိရပါ။

ပျော့ပျောင်းသော JavaScript

Bootstrap ၏ JavaScript တွင် ကျွန်ုပ်တို့၏ ပင်မအဝေးဖိုင်များ ( bootstrap.jsနှင့် ) နှင့် ကျွန်ုပ်တို့၏ အစုအစည်းဖိုင်များ ( နှင့် bootstrap.min.jsPopper) နှင့် ကျွန်ုပ်တို့၏ အဓိကမှီခိုမှု (Popper) တို့ပင် ပါဝင်ပါသည် ။ Sass မှတစ်ဆင့် စိတ်ကြိုက်ပြင်ဆင်နေချိန်တွင် သက်ဆိုင်ရာ JavaScript ကို ဖယ်ရှားရန် သေချာပါစေ။bootstrap.bundle.jsbootstrap.bundle.min.js

ဥပမာအားဖြင့်၊ သင်သည် Webpack၊ Parcel သို့မဟုတ် Vite ကဲ့သို့သော သင့်ကိုယ်ပိုင် JavaScript အစုအဝေးကို အသုံးပြုနေသည်ဟု ယူဆပါက သင်အသုံးပြုရန် စီစဉ်ထားသည့် JavaScript ကိုသာ တင်သွင်းမည်ဖြစ်သည်။ အောက်ဖော်ပြပါ ဥပမာတွင်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ modal 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/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';

ဤနည်းအားဖြင့်၊ ခလုတ်များ၊ အဝိုင်းလေးများနှင့် ကိရိယာအကြံပြုချက်များကဲ့သို့သော အစိတ်အပိုင်းများအတွက် သင်အသုံးပြုရန် ရည်ရွယ်ထားသော မည်သည့် JavaScript ကိုမျှ သင်မပါဝင်ပါ။ အကယ်၍ သင်သည် dropdowns၊ tooltips သို့မဟုတ် popovers ကိုတင်သွင်းနေပါက၊ သင်၏ package.jsonဖိုင်ရှိ Popper မှီခိုမှုကို စာရင်းပြုစုရန် သေချာပါစေ။

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

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

အလိုအလျောက် ကြိုတင်ပြင်ဆင်မှု .browserslistrc

အချို့သော CSS ဂုဏ်သတ္တိများတွင် ဘရောက်ဆာရှေ့ဆက်များကို အလိုအလျောက်ထည့်ရန် Bootstrap သည် Autoprefixer ပေါ်တွင် မူတည်သည်။ .browserslistrcBootstrap repo ၏ root တွင်တွေ့ရှိရသော prefix များကိုကျွန်ုပ်တို့၏ ဖိုင်မှသတ်မှတ်ပေးသည်။ ဤဘရောက်ဆာများစာရင်းကို စိတ်ကြိုက်ပြင်ဆင်ခြင်းနှင့် Sass ကို ပြန်လည်ပေါင်းစည်းခြင်းသည် အဆိုပါဘရောက်ဆာ သို့မဟုတ် ဗားရှင်းအတွက် သီးသန့်ရောင်းချသူရှေ့ဆက်များရှိနေပါက သင်၏စုစည်းထားသော CSS မှ CSS အချို့ကို အလိုအလျောက်ဖယ်ရှားပေးမည်ဖြစ်သည်။

အသုံးမပြုသော CSS

ဤကဏ္ဍအတွက် အကူအညီပေးလိုသော၊ ကျေးဇူးပြု၍ PR တစ်ခုဖွင့်ရန် စဉ်းစားပါ။ ကျေးဇူးတင်ပါတယ်!

ကျွန်ုပ်တို့တွင် PurgeCSS ကို Bootstrap ဖြင့်အသုံးပြုရန်အတွက်ကြိုတင်တည်ဆောက်ထားသောဥပမာတစ်ခု မရှိသော်လည်း ၊ အသိုင်းအဝိုင်းမှရေးသားထားသောအသုံးဝင်သောဆောင်းပါးများနှင့်လမ်းညွှန်ချက်များအချို့ရှိသည်။ ဤသည်မှာ ရွေးချယ်စရာအချို့ဖြစ်သည်-

• 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 Tricks ဆောင်းပါးသည် PurgeCSS နှင့် အခြားအလားတူကိရိယာများကို အသုံးပြုနည်းကို ပြသထားသည်။

minify နှင့် gzip

ဖြစ်နိုင်သည့်အခါတိုင်း၊ သင်၏လာရောက်လည်ပတ်သူများအတွက် သင်ဝန်ဆောင်မှုပေးသည့်ကုဒ်အားလုံးကို ချုံ့ရန်သေချာပါစေ။ အကယ်၍ သင်သည် Bootstrap dist ဖိုင်များကို အသုံးပြုနေပါက၊ သေးငယ်သောဗားရှင်းများ ( .min.cssနှင့် .min.jsextensions များက ဖော်ပြသည်) ကို မှီဝဲကြည့်ပါ။ သင့်ကိုယ်ပိုင်တည်ဆောက်မှုစနစ်ဖြင့် အရင်းအမြစ်မှ Bootstrap ကို တည်ဆောက်နေပါက HTML၊ CSS နှင့် JS အတွက် သင့်ကိုယ်ပိုင် minifiers များကို အကောင်အထည်ဖော်ရန် သေချာပါစေ။

ပိတ်ဆို့ခြင်းမပြုသောဖိုင်များ

ဖိသိပ်မှုကို လျှော့ချခြင်းနှင့် အသုံးပြုခြင်းသည် လုံလောက်သည်ဟု ထင်ရသော်လည်း၊ သင်၏ဖိုင်များကို ပိတ်ဆို့ခြင်းမဟုတ်သော ဖိုင်များကို ပြုလုပ်ခြင်းသည် သင့်ဆိုဒ်ကို ကောင်းမွန်ကောင်းမွန်ပြီး လုံလောက်အောင် မြန်ဆန်စေရန်အတွက် ကြီးမားသောခြေလှမ်းတစ်ခုဖြစ်သည်။

အကယ်၍ သင်သည် Google Chrome တွင် Lighthouse ပလပ်အင်ကို အသုံးပြုနေပါက၊ သင်သည် FCP ကို ​​မှားသွားနိုင်သည်။ ပထမဆုံး အကြောင်းအရာပြည့်သော ပန်းချီ မက်ထရစ်သည် စာမျက်နှာကို စတင်ဖွင့်သည့်အချိန်မှ စခရင်ပေါ်တွင် စာမျက်နှာ၏ အကြောင်းအရာတစ်ခုခုကို ပြန်ဆိုသည့်အခါအထိ အချိန်ကို တိုင်းတာသည်။

အရေးမကြီးသော JavaScript သို့မဟုတ် CSS ကို ရွှေ့ဆိုင်းခြင်းဖြင့် FCP ကို ​​မြှင့်တင်နိုင်သည်။ ဘာကိုဆိုလိုတာလဲ? ရိုးရိုးရှင်းရှင်းအားဖြင့်၊ သင့်စာမျက်နှာ၏ ပထမဆုံးဆေးခြယ်မှုတွင် ပါဝင်ရန်မလိုအပ်သော JavaScript သို့မဟုတ် ပုံစံစာရွက်များကို asyncသို့မဟုတ် deferရည်ညွှန်းချက်များဖြင့် အမှတ်အသားပြုသင့်သည်။

ဒါက အရေးမကြီးတဲ့ အရင်းအမြစ်တွေကို နောက်ပိုင်းမှာ တင်ပြီး ပထမဆေးကို မပိတ်ဆို့စေဘူးဆိုတာ သေချာစေတယ်။ အခြားတစ်ဖက်တွင်၊ အရေးကြီးသောအရင်းအမြစ်များကို inline scripts သို့မဟုတ် styles များအဖြစ် ထည့်သွင်းနိုင်သည်။

ဤအကြောင်းပိုမိုလေ့လာလိုပါက၊ ၎င်းနှင့်ပတ်သက်သော ကောင်းမွန်သော ဆောင်းပါးများစွာ ရှိနေပြီဖြစ်သည်။

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

HTTPS ကို အမြဲသုံးပါ။

သင့်ဝဘ်ဆိုဒ်သည် ထုတ်လုပ်မှုတွင် HTTPS ချိတ်ဆက်မှုများမှတဆင့်သာ ရနိုင်ရပါမည်။ HTTPS သည် ဝဘ်ဆိုက်အားလုံး၏ လုံခြုံရေး၊ ကိုယ်ရေးကိုယ်တာနှင့် ရရှိနိုင်မှုကို ပိုမိုကောင်းမွန်စေပြီး အာရုံမခံသော ဝဘ်အသွားအလာများကဲ့သို့ အရာမရှိပါ ။ HTTPS တွင် သီးသန့်ဝန်ဆောင်မှုပေးမည့် သင့်ဝဘ်ဆိုဒ်ကို ပြင်ဆင်သတ်မှတ်ရန် အဆင့်များသည် သင့်ဗိသုကာနှင့် ဝဘ်ဆိုဒ်ဝန်ဆောင်မှုပေးသူအပေါ် မူတည်ပြီး ကျယ်ပြန့်စွာ ကွဲပြားသောကြောင့် ဤစာရွက်စာတမ်းများ၏ အတိုင်းအတာထက်ကျော်လွန်ပါသည်။

HTTPS တွင် ဝန်ဆောင်မှုပေးသည့်ဆိုက်များသည် HTTPS ချိတ်ဆက်မှုများမှတစ်ဆင့် ပုံစံစာရွက်များ၊ scripts များနှင့် အခြားပိုင်ဆိုင်မှုအားလုံးကိုလည်း ဝင်ရောက်ကြည့်ရှုနိုင်မည်ဖြစ်သည်။ မဟုတ်ပါက၊ သင်သည် အသုံးပြုသူများ ရောနှောထားသော တက်ကြွသော အကြောင်းအရာများကို ပေးပို့လိမ့်မည်ဖြစ်ပြီး ၊ ဆိုက်တစ်ခုအား မှီခိုမှုကို ပြောင်းလဲခြင်းဖြင့် အပေးအယူလုပ်နိုင်သည့် အလားအလာရှိသော အားနည်းချက်များဆီသို့ ပို့ဆောင်မည်ဖြစ်သည်။ ၎င်းသည် သုံးစွဲသူများကို ပြသသည့် လုံခြုံရေးဆိုင်ရာ ပြဿနာများနှင့် ဘရောက်ဆာအတွင်း သတိပေးချက်များကို ဖြစ်ပေါ်စေနိုင်သည်။ သင်သည် CDN မှ Bootstrap ကို ရယူနေသည်ဖြစ်စေ သို့မဟုတ် ၎င်းကို သင်ကိုယ်တိုင် ဝန်ဆောင်မှုပေးသည်ဖြစ်စေ HTTPS ချိတ်ဆက်မှုများမှတဆင့်သာ ၎င်းကို ဝင်ရောက်ကြည့်ရှုကြောင်း သေချာပါစေ။