Arotau
Kia hiroki, kia aro, kia mau tonu o kaupapa kia taea ai e koe te whakaputa i te wheako pai me te aro ki nga mahi nui ake.
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 @import
whakauru i nga waahanga e hiahia ana koe. Ko o tino arotautanga ka puta mai i te Layout & Components
waahanga 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";
@import "placeholders";
// 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.js
me bootstrap.min.js
), tae atu ki to maatau whakawhirinakitanga tuatahi (Popper) me a maatau konae paihere ( bootstrap.bundle.js
me 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/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';
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.json
konae.
Kaweake Taunoa
Ko nga konae kei bootstrap/js/dist
te whakamahi i te kaweake taunoa , na, ki te hiahia koe ki te whakamahi i tetahi o aua mea me mahi e koe nga mea e whai ake nei:
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 .browserslistrc
konae, 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.css
me nga .min.js
toronga). 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 kopeketanga he ahua nui, ko te hanga i o konae kia kaua e aukati he mahi nui kia pai ai to papaanga me te tere 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 async
nga defer
huanga.
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:
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.