Оновчлох

Lean Sass импорт

Sass-ийг өөрийн хөрөнгийн шугамд ашиглахдаа зөвхөн @importшаардлагатай бүрэлдэхүүн хэсгүүдийг ашиглан Bootstrap-ийг оновчтой болгох хэрэгтэй. Таны хамгийн том оновчлолууд нь Layout & Componentsманай bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@import "maps";
@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-г турах

bootstrap.jsBootstrap-ийн JavaScript нь бидний үндсэн dist файлуудын ( болон ) бүрэлдэхүүн хэсэг бүрийг bootstrap.min.js, тэр ч байтугай бидний үндсэн хамаарлыг (Popper) багц файлуудын ( bootstrap.bundle.jsба bootstrap.bundle.min.js) хамт агуулдаг. Та Sass-ээр тохируулж байх үедээ холбогдох JavaScript-г устгахаа мартуузай.

Жишээлбэл, та Webpack, Parcel эсвэл Vite гэх мэт өөрийн 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/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 нь тодорхой CSS шинж чанаруудад хөтчийн угтварыг автоматаар нэмэхийн тулд Autoprefixer-ээс хамаардаг. Угтварууд нь .browserslistrcBootstrap репо-н үндэст байдаг манай файлаар тодорхойлогддог. Хөтчүүдийн жагсаалтыг өөрчилж, 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 дээр бүдэрсэн байж магадгүй юм. Анхны Агуулга Будаг хэмжигдэхүүн нь хуудсыг ачаалж эхлэхээс тухайн хуудасны агуулгын аль нэг хэсгийг дэлгэцэн дээр гаргах хүртэлх хугацааг хэмждэг.

Та чухал бус 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 холболтоор бүх загварын хуудас, скрипт болон бусад өмчид хандах ёстой. Үгүй бол та хэрэглэгчдэд холимог идэвхтэй контент илгээх бөгөөд энэ нь сайтын хамаарлыг өөрчилснөөр эвдэрч болзошгүй эмзэг байдалд хүргэх болно. Энэ нь аюулгүй байдлын асуудал болон хөтөч доторх анхааруулгыг хэрэглэгчдэд үзүүлэхэд хүргэж болзошгүй. Та CDN-ээс Bootstrap-г авч байгаа эсвэл өөрөө үйлчилж байгаа эсэхээс үл хамааран түүнд зөвхөн HTTPS холболтоор хандана уу.