Օպտիմալացնել

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

Bootstrap-ի JavaScript-ը ներառում է մեր հիմնական հեռավոր ֆայլերի յուրաքանչյուր բաղադրիչ ( 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, որը չեք պատրաստվում օգտագործել այնպիսի բաղադրիչների համար, ինչպիսիք են կոճակները, կարուսելները և գործիքների հուշումները: Եթե ​​դուք ներմուծում եք բացվող պատուհաններ, գործիքների հուշումներ կամ popovers, անպայման նշեք Popper-ի կախվածությունը ձեր 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-ի վերաբերյալ CSS Tricks հոդվածը ցույց է տալիս, թե ինչպես օգտագործել PurgeCSS-ը և նմանատիպ այլ գործիքներ:

Minify և gzip

Հնարավորության դեպքում համոզվեք, որ սեղմեք ձեր այցելուներին մատուցած ամբողջ ծածկագիրը: Եթե ​​դուք օգտագործում եք Bootstrap dist ֆայլեր, փորձեք հավատարիմ մնալ փոքրացված տարբերակներին (նշված են .min.cssև .min.jsընդլայնումներով): Եթե ​​դուք կառուցում եք Bootstrap աղբյուրից՝ ձեր սեփական կառուցման համակարգով, համոզվեք, որ ներդրեք ձեր սեփական minifiers-ը HTML-ի, CSS-ի և JS-ի համար:

Չարգելափակող ֆայլեր

Թեև սեղմման նվազեցումը և օգտագործումը կարող է բավական թվալ, ձեր ֆայլերը չարգելափակող դարձնելը նաև մեծ քայլ է ձեր կայքը լավ օպտիմիզացված և բավականաչափ արագ դարձնելու համար:

Եթե ​​Google Chrome-ում օգտվում եք Lighthouse հավելվածից, հնարավոր է, որ FCP-ին բախվել եք: First Contentful Paint- ի չափանիշը չափում է այն ժամանակը, երբ էջը սկսում է բեռնվել մինչև էջի բովանդակության որևէ մասի ցուցադրումը էկրանին:

Դուք կարող եք բարելավել 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 կապերի միջոցով: