Оңтайландыру

Lean Sass импорты

@importSass-ті активтер құбырында пайдаланған кезде, тек қажет құрамдастарды енгізу арқылы 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 импортында кейбір тәуелділіктер бар екенін есте сақтаңыз, бұл файлды өткізіп жіберуді қиындатады.

Жіңішке JavaScript

Bootstrap JavaScript бағдарламасы негізгі дистрибьюторлық файлдардағы ( bootstrap.jsжәне ) әрбір құрамдас бөлікті, тіпті пакеттік файлдармен ( және bootstrap.min.js) негізгі тәуелділікті (Popper ) қамтиды . Sass арқылы теңшеу кезінде, қатысты JavaScript-ті жоюды ұмытпаңыз.bootstrap.bundle.jsbootstrap.bundle.min.js

Мысалы, 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файлыңыздағы Popper тәуелділігін тізімдеңіз.

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

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

Autoprefixer .browserslistrc

Белгілі бір CSS сипаттарына шолғыш префикстерін автоматты түрде қосу үшін Bootstrap Autoprefixer-ге байланысты. Префикстер .browserslistrcBootstrap репосының түбірінде табылған файлымыз арқылы белгіленеді. Браузерлердің осы тізімін теңшеу және Sass-ты қайта құрастыру, сол браузерге немесе нұсқаға бірегей жеткізуші префикстері болса, құрастырылған CSS-тен кейбір CSS-ні ​​автоматты түрде жояды.

Пайдаланылмаған CSS

Осы бөлім бойынша көмек қажет, PR ашуды қарастырыңыз. Рахмет!

Бізде Bootstrap көмегімен 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 және басқа ұқсас құралдарды қалай пайдалану керектігін көрсетеді.

Кішірейту және gzip

Мүмкіндігінше, келушілерге қызмет ететін барлық кодты қысуды ұмытпаңыз. Bootstrap dist файлдарын пайдаланып жатсаңыз, кішірейтілген нұсқаларды ( .min.cssжәне .min.jsкеңейтімдер арқылы көрсетілген) ұстануға тырысыңыз. Егер сіз Bootstrap-ті дереккөзден өзіңіздің құрастыру жүйесімен жасап жатсаңыз, HTML, CSS және JS үшін өзіңіздің минификаторларыңызды іске асырыңыз.

Бұғатталмаған файлдар

Қысуды кішірейту және пайдалану жеткілікті болып көрінуі мүмкін, бірақ файлдарыңызды блоктамайтын етіп жасау сайтыңызды жақсы оңтайландырылған және жеткілікті жылдам ету үшін үлкен қадам болып табылады.

Google Chrome жүйесінде Lighthouse плагинін пайдаланып жатсаңыз, 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 қосылымдары арқылы барлық стиль кестелеріне, сценарийлеріне және басқа активтеріне қол жеткізуі керек. Әйтпесе, сіз пайдаланушыларға аралас белсенді мазмұнды жібересіз, бұл тәуелділікті өзгерту арқылы сайтқа қауіп төнуі мүмкін ықтимал осалдықтарға әкелетін боласыз. Бұл қауіпсіздік мәселелеріне және пайдаланушыларға көрсетілетін шолғыштағы ескертулерге әкелуі мүмкін. Bootstrap-ті CDN-ден алып жатсаңыз да, оған өзіңіз қызмет етсеңіз де, оған тек HTTPS қосылымдары арқылы қол жеткізгеніңізге көз жеткізіңіз.