اصلاح ڪرڻ

لين ساس واردات

جڏهن توهان جي اثاثن جي پائپ لائن ۾ Sass استعمال ڪندي، پڪ ڪريو ته توهان بوٽ اسٽراپ کي بهتر بڻايو صرف @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";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

جيڪڏهن توهان هڪ جزو استعمال نه ڪري رهيا آهيو، ان کي تبصرو ڪريو يا ان کي مڪمل طور تي حذف ڪريو. مثال طور، جيڪڏهن توهان carousel استعمال نه ڪري رهيا آهيو، توهان جي مرتب ڪيل CSS ۾ ڪجهه فائل سائيز کي بچائڻ لاءِ ان درآمد کي هٽايو. ذهن ۾ رکو ته ساس درآمدن ۾ ڪجهه انحصار آهن جيڪي شايد فائل کي ختم ڪرڻ وڌيڪ ڏکيو بڻائي سگھن ٿيون.

Lean JavaScript

بوٽ اسٽريپ جي جاوا اسڪرپٽ اسان جي پرائمري ڊسٽ فائلن ۾ هر جزو شامل آهي ( bootstrap.js۽ bootstrap.min.js)، ۽ اسان جي بنيادي انحصار (پاپر) اسان جي بنڊل فائلن سان ( bootstrap.bundle.js۽ bootstrap.bundle.min.js). جڏهن توهان Sass ذريعي ترتيب ڏئي رهيا آهيو، پڪ ڪريو ته لاڳاپيل جاوا اسڪرپٽ کي هٽايو.

مثال طور، فرض ڪريو ته توھان پنھنجو جاوا اسڪرپٽ بنڊلر استعمال ڪري رھيا آھيو Webpack يا رول اپ، توھان صرف ان جاوا اسڪرپٽ درآمد ڪندا جيڪو توھان استعمال ڪرڻ جو ارادو ڪيو آھي. هيٺ ڏنل مثال ۾، اسان ڏيکاريون ٿا ته صرف اسان جي ماڊل جاوا اسڪرپٽ کي ڪيئن شامل ڪيو وڃي:

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

اهڙيءَ طرح، توهان ڪنهن به جاوا اسڪرپٽ کي شامل نه ڪري رهيا آهيو جنهن جو توهان استعمال ڪرڻ جو ارادو نه ڪيو آهي حصن جهڙوڪ بٽڻ، ڪارسيلز، ۽ ٽول ٽائپس لاءِ. جيڪڏھن توھان درآمد ڪري رھيا آھيو ڊراپ ڊائونز، ٽول ٽائپس يا پاپ اوور، پڪ ڪريو ته توھان جي package.jsonفائل ۾ پوپر انحصار کي لسٽ ڪريو.

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

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

Autoprefixer .browserslistrc

بوٽ اسٽريپ خود بخود برائوزر پريفڪسز کي مخصوص CSS ملڪيتن ۾ شامل ڪرڻ لاءِ Autoprefixer تي منحصر ڪري ٿو. اڳڪٿيون اسان جي .browserslistrcفائل طرفان ترتيب ڏنل آهن، بوٽ اسٽراپ ريپو جي روٽ ۾ مليا آهن. برائوزرن جي هن لسٽ کي ترتيب ڏيڻ ۽ Sass کي ٻيهر ترتيب ڏيڻ سان خودڪار طريقي سان توهان جي مرتب ڪيل 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 ۽ ٻيا ساڳيا اوزار.

Minify ۽ gzip

جڏهن به ممڪن هجي، پڪ ڪريو ته سڀني ڪوڊ کي دٻايو جيڪو توهان پنهنجي مهمانن جي خدمت ڪندا آهيو. جيڪڏھن توھان استعمال ڪري رھيا آھيو Bootstrap dist فائلون، ڪوشش ڪريو miniified ورجن تي ھلڻ جي (ظاھر ڪيل .min.css۽ ايڪسٽينشنز .min.js). جيڪڏهن توهان پنهنجي تعميراتي نظام سان سرچشمي مان بوٽ اسٽريپ ٺاهي رهيا آهيو، پڪ ڪريو ته HTML، CSS، ۽ JS لاءِ پنهنجا پنهنجا منفائر لاڳو ڪريو.

