Arotau

He kawemai a Lean Sass

I te wa e whakamahi ana i a Sass i roto i to paipa rawa, kia arotau koe i a Bootstrap ma te @importwhakauru i nga waahanga e hiahia ana koe. Ko o tino arotautanga ka puta mai i te Layout & Componentswaahanga o to maatau 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";

Mena kaore koe i te whakamahi i tetahi waahanga, korerohia, ka whakakorehia ranei. Hei tauira, ki te kore koe e whakamahi i te carousel, tangohia taua kawemai hei tiaki i te rahi o te konae ki to CSS kua whakahiato. Kia maumahara kei reira etahi whakawhirinakitanga puta noa i nga kawemai a Sass ka nui ake te uaua ki te waiho i tetahi konae.

JavaScript hiroki

Kei roto i te JavaScript a Bootstrap nga waahanga katoa i roto i a maatau konae dist tuatahi ( bootstrap.jsme bootstrap.min.js), tae atu ki to maatau whakawhirinakitanga tuatahi (Popper) me a maatau konae paihere ( bootstrap.bundle.jsme bootstrap.bundle.min.js). I a koe e whakarite ana ma te Sass, me tango te JavaScript e pa ana.

Hei tauira, ki te whakaaro koe kei te whakamahi koe i to putunga JavaScript penei i te Webpack, Rollup ranei, ka kawemai koe i te JavaScript e whakamahere ana koe ki te whakamahi. I roto i te tauira i raro nei, ka whakaatu matou me pehea te whakauru noa i to maatau 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';

Ma tenei ara, kaore koe e whakauru i tetahi JavaScript kaore koe e hiahia ki te whakamahi mo nga waahanga penei i nga paatene, carousels, me nga aki taputapu. Mena kei te kawemai koe i nga takaiho, i nga aki taputapu, i nga popovers ranei, me tuhi koe i te whakawhirinaki Popper ki to package.jsonkonae.

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

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

Autoprefixer .browserslistrc

Kei te whakawhirinaki a Bootstrap ki te Autoprefixer ki te taapiri aunoa i nga prefix tirotiro ki etahi taonga CSS. Ko nga prefix e tohuhia ana e to maatau .browserslistrckonae, ka kitea i te pakiaka o te repo Bootstrap. Ma te whakarite i tenei rarangi o nga kaitirotiro me te whakahiato i te Sass ka tango aunoa i etahi CSS mai i to CSS kua whakahiato, mena he tohu tohu kaihoko motuhake ki taua kaitirotiro, putanga ranei.

CSS kore i whakamahia

Kei te hiahia awhina mo tenei waahanga, me whakaaro koe ki te whakatuwhera i tetahi PR. Mihi!

Ahakoa karekau he tauira hanga-mua mo te whakamahi i te PurgeCSS me Bootstrap, kei reira etahi tuhinga awhina me nga hikoi kua tuhia e te hapori. Anei etahi whiringa:

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

Ka mutu, ko tenei tuhinga Tricks CSS mo te CSS kaore i whakamahia e whakaatu ana me pehea te whakamahi i te PurgeCSS me etahi atu taputapu rite.

Whakaitihia me te gzip

I nga wa katoa ka taea, kia kaha ki te kopiri i nga waehere katoa e tukuna ana e koe ki o manuhiri. Mena kei te whakamahi koe i nga konae Bootstrap dist, ngana ki te piri ki nga putanga iti (kua tohuhia e te .min.cssme nga .min.jstoronga). Mena kei te hanga koe i a Bootstrap mai i te puna me to ake punaha hanga, kia mohio koe ki te whakatinana i a koe ake iti mo te HTML, CSS, me te JS.

Nga konae kore aukati

Ahakoa ko te whakaiti me te whakamahi i te taapiri he ahua nui, ko te hanga i o konae kia kore e aukati he mahi nui kia pai ai to papaanga me te tere.

Mena kei te whakamahi koe i te mono Lighthouse i Google Chrome, kua tutuki pea koe ki te FCP. Ka inehia e te inenga Peita Tuatahi Ihirangi te wa mai i te wa i timata ai te utaina o te wharangi ki te wa e whakaatuhia ana tetahi waahanga o nga ihirangi o te wharangi ki runga i te mata.

Ka taea e koe te whakapai ake i te FCP ma te whakaroa i a JavaScript, CSS ranei. He aha te tikanga o tena? Maamaa, ko JavaScript me nga pepa ahua kaore e tika kia tae ki te peita tuatahi o to wharangi me tohu ki asyncnga deferhuanga.

Ma tenei ka whakarite ka utaina nga rauemi iti ake i muri mai ka kore e aukati i te peita tuatahi. I tetahi atu taha, ka taea te whakauru i nga rauemi whakahirahira hei tuhi tuhi, momo ahua ranei.

Mena kei te hiahia koe ki te ako atu mo tenei, he maha nga tuhinga pai mo tenei:

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

Whakamahia te HTTPS i nga wa katoa

Me waatea noa to paetukutuku i runga i nga hononga HTTPS i te hanga. Ko te HTTPS te whakapai ake i te haumarutanga, te noho muna, me te waatea o nga waahi katoa, kaore he mea penei i te hokohoko tukutuku kore-tairongo . Ko nga hikoi ki te whirihora i to paetukutuku kia tukuna anake ma runga i te HTTPS he rerekee i runga i to hoahoanga me to kaiwhakarato manaaki paetukutuku, na reira kei tua atu i te whānuitanga o enei tuhinga.

Ko nga waahi e tukuna ana i runga i te HTTPS me uru atu ki nga pepa ahua katoa, tuhinga me etahi atu rawa mo nga hononga HTTPS. Ki te kore, ka tukuna atu e koe ki nga kaiwhakamahi nga ihirangi hohe whakauru , e arai ana ki nga whakaraeraetanga ka taea te whakaraerae i tetahi pae ma te whakarereke i te whakawhirinakitanga. Ka taea e tenei te arahi ki nga take haumarutanga me nga whakatupato i roto i te tirotiro ka whakaatuhia ki nga kaiwhakamahi. Ahakoa kei te whiwhi koe i a Bootstrap mai i te CDN, kei te mahi koe i a koe ano, me uru koe ki runga i nga hononga HTTPS anake.