اصلاح کول

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

کله چې ستاسو د شتمنیو پایپ لاین کې ساس وکاروئ ، ډاډ ترلاسه کړئ چې تاسو یوازې @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";

که تاسو یوه برخه نه کاروئ، تبصره یې کړئ یا یې په بشپړه توګه حذف کړئ. د مثال په توګه، که تاسو carousel نه کاروئ، دا واردات لرې کړئ ترڅو ستاسو په ترتیب شوي CSS کې د فایل اندازه خوندي کړئ. په یاد ولرئ چې د Sass وارداتو په اوږدو کې ځینې انحصارونه شتون لري چې ممکن د فایل پریښودل خورا ستونزمن کړي.

لین جاواسکریپټ

د بوټسټریپ جاواسکریپټ زموږ په لومړني ډیسټ فایلونو کې هره برخه شامله ده ( bootstrap.jsاو bootstrap.min.js) ، او حتی زموږ لومړني انحصار (پاپر) زموږ د بنډل فایلونو ( bootstrap.bundle.jsاو bootstrap.bundle.min.js) سره. پداسې حال کې چې تاسو د Sass له لارې دودیز کوئ، ډاډ ترلاسه کړئ چې اړونده جاواسکریپټ لرې کړئ.

د مثال په توګه، فرض کړئ چې تاسو خپل جاوا سکریپټ بنډلر کاروئ لکه ویبپیک یا رول اپ، تاسو به یوازې هغه جاوا سکریپټ وارد کړئ چې تاسو یې کارولو پلان لرئ. په لاندې مثال کې، موږ وښیو چې څنګه یوازې زموږ موډل جاواسکریپټ شامل کړو:

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

په دې توګه، تاسو کوم جاوا سکریپټ شامل نه یاست چې تاسو یې د اجزاوو لکه بټونو، کیروسل، او اوزار ټیپونو لپاره د کارولو اراده نه لرئ. که تاسو د ډراپ ډاونز، ټلیپس یا پاپور وارد کوئ، ډاډ ترلاسه کړئ چې ستاسو په package.jsonفایل کې د پوپر انحصار لیست کړئ.

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

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

Autoprefixer .browserslistrc

بوټسټریپ په Autoprefixer پورې اړه لري ترڅو په اتوماتيک ډول ځینې CSS ملکیتونو ته د براوزر مختګونه اضافه کړي. مختګونه زموږ د .browserslistrcفایل لخوا ترتیب شوي ، د بوټسټریپ ریپو په ریښه کې موندل شوي. د دې براوزرونو لیست تنظیم کول او د Sass بیا تنظیم کول به په اوتومات ډول ستاسو له ترتیب شوي CSS څخه ځینې CSS لرې کړي ، که چیرې د دې براوزر یا نسخې لپاره ځانګړي پلورونکي مخکینۍ شتون ولري.

نه کارول شوی CSS

په دې برخه کې مرسته غواړي، مهرباني وکړئ د PR پرانیستلو په اړه فکر وکړئ. مننه!

پداسې حال کې چې موږ د بوټسټریپ سره د پرج سی ایس ایس کارولو لپاره دمخه جوړ شوی مثال نلرو ، دلته ځینې ګټورې مقالې او واک تھرو شتون لري چې ټولنې لیکلي دي. دلته ځینې اختیارونه دي:

• 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

هرکله چې امکان ولري، ډاډ ترلاسه کړئ چې ټول هغه کوډ چې تاسو خپلو لیدونکو ته خدمت کوئ کم کړئ. که تاسو د بوټسټریپ ډیسټ فایلونه کاروئ ، هڅه وکړئ کوچني نسخو ته ودریږئ (د .min.cssاو .min.jsتوسیع لخوا ښودل شوي). که تاسو د خپل جوړ شوي سیسټم سره د سرچینې څخه بوټسټریپ رامینځته کوئ ، نو ډاډه اوسئ چې د HTML ، CSS ، او JS لپاره خپل مینیفیر پلي کړئ.

د غیر بندولو فایلونه

پداسې حال کې چې د کمپریشن کمول او کارول ممکن کافي ښکاري ، ستاسو د فایلونو غیر بلاک کولو رامینځته کول هم ستاسو د سایټ ښه مطلوب او ګړندي کولو کې لوی ګام دی.

که تاسو په ګوګل کروم کې د Lighthouse پلگ ان کاروئ، نو تاسو ممکن د FCP په اړه ټکر کړی وي. د منځپانګې لومړی پینټ میټریک هغه وخت اندازه کوي کله چې د پاڼې پورته کول پیل کیږي کله چې د پاڼې د منځپانګې کومه برخه په سکرین کې وړاندې کیږي.

تاسو کولی شئ د غیر مهم جاوا سکریپټ یا 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 اړیکو ته لاسرسی لرئ.