Оптимизатсия

Воридоти Lean Sass

Ҳангоми истифодаи Sass дар лӯлаи дороиҳои худ, боварӣ ҳосил кунед, ки шумо Bootstrap-ро танҳо бо ворид @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";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

Агар шумо ҷузъро истифода набаред, онро шарҳ диҳед ё пурра нест кунед. Масалан, агар шумо каруселро истифода набаред, ин воридотро хориҷ кунед, то андозаи файлро дар CSS-и тартибдодаатон захира кунед. Дар хотир доред, ки дар байни воридоти Sass баъзе вобастагӣ вуҷуд дорад, ки метавонад партофтани файлро мушкилтар кунад.

Таҷҳизоти JavaScript

JavaScript-и Bootstrap ҳар як ҷузъро дар файлҳои дистҳои ибтидоии мо ( bootstrap.jsва bootstrap.min.js) ва ҳатто вобастагии ибтидоии мо (Popper) бо файлҳои бастаи мо ( bootstrap.bundle.jsва bootstrap.bundle.min.js) дар бар мегирад. Ҳангоме ки шумо тавассути Sass танзим мекунед, боварӣ ҳосил кунед, ки JavaScript-и алоқамандро нест кунед.

Масалан, агар шумо бастаи JavaScript-и шахсии худро ба мисли Webpack ё Rollup истифода баред, шумо танҳо 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/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-ро барои ҷузъҳо ба монанди тугмаҳо, каруселҳо ва маслиҳатҳо истифода намебаред. Агар шумо афтандаҳо, маслиҳатҳо ё поповҳоро ворид кунед, боварӣ ҳосил кунед, ки вобастагии Попперро дар package.jsonфайли худ номбар кунед.

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

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

Autoprefixer .browserslistrc

Bootstrap аз Autoprefixer вобаста аст, то ба таври худкор префиксҳои браузерро ба хосиятҳои муайяни CSS илова кунад. Префиксҳо аз ҷониби .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 Tricks оид ба CSS истифоданашуда нишон медиҳад, ки чӣ тавр истифода бурдани PurgeCSS ва дигар абзорҳои шабеҳ.

Хурд кардан ва gzip

То ҳадди имкон, боварӣ ҳосил кунед, ки ҳамаи кодҳоеро, ки шумо ба меҳмонон хидмат мекунед, фишурда кунед. Агар шумо файлҳои dist Bootstrap-ро истифода баред, кӯшиш кунед, ки ба версияҳои хурдкардашуда часпида гиред (бо .min.cssва .min.jsвасеъкуниҳо нишон дода шудааст). Агар шумо Bootstrap-ро аз сарчашма бо системаи сохтани худ созед, ҳатман минификаторҳои худро барои HTML, CSS ва JS татбиқ кунед.

Файлҳои бастанашаванда

Ҳангоме ки хурд кардан ва истифодаи фишурда метавонад кофӣ ба назар расад, сохтани файлҳои шумо бебандшуда низ як қадами бузург барои ба таври кофӣ оптимизатсияшуда ва тезтар кардани сайти шумост.

Агар шумо плагини Lighthouse -ро дар Google Chrome истифода баред, шумо шояд аз FCP пешпо хӯрдед. Метрикаи якуми рангҳои мундариҷа вақтро аз оғози боркунии саҳифа то лаҳзаи дар экран намоиш додани ягон қисми мундариҷаи саҳифа чен мекунад.

Шумо метавонед FCP-ро тавассути таъхири JavaScript ё CSS-и ғайримуқаррарӣ такмил диҳед. Ин чӣ маънӣ дорад? Ба таври оддӣ, 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 дастрас мекунед.