Hoʻonui
E mālama i kāu mau papahana i ka lohi, pane, a mālama ʻia i hiki iā ʻoe ke hāʻawi i ka ʻike maikaʻi loa a nānā i nā hana koʻikoʻi.
Lean Sass lawe mai
I ka hoʻohana ʻana iā Sass i kāu pipeline waiwai, e hōʻoia ʻoe e hoʻomaikaʻi iā Bootstrap ma ka hoʻokomo wale @import
ʻana i nā ʻāpana āu e pono ai. E hele mai ana kāu mau hoʻonui nui loa mai ka Layout & Components
ʻāpana o kā mākou 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";
Inā ʻaʻole ʻoe e hoʻohana ana i kahi ʻāpana, e haʻi mai ia mea a holoi paha. No ka laʻana, inā ʻaʻole ʻoe e hoʻohana ana i ka carousel, e wehe i kēlā lawe mai e mālama i ka nui o ka faila ma kāu CSS i hōʻuluʻulu ʻia. E hoʻomanaʻo, aia kekahi mau hilinaʻi ma waena o nā hoʻokomo ʻana o Sass e paʻakikī paha ka haʻalele ʻana i kahi faila.
Lean JavaScript
Hoʻokomo ʻia ka JavaScript o Bootstrap i kēlā me kēia ʻāpana i kā mākou faila dist mua ( bootstrap.js
a bootstrap.min.js
), a me kā mākou hilinaʻi nui (Popper) me kā mākou pūʻulu waihona ( bootstrap.bundle.js
a bootstrap.bundle.min.js
). ʻOiai ʻoe e hana maʻamau ma o Sass, e ʻike pono e wehe i ka JavaScript pili.
No ka laʻana, me ka manaʻo e hoʻohana ana ʻoe i kāu puʻupuʻu JavaScript ponoʻī e like me Webpack a i ʻole Rollup, e hoʻokomo wale ʻoe i ka JavaScript āu e manaʻo ai e hoʻohana. Ma ka laʻana ma lalo nei, hōʻike mākou pehea e hoʻokomo ai i kā mākou 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';
Ma kēia ala, ʻaʻole ʻoe e hoʻokomo i kekahi JavaScript āu i manaʻo ʻole e hoʻohana no nā mea e like me nā pihi, nā carousels, a me nā mea hana. Inā ʻoe e lawe mai ana i nā hāʻule iho, nā mea hana a i ʻole nā popovers, e hoʻopaʻa inoa i ka hilinaʻi Popper i kāu package.json
faila.
Nā Hoʻopuka Paʻamau
Hoʻohana ʻia nā faila i bootstrap/js/dist
ka hoʻoiho paʻamau , no laila inā makemake ʻoe e hoʻohana i kekahi o ia mau mea pono ʻoe e hana i kēia:
import Modal from 'bootstrap/js/dist/modal'
const modal = new Modal(document.getElementById('myModal'))
Autoprefixer .browserslistrc
Kau ʻia ʻo Bootstrap i Autoprefixer e hoʻohui aunoa i nā prefix browser i kekahi mau waiwai CSS. Kuhi ʻia nā prefix e kā mākou .browserslistrc
faila, loaʻa i ke kumu o ka repo Bootstrap. ʻO ka hoʻopilikino ʻana i kēia papa inoa o nā mākaʻikaʻi a me ka hoʻopili hou ʻana i ka Sass e hoʻoneʻe koke i kekahi CSS mai kāu CSS i hōʻuluʻulu ʻia, inā loaʻa nā prefix mea kūʻai kūʻokoʻa i kēlā polokalamu a i ʻole ka mana.
CSS i hoʻohana ʻole ʻia
Makemake ʻia ke kōkua me kēia ʻāpana, e noʻonoʻo e wehe i kahi PR. Mahalo!
ʻOiai ʻaʻohe o mākou hiʻohiʻona i kūkulu mua ʻia no ka hoʻohana ʻana iā PurgeCSS me Bootstrap, aia kekahi mau ʻatikala kōkua a me nā hele wāwae i kākau ai ke kaiāulu. Eia kekahi mau koho:
- 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/
ʻO ka mea hope loa, hōʻike kēia ʻatikala CSS Tricks ma CSS i hoʻohana ʻole ʻia pehea e hoʻohana ai iā PurgeCSS a me nā mea hana like ʻole.
Hoʻoemi a me ka gzip
I nā manawa a pau e hiki ai, e hoʻopaʻa i nā code a pau āu e lawelawe ai i kāu poʻe malihini. Inā ʻoe e hoʻohana nei i nā faila Bootstrap dist, e hoʻāʻo e pili i nā mana liʻiliʻi (i hōʻike ʻia e nā .min.css
a me .min.js
nā hoʻonui). Inā ʻoe e kūkulu nei i Bootstrap mai ke kumu me kāu ʻōnaehana kūkulu ponoʻī, e hōʻoia e hoʻokō i kāu mau minifiers no HTML, CSS, a me JS.
ʻAʻole pāpā ʻia nā faila
ʻOiai ʻo ka hoʻohaʻahaʻa ʻana a me ka hoʻohana ʻana i ka hoʻopili ʻana paha e like paha me ka lawa, ʻo ka hana ʻana i kāu mau faila me ka pale ʻole ʻana he hana nui hoʻi ia i ka hoʻomaikaʻi ʻana i kāu pūnaewele a me ka wikiwiki.
Inā ʻoe e hoʻohana ana i kahi plugin Lighthouse ma Google Chrome, ua hina paha ʻoe ma luna o FCP. ʻO ke ana ʻana o ka metric First Contentful Paint i ka manawa mai ka wā i hoʻomaka ai ka hoʻouka ʻana o ka ʻaoʻao a hiki i ka manawa e hāʻawi ʻia ai kekahi ʻāpana o ka ʻaoʻao ma ka pale.
Hiki iā ʻoe ke hoʻomaikaʻi i ka FCP ma ka hoʻopaneʻe ʻana i ka JavaScript a i ʻole CSS koʻikoʻi ʻole. He aha kēlā manaʻo? ʻO ka mea maʻalahi, ʻo JavaScript a i ʻole nā pepa kaila ʻaʻole pono e kau ʻia ma ka pena mua o kāu ʻaoʻao e hōʻailona ʻia me nā ʻano async
a i ʻole defer
.
Mālama kēia i ka hoʻouka ʻia ʻana o nā kumuwaiwai liʻiliʻi ma hope a ʻaʻole e ālai i ka pena mua. Ma ka ʻaoʻao ʻē aʻe, hiki ke hoʻokomo ʻia nā kumuwaiwai koʻikoʻi ma ke ʻano he palapala inline a i ʻole nā ʻano.
Inā makemake ʻoe e aʻo hou e pili ana i kēia, ua nui nā ʻatikala maikaʻi e pili ana iā ia:
E hoʻohana mau i ka HTTPS
Pono e loaʻa kāu pūnaewele ma luna o nā pilina HTTPS i ka hana. Hoʻomaikaʻi ʻo HTTPS i ka palekana, ka pilikino, a me ka loaʻa ʻana o nā pūnaewele āpau, a ʻaʻohe mea e like me ke kaʻa pūnaewele non-sensitive . ʻO nā ʻanuʻu no ka hoʻonohonoho ʻana i kāu pūnaewele e lawelawe wale ʻia ma luna o HTTPS ʻokoʻa like ʻole ma muli o kāu hoʻolālā a me ka mea hoʻolako pūnaewele pūnaewele, a no laila ʻoi aku ka nui o kēia mau palapala.
Pono nā paena i lawelawe ʻia ma luna o HTTPS e komo i nā stylesheet āpau, nā palapala, a me nā waiwai ʻē aʻe ma luna o nā pilina HTTPS. A i ʻole, e hoʻouna ana ʻoe i nā mea hoʻohana i hui pū ʻia me nā ʻike hana , e alakaʻi ana i nā nāwaliwali hiki ke hoʻololi ʻia kahi pūnaewele ma ka hoʻololi ʻana i kahi hilinaʻi. Hiki i kēia ke alakaʻi i nā pilikia palekana a me nā ʻōlelo aʻo i loko o ka polokalamu kele pūnaewele i hōʻike ʻia i nā mea hoʻohana. Inā ʻoe e loaʻa ana iā Bootstrap mai kahi CDN a lawelawe paha iā ʻoe iho, e hōʻoia e komo wale ʻoe ma luna o nā pilina HTTPS.