Optimumkan

Import Lean Sass

Apabila menggunakan Sass dalam saluran paip aset anda, pastikan anda mengoptimumkan Bootstrap dengan hanya @importmemasukkan komponen yang anda perlukan. Pengoptimuman terbesar anda mungkin akan datang daripada Layout & Componentsbahagian kami bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@import "maps";
@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";

Jika anda tidak menggunakan komponen, ulaskannya atau padamkannya sepenuhnya. Contohnya, jika anda tidak menggunakan karusel, alih keluar import itu untuk menyimpan beberapa saiz fail dalam CSS terkumpul anda. Perlu diingat bahawa terdapat beberapa kebergantungan merentas import Sass yang mungkin menyukarkan untuk meninggalkan fail.

JavaScript Lean

JavaScript Bootstrap merangkumi setiap komponen dalam fail dist utama kami ( bootstrap.jsdan bootstrap.min.js), malah pergantungan utama kami (Popper) dengan fail berkas kami ( bootstrap.bundle.jsdan bootstrap.bundle.min.js). Semasa anda menyesuaikan melalui Sass, pastikan anda mengalih keluar JavaScript yang berkaitan.

Contohnya, dengan mengandaikan anda menggunakan pengikat JavaScript anda sendiri seperti Webpack, Parcel atau Vite, anda hanya akan mengimport JavaScript yang anda bercadang untuk menggunakan. Dalam contoh di bawah, kami menunjukkan cara untuk memasukkan JavaScript modal kami sahaja:

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

Dengan cara ini, anda tidak memasukkan sebarang JavaScript yang anda tidak mahu gunakan untuk komponen seperti butang, karusel dan petua alat. Jika anda mengimport dropdown, petua alat atau popover, pastikan anda menyenaraikan kebergantungan Popper dalam package.jsonfail anda.

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

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

Autoprefixer .browserslistrc

Bootstrap bergantung pada Autoprefixer untuk menambahkan awalan penyemak imbas secara automatik pada sifat CSS tertentu. Awalan ditentukan oleh .browserslistrcfail kami, terdapat dalam akar repo Bootstrap. Menyesuaikan senarai penyemak imbas ini dan menyusun semula Sass akan mengalih keluar beberapa CSS secara automatik daripada CSS terkumpul anda, jika terdapat awalan vendor yang unik untuk penyemak imbas atau versi tersebut.

CSS yang tidak digunakan

Bantuan diperlukan dengan bahagian ini, sila pertimbangkan untuk membuka PR. Terima kasih!

Walaupun kami tidak mempunyai contoh prabina untuk menggunakan PurgeCSS dengan Bootstrap, terdapat beberapa artikel dan panduan berguna yang telah ditulis oleh komuniti. Berikut adalah beberapa pilihan:

• 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/

Akhir sekali, artikel Trik CSS ini tentang CSS yang tidak digunakan menunjukkan cara menggunakan PurgeCSS dan alatan lain yang serupa.

Kecilkan dan gzip

Apabila boleh, pastikan anda memampatkan semua kod yang anda sediakan kepada pelawat anda. Jika anda menggunakan fail Bootstrap dist, cuba berpegang pada versi yang dikecilkan (ditunjukkan oleh .min.cssdan .min.jssambungan). Jika anda membina Bootstrap daripada sumber dengan sistem binaan anda sendiri, pastikan anda melaksanakan pemencil anda sendiri untuk HTML, CSS dan JS.

Fail tidak menyekat

Walaupun mengecilkan dan menggunakan pemampatan mungkin kelihatan seperti cukup, menjadikan fail anda tidak menyekat juga merupakan langkah besar dalam menjadikan tapak anda dioptimumkan dengan baik dan cukup pantas.

Jika anda menggunakan pemalam Lighthouse dalam Google Chrome, anda mungkin terjumpa FCP. Metrik Cat Kandungan Pertama mengukur masa dari halaman mula dimuatkan hingga apabila mana-mana bahagian kandungan halaman dipaparkan pada skrin.

Anda boleh meningkatkan FCP dengan menangguhkan JavaScript atau CSS yang tidak kritikal. Apakah maksudnya? Mudah sahaja, JavaScript atau helaian gaya yang tidak perlu ada pada cat pertama halaman anda hendaklah ditandakan dengan asyncatau deferatribut.

Ini memastikan bahawa sumber yang kurang penting dimuatkan kemudian dan tidak menyekat cat pertama. Sebaliknya, sumber kritikal boleh disertakan sebagai skrip atau gaya sebaris.

Jika anda ingin mengetahui lebih lanjut mengenai perkara ini, sudah ada banyak artikel hebat mengenainya:

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

Sentiasa gunakan HTTPS

Tapak web anda seharusnya hanya tersedia melalui sambungan HTTPS dalam pengeluaran. HTTPS meningkatkan keselamatan, privasi dan ketersediaan semua tapak, dan tiada perkara seperti trafik web tidak sensitif . Langkah-langkah untuk mengkonfigurasi tapak web anda untuk disiarkan secara eksklusif melalui HTTPS berbeza-beza bergantung pada seni bina dan penyedia pengehosan web anda, dan dengan itu berada di luar skop dokumen ini.

Tapak yang disampaikan melalui HTTPS juga harus mengakses semua helaian gaya, skrip dan aset lain melalui sambungan HTTPS. Jika tidak, anda akan menghantar kandungan aktif bercampur kepada pengguna , yang membawa kepada potensi kelemahan yang mana tapak boleh terjejas dengan mengubah pergantungan. Ini boleh membawa kepada isu keselamatan dan amaran dalam penyemak imbas dipaparkan kepada pengguna. Sama ada anda mendapat Bootstrap daripada CDN atau menyajikannya sendiri, pastikan anda hanya mengaksesnya melalui sambungan HTTPS.