بہتر بنائیں

دبلی ساس درآمدات

اپنی اثاثہ پائپ لائن میں Sass کا استعمال کرتے وقت، یقینی بنائیں کہ آپ بوٹسٹریپ کو صرف @importان اجزاء کو بہتر بناتے ہیں جن کی آپ کو ضرورت ہے۔ آپ کی سب سے بڑی اصلاح ممکنہ طور 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";

اگر آپ کوئی جزو استعمال نہیں کر رہے ہیں، تو اس پر تبصرہ کریں یا اسے مکمل طور پر حذف کر دیں۔ مثال کے طور پر، اگر آپ carousel استعمال نہیں کر رہے ہیں، تو اپنے مرتب کردہ CSS میں فائل کا کچھ سائز بچانے کے لیے اس درآمد کو ہٹا دیں۔ ذہن میں رکھیں کہ Sass کی درآمدات میں کچھ انحصار ہیں جو فائل کو چھوڑنا زیادہ مشکل بنا سکتے ہیں۔

دبلی پتلی جاوا اسکرپٹ

bootstrap.jsبوٹسٹریپ کے جاوا اسکرپٹ میں ہماری پرائمری ڈسٹ فائلوں ( اور ) میں ہر جزو شامل ہوتا ہے ، اور یہاں تک کہ ہماری بنڈل فائلوں ( اور ) bootstrap.min.jsکے ساتھ ہمارا بنیادی انحصار (پاپر) بھی شامل ہے۔ جب آپ Sass کے ذریعے تخصیص کر رہے ہوں تو متعلقہ JavaScript کو ہٹانا یقینی بنائیں۔bootstrap.bundle.jsbootstrap.bundle.min.js

مثال کے طور پر، یہ فرض کرتے ہوئے کہ آپ اپنا JavaScript بنڈلر جیسے Webpack، Parcel، یا Vite استعمال کر رہے ہیں، آپ صرف وہی 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 شامل نہیں کر رہے ہیں جسے آپ بٹن، carousels اور ٹول ٹپس جیسے اجزاء کے لیے استعمال کرنے کا ارادہ نہیں رکھتے ہیں۔ 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 Tricks مضمون دکھاتا ہے کہ PurgeCSS اور اسی طرح کے دوسرے ٹولز کو کیسے استعمال کیا جائے۔

Minify اور gzip

جب بھی ممکن ہو، تمام کوڈ کو کمپریس کرنا یقینی بنائیں جو آپ اپنے مہمانوں کو پیش کرتے ہیں۔ اگر آپ بوٹسٹریپ ڈسٹ فائلیں استعمال کر رہے ہیں تو، چھوٹے ورژن پر قائم رہنے کی کوشش کریں ( .min.cssاور .min.jsایکسٹینشنز کے ذریعہ اشارہ کیا گیا ہے)۔ اگر آپ اپنے خود ساختہ نظام کے ساتھ سورس سے بوٹسٹریپ بنا رہے ہیں، تو HTML، CSS، اور JS کے لیے اپنے منیفائرز کو لاگو کرنا یقینی بنائیں۔

غیر مسدود فائلیں۔

اگرچہ کمپریشن کو کم کرنا اور استعمال کرنا کافی لگتا ہے، لیکن آپ کی فائلوں کو غیر مسدود کرنا بھی آپ کی سائٹ کو اچھی طرح سے بہتر اور تیز رفتار بنانے میں ایک بڑا قدم ہے۔

اگر آپ گوگل کروم میں لائٹ ہاؤس پلگ ان استعمال کر رہے ہیں، تو ہو سکتا ہے آپ نے 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 کنکشنز پر کرتے ہیں۔