غير بلاڪ فائلون

جڏهن ته ڪمپريشن کي گھٽائڻ ۽ استعمال ڪرڻ ڪافي لڳي سگھي ٿو، توھان جي فائلن کي غير بلاڪ ڪرڻ پڻ ھڪڙو وڏو قدم آھي توھان جي سائيٽ کي بھترين ۽ تيز ڪرڻ ۾.

جيڪڏهن توهان گوگل ڪروم ۾ لائيٽ هائوس پلگ ان استعمال ڪري رهيا آهيو، توهان شايد ايف سي پي تي ٿڪايو هجي. پهريون مواد وارو رنگ ميٽرڪ ان وقت کي ماپي ٿو جڏهن صفحو لوڊ ٿيڻ شروع ٿئي ٿو جڏهن صفحي جي مواد جو ڪو حصو اسڪرين تي پيش ڪيو وڃي.

توهان غير نازڪ JavaScript يا CSS کي ملتوي ڪندي FCP کي بهتر ڪري سگهو ٿا. هن جو مطلب ڇا آهي؟ بس، جاوا اسڪرپٽ يا اسٽائل شيٽ جيڪي توهان جي صفحي جي پهرين رنگ تي موجود هجڻ جي ضرورت ناهي انهن سان نشان لڳل هجڻ گهرجي asyncيا deferخاصيتون.

انهي کي يقيني بڻائي ٿو ته گهٽ اهم وسيلن کي بعد ۾ لوڊ ڪيو ويو آهي ۽ پهرين رنگ کي بلاڪ نه ڪيو وڃي. ٻئي طرف، نازڪ وسيلا شامل ڪري سگھجن ٿا ان لائن اسڪرپٽس يا اسلوب جي طور تي.

جيڪڏهن توهان ان بابت وڌيڪ سکڻ چاهيو ٿا، اتي اڳ ۾ ئي ان بابت ڪيترائي عظيم مضمون آهن:

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

هميشه HTTPS استعمال ڪريو

توهان جي ويب سائيٽ صرف پيداوار ۾ HTTPS ڪنيڪشن تي دستياب هجڻ گهرجي. HTTPS سڀني سائيٽن جي سيڪيورٽي، رازداري، ۽ دستيابي کي بهتر بڻائي ٿو، ۽ غير حساس ويب ٽرئفڪ وانگر ڪا به شيء ناهي . توهان جي ويب سائيٽ کي ترتيب ڏيڻ جا قدم خاص طور تي HTTPS تي خدمت ڪرڻ لاءِ مختلف هوندا آهن توهان جي فن تعمير ۽ ويب هوسٽنگ فراهم ڪندڙ جي لحاظ کان، ۽ اهڙيءَ طرح انهن دستاويزن جي دائري کان ٻاهر آهن.

HTTPS تي خدمت ڪيل سائيٽن کي پڻ سڀني اسٽائل شيٽ، اسڪرپٽ، ۽ ٻين اثاثن کي HTTPS ڪنيڪشن تي رسائي ڪرڻ گهرجي. ٻي صورت ۾، توهان موڪلي رهيا آهيو صارفين کي مخلوط فعال مواد , جنهن جي نتيجي ۾ امڪاني نقصانات جتي هڪ سائيٽ انحصار کي تبديل ڪندي سمجهي سگهجي ٿو. اهو ڪري سگھي ٿو سيڪيورٽي مسئلن ۽ برائوزر ۾ ڊيڄاريندڙن کي ڏيکاريل صارفين کي. ڇا توهان CDN کان بوٽ اسٽريپ حاصل ڪري رهيا آهيو يا ان کي پاڻ جي خدمت ڪري رهيا آهيو، پڪ ڪريو ته توهان ان کي صرف HTTPS ڪنيڪشن تي رسائي ڪريو ٿا.