Оптималдаштыруу

Lean Sass импорту

Сиздин активдериңизде Sass колдонуп жатканда, @importсизге керектүү компоненттерди гана киргизүү менен Bootstrapти оптималдаштырганыңызды текшериңиз. Сиздин эң чоң оптималдаштырууларыңыз 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";

Эгерде сиз компонентти колдонбосоңуз, ага комментарий бериңиз же толугу менен жок кылыңыз. Мисалы, эгер сиз карусельди колдонбосоңуз, компиляцияланган CSS файлыңызда кандайдыр бир файл өлчөмүн сактоо үчүн импортту алып салыңыз. Sass импортунун кээ бир көз карандылыктары бар экенин эстен чыгарбоо керек, бул файлды өткөрүп жиберүүнү кыйындатат.

Lean JavaScript

Bootstrap'тин JavaScript'и биздин негизги дист файлдарыбыздагы ( bootstrap.jsжана bootstrap.min.js) ар бир компонентти жана ал тургай биздин таңгак файлдарыбыз ( bootstrap.bundle.jsжана bootstrap.bundle.min.js) менен негизги көз карандылыгыбызды (Popper) камтыйт. Sass аркылуу ыңгайлаштырылып жатканыңызда, ага байланыштуу JavaScriptти алып салууну унутпаңыз.

Мисалы, Webpack же Rollup сыяктуу өзүңүздүн JavaScript байлагычыңызды колдонуп жатасыз деп ойлосоңуз, сиз колдонууну пландаштырган JavaScriptти гана импорттойсуз. Төмөнкү мисалда биз модалдык 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/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

Ошентип, баскычтар, карусельдер жана кеңештер сыяктуу компоненттер үчүн колдонууга ниеттенбеген эч кандай JavaScript'ти камтыбайсыз. Эгерде сиз ылдый түшүүчү тизмелерди, инструменттерди же поповерлерди импорттоп жатсаңыз, package.jsonфайлыңызда Попперге көз карандылыкты тизмектеңиз.

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

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

Autoprefixer .browserlistrc

Bootstrap айрым CSS касиеттерине браузердин префикстерин автоматтык түрдө кошуу үчүн Autoprefixerге көз каранды. .browserslistrcПрефикстер Bootstrap репосунун тамырында табылган биздин файлыбыз тарабынан белгиленет . Бул браузерлердин тизмесин ыңгайлаштыруу жана 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 жана башка ушул сыяктуу куралдарды кантип колдонууну көрсөтөт.

Кичирейтүү жана gzip

Мүмкүн болушунча, конокторуңузга кызмат кылган бардык кодду кысууну унутпаңыз. Эгерде сиз Bootstrap dist файлдарын колдонуп жатсаңыз, кичирейтилген версияларды ( .min.cssжана .min.jsкеңейтүүлөр менен көрсөтүлгөн) карманууга аракет кылыңыз. Эгер сиз Bootstrap'ти өзүңүздүн куруу тутумуңуз менен булактан куруп жатсаңыз, HTML, CSS жана JS үчүн өзүңүздүн минификаторлоруңузду ишке ашырууну унутпаңыз.

Бөгөттөлбөгөн файлдар

Кысууну кичирейтүү жана колдонуу жетиштүү сезилиши мүмкүн, бирок файлдарыңызды бөгөттөлбөгөн кылуу дагы сайтыңызды жакшы оптималдаштырылган жана жетиштүү ылдам кылуу үчүн чоң кадам болуп саналат.

Эгер сиз Google Chrome'до Lighthouse плагинин колдонуп жатсаңыз, анда сиз FCPге чалынган болушуңуз мүмкүн. Биринчи Contentful Paint метрикасы барак жүктөлө баштагандан баштап, беттин мазмунунун кайсы бир бөлүгү экранда көрсөтүлгөнгө чейинки убакытты өлчөйт.

Критикалык эмес 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 туташуусу аркылуу бардык стилдер жадыбалдарына, скрипттерге жана башка активдерге кире алышы керек. Болбосо, колдонуучуларга аралаш жигердүү мазмунду жөнөтөсүз, бул көз карандылыкты өзгөртүү аркылуу сайттын бузулушуна алып келиши мүмкүн. Бул коопсуздук маселелерине жана колдонуучуларга көрсөтүлгөн браузердеги эскертүүлөргө алып келиши мүмкүн. Bootstrapти CDNден алып жатасызбы же аны өзүңүз тейлеп жатасызбы, ага HTTPS туташуулары аркылуу гана кирүүңүздү текшериңиз.