ເພີ່ມປະສິດທິພາບ

ຮັກສາໂຄງການຂອງທ່ານໃຫ້ລຽບ, ຕອບສະຫນອງ, ແລະຮັກສາໄວ້ເພື່ອໃຫ້ທ່ານສາມາດສົ່ງປະສົບການທີ່ດີທີ່ສຸດແລະສຸມໃສ່ວຽກທີ່ສໍາຄັນກວ່າ.

ໃນໜ້ານີ້

Lean Sass ນໍາເຂົ້າ

ເມື່ອໃຊ້ Sass ໃນທໍ່ຊັບສິນຂອງທ່ານ, ໃຫ້ແນ່ໃຈວ່າທ່ານເພີ່ມປະສິດທິພາບ Bootstrap ໂດຍພຽງແຕ່ @importອົງປະກອບທີ່ທ່ານຕ້ອງການ. ການເພີ່ມປະສິດທິພາບທີ່ໃຫຍ່ທີ່ສຸດຂອງເຈົ້າອາດຈະມາຈາກ Layout & Componentsພາກສ່ວນຂອງພວກເຮົາ 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";

ຖ້າຫາກວ່າທ່ານບໍ່ໄດ້ນໍາໃຊ້ອົງປະກອບໃດຫນຶ່ງ, ໃຫ້ຄໍາເຫັນມັນອອກຫຼືລົບມັນທັງຫມົດ. ຕົວຢ່າງ, ຖ້າທ່ານບໍ່ໄດ້ໃຊ້ carousel, ເອົາການນໍາເຂົ້ານັ້ນອອກເພື່ອຊ່ວຍປະຢັດບາງຂະຫນາດໄຟລ໌ໃນ CSS ທີ່ລວບລວມຂອງທ່ານ. ຈົ່ງຈື່ໄວ້ວ່າມີການຂຶ້ນກັບການນໍາເຂົ້າ Sass ບາງຢ່າງທີ່ອາດຈະເຮັດໃຫ້ມັນມີຄວາມຫຍຸ້ງຍາກຫຼາຍທີ່ຈະຍົກເລີກໄຟລ໌.

Lean JavaScript

JavaScript ຂອງ Bootstrap ປະກອບມີທຸກໆອົງປະກອບໃນໄຟລ໌ dist ຕົ້ນຕໍຂອງພວກເຮົາ ( bootstrap.jsແລະ bootstrap.min.js), ແລະແມ້ກະທັ້ງການເພິ່ງພາອາໄສຕົ້ນຕໍຂອງພວກເຮົາ (Popper) ກັບໄຟລ໌ມັດຂອງພວກເຮົາ ( bootstrap.bundle.jsແລະ bootstrap.bundle.min.js). ໃນຂະນະທີ່ທ່ານກໍາລັງປັບແຕ່ງຜ່ານ Sass, ໃຫ້ແນ່ໃຈວ່າຈະເອົາ JavaScript ທີ່ກ່ຽວຂ້ອງອອກ.

ຕົວຢ່າງ, ສົມມຸດວ່າທ່ານກໍາລັງໃຊ້ JavaScript bundler ຂອງທ່ານເອງເຊັ່ນ Webpack ຫຼື Rollup, ທ່ານພຽງແຕ່ຕ້ອງການນໍາເຂົ້າ JavaScript ທີ່ທ່ານວາງແຜນທີ່ຈະໃຊ້. ໃນຕົວຢ່າງຂ້າງລຸ່ມນີ້, ພວກເຮົາສະແດງວິທີການພຽງແຕ່ປະກອບມີ 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';

ດ້ວຍວິທີນີ້, ທ່ານບໍ່ໄດ້ລວມເອົາ JavaScript ໃດໆທີ່ທ່ານບໍ່ຕັ້ງໃຈທີ່ຈະໃຊ້ສໍາລັບອົງປະກອບເຊັ່ນປຸ່ມ, carousels, ແລະຄໍາແນະນໍາເຄື່ອງມື. ຖ້າຫາກວ່າທ່ານກໍາລັງນໍາເຂົ້າ dropdowns, ຄໍາແນະນໍາເຄື່ອງມືຫຼື popovers, ໃຫ້ແນ່ໃຈວ່າການບັນຊີລາຍການ Popper dependency ໃນ package.jsonໄຟລ໌ຂອງທ່ານ.

ການສົ່ງອອກເລີ່ມຕົ້ນ

ໄຟລ໌ທີ່ bootstrap/js/distໃຊ້ການ ສົ່ງອອກໃນຕອນຕົ້ນ , ດັ່ງນັ້ນຖ້າທ່ານຕ້ອງການໃຊ້ຫນຶ່ງໃນນັ້ນ, ທ່ານຕ້ອງເຮັດດັ່ງຕໍ່ໄປນີ້:

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

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

Autoprefixer .browserslistrc

Bootstrap ຂຶ້ນກັບ Autoprefixer ເພື່ອເພີ່ມຄໍານໍາຫນ້າຂອງຕົວທ່ອງເວັບໂດຍອັດຕະໂນມັດກັບຄຸນສົມບັດ CSS ທີ່ແນ່ນອນ. ຄໍານໍາຫນ້າແມ່ນຖືກກໍານົດໂດຍ .browserslistrcໄຟລ໌ຂອງພວກເຮົາ, ພົບເຫັນຢູ່ໃນຮາກຂອງ Bootstrap repo. ການປັບແຕ່ງລາຍຊື່ຂອງຕົວທ່ອງເວັບນີ້ແລະການລວບລວມ Sass ຄືນໃໝ່ຈະເອົາບາງ CSS ອອກຈາກ CSS ທີ່ລວບລວມຂອງທ່ານໂດຍອັດຕະໂນມັດ, ຖ້າມີຕົວນໍາຫນ້າຂອງຜູ້ຂາຍທີ່ເປັນເອກະລັກຂອງຕົວທ່ອງເວັບຫຼືຮຸ່ນນັ້ນ.

CSS ທີ່ບໍ່ໄດ້ໃຊ້

ຕ້ອງການຄວາມຊ່ວຍເຫຼືອໃນພາກນີ້, ກະລຸນາພິຈາລະນາເປີດ PR. ຂອບໃຈ!

ໃນຂະນະທີ່ພວກເຮົາບໍ່ມີຕົວຢ່າງທີ່ສ້າງຂຶ້ນກ່ອນສໍາລັບການນໍາໃຊ້ PurgeCSS ກັບ Bootstrap, ມີບາງບົດຄວາມທີ່ເປັນປະໂຫຍດແລະຄໍາແນະນໍາທີ່ຊຸມຊົນໄດ້ຂຽນ. ນີ້ແມ່ນບາງທາງເລືອກ:

ສຸດທ້າຍ, ບົດຄວາມ Tricks CSS ນີ້ກ່ຽວກັບ CSS ທີ່ບໍ່ໄດ້ໃຊ້ ສະແດງໃຫ້ເຫັນວິທີການນໍາໃຊ້ PurgeCSS ແລະເຄື່ອງມືທີ່ຄ້າຍຄືກັນອື່ນໆ.

ຫຍໍ້ ແລະ gzip

ເມື່ອໃດກໍ່ຕາມທີ່ເປັນໄປໄດ້, ໃຫ້ແນ່ໃຈວ່າຈະບີບອັດລະຫັດທັງຫມົດທີ່ເຈົ້າໃຫ້ບໍລິການກັບຜູ້ມາຢ້ຽມຢາມຂອງທ່ານ. ຖ້າທ່ານກໍາລັງໃຊ້ໄຟລ໌ Bootstrap dist, ພະຍາຍາມຕິດຢູ່ກັບສະບັບທີ່ນ້ອຍລົງ (ຊີ້ໃຫ້ເຫັນໂດຍ .min.cssແລະ .min.jsສ່ວນຂະຫຍາຍ). ຖ້າທ່ານກໍາລັງສ້າງ Bootstrap ຈາກແຫຼ່ງທີ່ມີລະບົບການກໍ່ສ້າງຂອງທ່ານເອງ, ໃຫ້ແນ່ໃຈວ່າຈະປະຕິບັດຕົວຫຍໍ້ຂອງຕົນເອງສໍາລັບ HTML, CSS, ແລະ JS.

ໄຟລ໌ທີ່ບໍ່ຖືກບລັອກ

ໃນຂະນະທີ່ການຫຼຸດຜ່ອນແລະການນໍາໃຊ້ການບີບອັດອາດຈະເບິ່ງຄືວ່າພຽງພໍ, ການເຮັດໃຫ້ໄຟລ໌ຂອງທ່ານບໍ່ຖືກບລັອກແມ່ນຍັງເປັນບາດກ້າວອັນໃຫຍ່ຫຼວງໃນການເຮັດໃຫ້ເວັບໄຊທ໌ຂອງເຈົ້າຖືກເພີ່ມປະສິດທິພາບແລະໄວພຽງພໍ.

