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

Воридоти 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";

// 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/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 пешпо хӯрдед. Метрикаи якуми рангҳои мундариҷа вақтро аз оғози боркунии саҳифа то лаҳзаи дар экран намоиш додани ягон қисми мундариҷаи саҳифа чен мекунад.

You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don’t need to be present on the first paint of your page should be marked with async or defer attributes.

This ensures that the less important resources are loaded later and not blocking the first paint. On the other hand, critical resources can be included as inline scripts or styles.

If you want to learn more about this, there are already a lot of great articles about it:

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

Always use HTTPS

Your website should only be available over HTTPS connections in production. HTTPS improves the security, privacy, and availability of all sites, and there is no such thing as non-sensitive web traffic. The steps to configure your website to be served exclusively over HTTPS vary widely depending on your architecture and web hosting provider, and thus are beyond the scope of these docs.

Sites served over HTTPS should also access all stylesheets, scripts, and other assets over HTTPS connections. Otherwise, you’ll be sending users mixed active content, leading to potential vulnerabilities where a site can be compromised by altering a dependency. This can lead to security issues and in-browser warnings displayed to users. Whether you’re getting Bootstrap from a CDN or serving it yourself, ensure that you only access it over HTTPS connections.