Аптымізаваць

Імпарт Lean Sass

Пры выкарыстанні Sass у канвееры актываў пераканайцеся, што вы аптымізуеце Bootstrap, загружаючы толькі @importтыя кампаненты, якія вам патрэбныя. Вашы самыя вялікія аптымізацыі, верагодна, будуць зроблены ў 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

JavaScript Bootstrap уключае ўсе кампаненты нашых асноўных файлаў dist ( bootstrap.jsі bootstrap.min.js), і нават нашу асноўную залежнасць (Popper) з нашымі пакетнымі файламі ( bootstrap.bundle.jsі bootstrap.bundle.min.js). Пакуль вы наладжваеце праз Sass, абавязкова выдаліце ​​звязаны JavaScript.

Напрыклад, пры ўмове, што вы выкарыстоўваеце свой уласны зборшчык JavaScript, напрыклад Webpack, Parcel або Vite, вы імпартуеце толькі той 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, які не збіраецеся выкарыстоўваць для такіх кампанентаў, як кнопкі, каруселі і падказкі. Калі вы імпартуеце выпадаючыя спісы, падказкі або ўсплывальныя вобразы, не забудзьцеся пералічыць залежнасць Popper у вашым package.jsonфайле.

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

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

Аўтапрэфікс .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

Па магчымасці не забудзьцеся сціснуць увесь код, які вы падаеце наведвальнікам. Калі вы выкарыстоўваеце файлы Bootstrap dist, паспрабуйце прытрымлівацца мініфікаваных версій (пазначаных пашырэннямі .min.cssі ). .min.jsКалі вы ствараеце Bootstrap з зыходнага кода з дапамогай уласнай сістэмы зборкі, не забудзьцеся ўкараніць уласныя мініфікатары для HTML, CSS і JS.

Файлы без блакіроўкі

Нягледзячы на ​​тое, што мінімізацыі і выкарыстання сціску можа здацца дастаткова, зрабіць файлы неблакіраванымі таксама важным крокам у тым, каб зрабіць ваш сайт добра аптымізаваным і досыць хуткім.

Калі вы выкарыстоўваеце плагін Lighthouse у Google Chrome, магчыма, вы наткнуліся на 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.