ຖ້າທ່ານກໍາລັງໃຊ້ Lighthouse plugin ໃນ Google Chrome, ທ່ານອາດຈະສະດຸດຜ່ານ FCP. ເມຕຣິກການທາສີ ທີ່ມີເນື້ອຫາທໍາອິດ ວັດແທກເວລາຈາກເວລາທີ່ຫນ້າເວັບເລີ່ມໂຫລດເຖິງເວລາທີ່ເນື້ອຫາຂອງຫນ້າເວັບຖືກສະແດງຢູ່ໃນຫນ້າຈໍ.

ທ່ານສາມາດປັບປຸງ FCP ໄດ້ໂດຍການເລື່ອນ JavaScript ຫຼື CSS ທີ່ບໍ່ສໍາຄັນ. ມັນຫມາຍຄວາມວ່າແນວໃດ? ພຽງແຕ່, JavaScript ຫຼື stylesheets ທີ່ບໍ່ຈໍາເປັນຕ້ອງມີຢູ່ໃນສີທໍາອິດຂອງຫນ້າຂອງທ່ານຄວນຈະຖືກຫມາຍດ້ວຍ asyncຫຼື deferຄຸນລັກສະນະ.

ນີ້ຮັບປະກັນວ່າຊັບພະຍາກອນທີ່ສໍາຄັນຫນ້ອຍຖືກໂຫລດໃນພາຍຫລັງແລະບໍ່ຂັດຂວາງສີທໍາອິດ. ໃນທາງກົງກັນຂ້າມ, ຊັບພະຍາກອນທີ່ສໍາຄັນສາມາດຖືກລວມເຂົ້າເປັນ scripts inline ຫຼືຮູບແບບ.

ຖ້າທ່ານຕ້ອງການຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບເລື່ອງນີ້, ມີບົດຄວາມທີ່ດີຫຼາຍແລ້ວກ່ຽວກັບມັນ:

ໃຊ້ HTTPS ສະເໝີ

ເວັບໄຊທ໌ຂອງທ່ານຄວນຈະມີພຽງແຕ່ຜ່ານການເຊື່ອມຕໍ່ HTTPS ໃນການຜະລິດ. HTTPS ປັບປຸງຄວາມປອດໄພ, ຄວາມເປັນສ່ວນຕົວ, ແລະຄວາມພ້ອມຂອງທຸກເວັບໄຊທ໌, ແລະ ບໍ່ມີສິ່ງດັ່ງກ່າວເປັນການເຂົ້າຊົມເວັບທີ່ບໍ່ລະອຽດອ່ອນ . ຂັ້ນຕອນໃນການຕັ້ງຄ່າເວັບໄຊທ໌ຂອງທ່ານໃຫ້ໃຫ້ບໍລິການສະເພາະຜ່ານ HTTPS ແຕກຕ່າງກັນໄປຕາມສະຖາປັດຕະຍະກໍາ ແລະຜູ້ໃຫ້ບໍລິການເວັບໂຮດຕິ້ງຂອງເຈົ້າ, ແລະດັ່ງນັ້ນຈຶ່ງເກີນຂອບເຂດຂອງເອກະສານເຫຼົ່ານີ້.

ເວັບໄຊທ໌ທີ່ໃຫ້ບໍລິການຜ່ານ HTTPS ຄວນເຂົ້າເຖິງທຸກຮູບແບບ, ສະຄຣິບ, ແລະຊັບສິນອື່ນໆຜ່ານການເຊື່ອມຕໍ່ HTTPS. ຖ້າບໍ່ດັ່ງນັ້ນ, ທ່ານຈະສົ່ງຜູ້ໃຊ້ ທີ່ປະສົມປະສານເນື້ອຫາທີ່ມີການເຄື່ອນໄຫວ , ນໍາໄປສູ່ຈຸດອ່ອນທີ່ອາດຈະເຮັດໃຫ້ເວັບໄຊທ໌ຖືກທໍາລາຍໂດຍການປ່ຽນແປງການເພິ່ງພາອາໄສ. ນີ້ສາມາດນໍາໄປສູ່ບັນຫາຄວາມປອດໄພແລະຄໍາເຕືອນໃນຕົວທ່ອງເວັບທີ່ສະແດງໃຫ້ຜູ້ໃຊ້. ບໍ່ວ່າທ່ານກໍາລັງໄດ້ຮັບ Bootstrap ຈາກ CDN ຫຼືໃຫ້ບໍລິການຕົວທ່ານເອງ, ໃຫ້ແນ່ໃຈວ່າທ່ານເຂົ້າເຖິງມັນຜ່ານການເຊື່ອມຕໍ່ HTTPS ເທົ່ານັ້ນ.