Optimallashtirish

Lean Sass importi

@importSass-ni aktivlar tarmog'ida ishlatganda, faqat kerakli komponentlarni o'rnatish orqali Bootstrap-ni optimallashtirishingizga ishonch hosil qiling . Sizning eng katta optimallashtirishlaringiz Layout & Componentsbizning bo'limdan keladi 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";

Agar siz biron bir komponentdan foydalanmasangiz, uni sharhlang yoki butunlay o'chirib tashlang. Misol uchun, agar siz karuseldan foydalanmasangiz, kompilyatsiya qilingan CSS-da fayl hajmini saqlash uchun ushbu importni olib tashlang. Esda tutingki, Sass importlarida ba'zi bog'liqliklar mavjud bo'lib, ular faylni o'tkazib yuborishni qiyinlashtirishi mumkin.

Yalang'och JavaScript

Bootstrap-ning JavaScript-da bizning asosiy dist fayllarimizdagi ( bootstrap.jsva bootstrap.min.js) har bir komponent va hatto bizning to'plam fayllarimiz ( bootstrap.bundle.jsva bootstrap.bundle.min.js) bilan birlamchi bog'liqligimiz (Popper) mavjud. Sass orqali moslashayotganingizda, tegishli JavaScript-ni o'chirib tashlang.

Masalan, siz Webpack yoki Rollup kabi o'zingizning JavaScript to'plamidan foydalanayotgan bo'lsangiz, siz faqat foydalanishni rejalashtirgan JavaScript-ni import qilasiz. Quyidagi misolda biz modal JavaScript-ni qanday kiritishni ko'rsatamiz:

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

Shunday qilib, tugmalar, karusellar va maslahatlar kabi komponentlar uchun foydalanmoqchi bo'lmagan JavaScript-ni qo'shmaysiz. Agar siz ochiladigan menyular, maslahatlar yoki popoverlarni import qilmoqchi bo'lsangiz, package.jsonfaylingizda Popper bog'liqligini ro'yxatga olishni unutmang.

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

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

Autoprefixer .browserslistrc

Bootstrap ma'lum CSS xususiyatlariga brauzer prefikslarini avtomatik ravishda qo'shish uchun Autoprefixer-ga bog'liq. Prefikslar bizning faylimiz tomonidan belgilanadi .browserslistrc, ular Bootstrap repo-ning ildizida joylashgan. Ushbu brauzerlar ro'yxatini moslashtirish va Sass-ni qayta kompilyatsiya qilish, agar ushbu brauzer yoki versiyaga xos bo'lgan sotuvchi prefikslari mavjud bo'lsa, kompilyatsiya qilingan CSS-dan ba'zi CSS-larni avtomatik ravishda olib tashlaydi.

Ishlatilmagan CSS

Ushbu bo'limda yordam so'rasangiz, PR ochishni o'ylab ko'ring. Rahmat!

PurgeCSS- ni Bootstrap bilan ishlatish uchun bizda oldindan yaratilgan namuna bo'lmasa-da , hamjamiyat tomonidan yozilgan foydali maqolalar va ko'rsatmalar mavjud. Mana bir nechta variantlar:

• 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/

Nihoyat, foydalanilmagan CSS bo'yicha ushbu CSS Tricks maqolasi PurgeCSS va shunga o'xshash boshqa vositalardan qanday foydalanishni ko'rsatadi.

Kichiklashtirish va gzip

Iloji bo'lsa, tashrif buyuruvchilaringizga taqdim etgan barcha kodlarni siqib chiqaring. Agar siz Bootstrap dist fayllaridan foydalanayotgan bo'lsangiz, kichiklashtirilgan versiyalarga ( .min.cssva .min.jskengaytmalar bilan ko'rsatilgan) yopishib olishga harakat qiling. Agar siz o'zingizning qurish tizimingiz bilan manbadan Bootstrap qurayotgan bo'lsangiz, HTML, CSS va JS uchun o'zingizning minifikatorlaringizni amalga oshirganingizga ishonch hosil qiling.

Bloklanmagan fayllar

Siqishni kamaytirish va ishlatish etarli bo'lib tuyulishi mumkin bo'lsa-da, fayllaringizni bloklanmaydigan qilib qo'yish ham saytingizni yaxshi optimallashtirilgan va etarlicha tez qilish uchun katta qadamdir.

Agar siz Google Chrome-da Lighthouse plaginidan foydalanayotgan bo'lsangiz, FCP-ga qoqilgan bo'lishingiz mumkin. Birinchi Contentful Paint ko'rsatkichi sahifaning yuklanishi boshlanganidan to sahifa mazmunining istalgan qismi ekranda ko'rsatilishigacha bo'lgan vaqtni o'lchaydi.

Siz muhim bo'lmagan JavaScript yoki CSS-ni kechiktirish orqali FCP-ni yaxshilashingiz mumkin. Bu nimani anglatadi? Sodda qilib aytganda, sahifangizning birinchi boʻyogʻida boʻlishi shart boʻlmagan JavaScript yoki uslublar jadvallari asyncyoki deferatributlari bilan belgilanishi kerak.

Bu kamroq muhim resurslarning keyinroq yuklanishini va birinchi bo'yoqqa to'sqinlik qilmasligini ta'minlaydi. Boshqa tomondan, muhim manbalar ichki skriptlar yoki uslublar sifatida kiritilishi mumkin.

Agar siz bu haqda ko'proq bilmoqchi bo'lsangiz, u haqida juda ko'p ajoyib maqolalar mavjud:

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

Har doim HTTPS dan foydalaning

Sizning veb-saytingiz faqat ishlab chiqarishda HTTPS ulanishlari orqali mavjud bo'lishi kerak. HTTPS barcha saytlarning xavfsizligini, maxfiyligini va mavjudligini yaxshilaydi va sezgir bo'lmagan veb-trafik degan narsa yo'q . Veb-saytingizni faqat HTTPS orqali xizmat ko'rsatish uchun sozlash qadamlari sizning arxitekturangiz va veb-xosting provayderingizga qarab juda katta farq qiladi va shuning uchun bu hujjatlar doirasidan tashqarida.

HTTPS orqali xizmat ko'rsatadigan saytlar HTTPS ulanishlari orqali barcha uslublar jadvallari, skriptlar va boshqa aktivlarga ham kirishi kerak. Aks holda, siz foydalanuvchilarga aralash faol tarkibni yuborasiz, bu esa qaramlikni o'zgartirish orqali saytning buzilishi mumkin bo'lgan zaifliklarga olib keladi. Bu xavfsizlik muammolariga va foydalanuvchilarga brauzer ichidagi ogohlantirishlarga olib kelishi mumkin. Bootstrap-ni CDN-dan olasizmi yoki o'zingiz xizmat qilasizmi, unga faqat HTTPS ulanishlari orqali kirganingizga ishonch hosil qiling.