Optimize nga

Pagtalinaedem a nalukmeg, makasungbat, ken mataginayon dagiti proyektom tapno maitedmo ti kasayaatan a kapadasan ken maipamaysam dagiti napatpateg a trabaho.

Iti daytoy a panid

Lean Sass nga ag-import

No agus-usar ti Sass iti asset pipeline mo, siguraduem nga optimize ti Bootstrap babaen laeng @importti ing dagiti components a kasapulam. Dagiti kadakkelan nga optimisasionmo ket nalabit aggapu iti Layout & Componentsbenneg ti 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";

No dika agus-usar iti maysa a paset, komentom dayta wenno interamente nga i-delete-mo. Kas pagarigan, no saanmo nga agus-usar ti carousel, ikkatem dayta nga import tapno mangidulin iti sumagmamano a kadakkel ti file iti naurnongmo a CSS. Laglagipem nga adda dagiti sumagmamano a panagpanpanunot iti ballasiw dagiti panagala ti Sass a mabalin a mangaramid a narigrigat a mangikkat ti maysa a papeles.

Agsanud iti JavaScript

Ti JavaScript ti Bootstrap ket mangiraman ti tunggal maysa a paset kadagiti kangrunaan a dist a papelestayo ( bootstrap.jsken bootstrap.min.js), ken urayno ti kangrunaan a panagpannuraytayo (Popper) kadagiti bundle a papelestayo ( bootstrap.bundle.jsken bootstrap.bundle.min.js). Bayat ti panag-customize-mo babaen ti Sass, siguraduem nga ikkaten dagiti mainaig a JavaScript.

Kas pagarigan, no ipapanmo nga agus-usar ka ti bukodmo a JavaScript bundler a kas ti Webpack wenno Rollup, i-importmo laeng ti JavaScript a planom nga usaren. Iti pagarigan iti baba, ipakitami no kasano nga iraman laeng ti modal a JavaScriptmi:

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

Iti daytoy a wagas, saanmo nga iraman ti ania man a JavaScript a saanmo a panggep nga usaren para kadagiti paset a kas dagiti buton, karusel, ken dagiti tooltip. No ag-importka kadagiti dropdown, tooltip wenno popover, siguraduem nga ilista ti panagpannuray ti Popper iti package.jsonfilemo.

Dagiti Default nga Eksport

Dagiti papeles nga agus- bootstrap/js/distusar ti default nga eksport , isu a no kayatmo nga usaren ti maysa kadagitoy masapul nga aramidem dagiti sumaganad:

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

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

Autoprefixer .dagiti-browserlistrc

Ti Bootstrap ket agpannuray iti Autoprefixer tapno automatiko a manginayon kadagiti pangrugian ti browser kadagiti sumagmamano a tagikua ti CSS. Dagiti prefix ket idiktar babaen ti .browserslistrcfilemi, a masarakan iti ramut ti Bootstrap repo. Ti panangipasayaat iti daytoy a listaan dagiti browser ken panagtipon manen ti Sass ket automatiko nga ikkatenna ti sumagmamano a CSS manipud iti naurnongmo a CSS, no adda dagiti pangrugian ti aglaklako a naisangsangayan iti dayta a browser wenno bersion.

Di nausar a CSS

Tulong a kayat iti daytoy a benneg, pangngaasiyo ta ibilangyo ti pananglukat iti PR. Agyaman!

Bayat nga awan ti nasakbay a naibangon a pagarigan para iti panagusar ti PurgeCSS nga addaan iti Bootstrap, adda dagiti sumagmamano a makatulong nga artikulo ken dagiti panagdaliasat nga insurat ti komunidad. Adtoy ti sumagmamano a pagpilian:

Maudi, daytoy nga artikulo ti CSS Tricks iti saan a nausar a CSS ket mangipakita no kasano ti agusar ti PurgeCSS ken dagiti dadduma pay nga umasping nga alikamen.

Pabassiten ken gzip

No mabalin, siguraduenyo nga i-compress amin a code nga iserbiyo kadagiti bisitayo. No agus-usar ka kadagiti Bootstrap dist files, padasem ti agtalinaed kadagiti napabassit a bersion (naipakita babaen ti .min.cssken dagiti .min.jsekstension). No mangbangbangonka ti Bootstrap manipud iti taudan nga addaan iti bukodmo a sistema ti panagbangon, siguraduem nga ipatungpalmo dagiti bukodmo a minifier para iti HTML, CSS, ken JS.

Dagiti saan a manglapped a file

Bayat a ti panangpabassit ken panangusar iti panagkompresion ket mabalin a kasla umdasen, ti panagaramid kadagiti filemo a saan a manglapped ket maysa met a dakkel nga addang iti panagaramid ti site-mo a nasayaat a nasayaat ken umdas a napartak.

No agus-usarkayo iti Lighthouse plugin iti Google Chrome, mabalin a naitibkolkayo iti FCP. Ti Umuna a Linaon a Pintura a metriko ket mangrukod ti oras manipud no mangrugi ti panid a panagkarga aginggana no ania man a paset ti linaon ti panid ket maiparang iti iskrin.

Mabalinmo a pasayaaten ti FCP babaen ti panangitantan kadagiti saan a kritikal a JavaScript wenno CSS. Ania ti kayat a sawen dayta? Basta, dagiti JavaScript wenno dagiti stylesheet a saan a kasapulan nga adda iti umuna a pintura ti panidmo ket rumbeng a namarkaan iti asyncwenno deferdagiti attribute.

Daytoy ti mangipasigurado a dagiti saan unay a napateg a rekurso ket maikarga inton agangay ken saan a manglapped iti umuna a pintura. Iti sabali a bangir, dagiti kritikal a rekurso ket mabalin a mairaman a kas dagiti inline nga iskrip wenno dagiti estilo.

No kayatmo a maammuan ti ad-adu pay maipapan iti daytoy, adun dagiti nagsayaat nga artikulo maipapan iti dayta:

Kanayon nga usaren ti HTTPS

Ti websitemo ket rumbeng laeng a magun-od babaen dagiti koneksion ti HTTPS iti produksion. Ti HTTPS ket mangpasayaat ti seguridad, kinapribado, ken kaadda ti amin a site, ken awan ti makunkuna a saan a sensitibo a trapiko ti web . Dagiti addang a mangikonfigura ti website-mo tapno maserbian nga eksklusibo babaen ti HTTPS ket nadumaduma unay depende iti arkitekturam ken ti mangipapaay ti panagsangaili ti web, ken iti kasta ket adda iti labes ti sakup dagitoy a dok.

Dagiti site a naserbian babaen ti HTTPS ket rumbeng pay a makastrek kadagiti amin nga stylesheet, dagiti iskrip, ken dagiti dadduma pay nga asset babaen dagiti koneksion ti HTTPS. No saan, mangipatulodka kadagiti agar-aramat iti naglaok nga aktibo a linaon , a mangiturong kadagiti mabalin a kinaawan ti proteksion a sadiay ti maysa a site ket mabalin a maikompromiso babaen ti panangbalbaliw iti panagpannuray. Mabalin nga agtungpal daytoy kadagiti isyu ti seguridad ken dagiti pakdaar iti uneg ti browser a maiparang kadagiti agar-aramat. Uray no makagun-odka iti Bootstrap manipud iti CDN wenno agserserbi a mismo iti dayta, siguraduem nga aksesem laeng daytoy babaen kadagiti koneksion ti HTTPS.