Fa'asilisili

Lean Sass oloa faaulufale mai

A fa'aoga Sass i lau paipa o aseta, ia mautinoa e te fa'amalieina le Bootstrap i le na'o @importle fa'aogaina o vaega e te mana'omia. O au fa'ata'ita'iga sili e ono sau mai le Layout & Componentsvaega o la matou 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";

Afai e te le o fa'aogaina se vaega, fa'ailoa mai pe tape atoa. Mo se fa'ata'ita'iga, afai e te le o fa'aogaina le carousel, aveese lena fa'aulufale mai e fa'asaoina ai sina faila faila i lau CSS tu'ufa'atasia. Ia manatua o lo'o iai nisi fa'alagolago ile Sass fa'aulufale mai e ono fa'afaigata ai ona aveese se faila.

Lean JavaScript

O le JavaScript's Bootstrap e aofia ai vaega uma i totonu oa tatou faila muamua ( bootstrap.jsma bootstrap.min.js), e oʻo lava i lo tatou faʻalagolago muamua (Popper) ma a tatou faila fusi ( bootstrap.bundle.jsma bootstrap.bundle.min.js). A'o e fa'avasegaina e ala i le Sass, ia mautinoa e aveese le Javascript fa'atatau.

Mo se faʻataʻitaʻiga, faʻapea o loʻo e faʻaogaina lau lava JavaScript bundler pei o Webpack poʻo Rollup, e naʻo le faʻaulufale mai o le JavaScript e te fuafua e faʻaoga. I le faʻataʻitaʻiga o loʻo i lalo, matou te faʻaalia pe faʻapefea ona naʻo le faʻaofiina o la matou JavaScript modal:

// 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';

I lenei auala, e te le o aofia ai soʻo se JavaScript e te le o manaʻo e faʻaoga mo vaega e pei o ki, carousels, ma meafaigaluega. Afai o lo'o e fa'aulufale mai fa'apalapala, mea faigaluega po'o popovers, ia mautinoa e lisi le Popper fa'alagolago i lau package.jsonfaila.

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

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

Autoprefixer .browserslistrc

E fa'alagolago le Bootstrap i le Autoprefixer e otometi lava ona fa'aopoopo fa'ailoga su'esu'e i nisi o meatotino CSS. Prefixes e faʻatonuina e la matou .browserslistrcfaila, o loʻo maua i le aʻa o le Bootstrap repo. O le fa'avasegaina o lenei lisi o su'esu'ega ma le toe fa'aopoopoina o le Sass o le a otometi lava ona aveese nisi CSS mai lau CSS tu'ufa'atasia, pe afai o lo'o i ai fa'ailoga fa'atau e tulaga ese i lena su'esu'ega po'o le fa'asologa.

CSS le fa'aaogaina

Manaomia se fesoasoani ile vaega lea, faamolemole mafaufau e tatala se PR. Fa'afetai!

E ui e leai se matou faʻataʻitaʻiga muamua mo le faʻaaogaina o le PurgeCSS ma le Bootstrap, o loʻo i ai nisi o tala fesoasoani ma savali na tusia e le alalafaga. O nisi nei o filifiliga:

• 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/

I le mea mulimuli, o lenei CSS Tricks tusiga i luga o le CSS le faʻaaogaina o loʻo faʻaalia ai le faʻaogaina o le PurgeCSS ma isi mea faigaluega tutusa.

Minify ma gzip

Soo se taimi e mafai ai, ia mautinoa e faʻapipiʻi uma tulafono e te tautuaina i au tagata asiasi. Afai o loʻo e faʻaogaina faila faila Bootstrap, taumafai e pipii i faʻamatalaga faʻaititia (faʻaalia e le .min.cssma .min.jsfaʻaopoopoga). Afai o loʻo e fausiaina Bootstrap mai le punavai ma lau oe lava faufale, ia mautinoa e faʻatino au lava minifis mo HTML, CSS, ma JS.

faila e le poloka

E ui o le faʻaitiitia ma le faʻaogaina o le faʻamalosi atonu e foliga mai e lava, o le faia o au faila e le o polokaina o se laʻasaga tele foi lea i le faʻaleleia lelei o lau 'upega tafaʻilagi ma vave vave.

Afai o loʻo e faʻaogaina se faʻapipiʻi Lighthouse ile Google Chrome, atonu na e tautevateva ile FCP. O le First Contentful Paint metric e fuaina ai le taimi e amata ai ona uta le itulau i le taimi e fa'aalia ai so'o se vaega o mea o le itulau i luga o le lau.

E mafai ona e fa'aleleia le FCP e ala i le tolopoina o le JavaScript po'o le CSS. O le a le uiga o le mea lena? Na'o le, JavaScript po'o sitaili pepa e le mana'omia ona i ai i luga o le vali muamua o lau itulau e tatau ona makaina asyncpo'o deferuiga.

O lenei mea e faʻamautinoa ai o mea e le taua tele e utaina mulimuli ane ma e le poloka ai le vali muamua. I le isi itu, o punaoa taua e mafai ona aofia ai o ni tusitusiga poʻo sitaili.

Afai e te manaʻo e aʻoaʻo atili e uiga i lenei mea, o loʻo i ai le tele o tala lelei e uiga i ai:

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

Fa'aaoga i taimi uma HTTPS

E tatau ona avanoa lau 'upega tafaʻilagi i luga o fesoʻotaʻiga HTTPS i le gaosiga. HTTPS faʻaleleia le saogalemu, faʻalilolilo, ma le avanoa o nofoaga uma, ma e leai se mea e pei o fefaʻatauaiga i luga ole laiga . O laasaga e faʻatulaga ai lau 'upega tafaʻilagi e tuʻuina atu i luga ole HTTPS e eseese lautele e faʻatatau i lau tusiata ma le upega tafaʻilagi talimalo, ma o lea e sili atu i le lautele o nei pepa.

O nofoaga o lo'o tautuaina i luga ole HTTPS e tatau fo'i ona maua uma sitaili, tusitusiga, ma isi aseta ile HTTPS feso'ota'iga. A leai, o le a e auina atu i tagata faʻaoga mea faʻafefiloi faʻamalosi , e oʻo atu i faʻafitauli faʻaletonu e mafai ai ona faʻafefe se saite e ala i le suia o se faʻalagolago. E mafai ona o'o atu ai i fa'afitauli tau puipuiga ma fa'aaliga i totonu o le su'esu'e i tagata fa'aoga. Pe o e mauaina le Bootstrap mai se CDN poʻo le tautuaina e oe lava, faʻamautinoa e te mauaina naʻo fesoʻotaʻiga HTTPS.