Hoʻonui

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";

// 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.jsa bootstrap.min.js), a me kā mākou hilinaʻi nui (Popper) me kā mākou pūʻulu waihona ( bootstrap.bundle.jsa 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/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.jsonfaila.

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 .browserslistrcfaila, 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.cssa me .min.jsnā 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.

Nā faila pale ʻole

ʻ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 hoʻopaʻa ʻ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 asynca 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:

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

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.