Optimalkan

Impor Lean Sass

Saat menggunakan Sass di saluran aset Anda, pastikan Anda mengoptimalkan Bootstrap dengan hanya @importmenggunakan komponen yang Anda butuhkan. Pengoptimalan terbesar Anda kemungkinan akan berasal dari Layout & Componentsbagian 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, beri komentar atau hapus seluruhnya. Misalnya, jika Anda tidak menggunakan carousel, hapus impor itu untuk menyimpan beberapa ukuran file di CSS yang dikompilasi. Perlu diingat bahwa ada beberapa dependensi di seluruh impor Sass yang mungkin mempersulit penghapusan file.

JavaScript ramping

JavaScript Bootstrap mencakup setiap komponen dalam file dist utama kami ( bootstrap.jsdan bootstrap.min.js), dan bahkan ketergantungan utama kami (Popper) dengan file bundel kami ( bootstrap.bundle.jsdan bootstrap.bundle.min.js). Saat Anda menyesuaikan melalui Sass, pastikan untuk menghapus JavaScript terkait.

Misalnya, dengan asumsi Anda menggunakan bundler JavaScript Anda sendiri seperti Webpack, Parcel, atau Vite, Anda hanya akan mengimpor JavaScript yang Anda rencanakan untuk digunakan. Pada contoh di bawah ini, kami menunjukkan cara memasukkan modal JavaScript kami:

// 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 menyertakan JavaScript apa pun yang tidak ingin Anda gunakan untuk komponen seperti tombol, carousel, dan tooltips. Jika Anda mengimpor dropdown, tooltips, atau popover, pastikan untuk mencantumkan ketergantungan Popper di package.jsonfile Anda.

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

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

Autoprefixer .browserslistrc

Bootstrap bergantung pada Autoprefixer untuk secara otomatis menambahkan awalan browser ke properti CSS tertentu. Awalan ditentukan oleh .browserslistrcfile kami, ditemukan di root repo Bootstrap. Menyesuaikan daftar browser ini dan mengkompilasi ulang Sass akan secara otomatis menghapus beberapa CSS dari kompilasi CSS Anda, jika ada awalan vendor yang unik untuk browser atau versi tersebut.

CSS yang tidak digunakan

Bantuan yang diinginkan dengan bagian ini, harap pertimbangkan untuk membuka PR. Terima kasih!

Meskipun kami tidak memiliki contoh bawaan untuk menggunakan PurgeCSS dengan Bootstrap, ada beberapa artikel dan panduan bermanfaat yang telah ditulis oleh komunitas. Berikut adalah beberapa opsi:

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

Terakhir, artikel Trik CSS tentang CSS yang tidak digunakan ini menunjukkan cara menggunakan PurgeCSS dan alat serupa lainnya.

Perkecil dan gzip

Bila memungkinkan, pastikan untuk mengompres semua kode yang Anda sajikan kepada pengunjung Anda. Jika Anda menggunakan file dist Bootstrap, cobalah untuk tetap menggunakan versi yang diperkecil (ditunjukkan oleh ekstensi .min.cssdan ). .min.jsJika Anda membuat Bootstrap dari sumber dengan sistem build Anda sendiri, pastikan untuk mengimplementasikan minifier Anda sendiri untuk HTML, CSS, dan JS.

File yang tidak memblokir

Meskipun mengecilkan dan menggunakan kompresi mungkin tampak cukup, membuat file Anda tidak memblokir juga merupakan langkah besar dalam membuat situs Anda dioptimalkan dengan baik dan cukup cepat.

Jika Anda menggunakan plugin Lighthouse di Google Chrome, Anda mungkin menemukan FCP. Metrik First Contentful Paint mengukur waktu mulai dari saat halaman mulai dimuat hingga saat bagian mana pun dari konten halaman ditampilkan di layar.

Anda dapat meningkatkan FCP dengan menunda JavaScript atau CSS yang tidak penting. Apa artinya? Sederhananya, JavaScript atau stylesheet yang tidak perlu ada pada cat pertama halaman Anda harus ditandai dengan asyncatau deferatribut.

Ini memastikan bahwa sumber daya yang kurang penting dimuat kemudian dan tidak menghalangi cat pertama. Di sisi lain, sumber daya penting dapat dimasukkan sebagai skrip atau gaya sebaris.

Jika Anda ingin mempelajari lebih lanjut tentang ini, sudah ada banyak artikel bagus tentangnya:

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

Selalu gunakan HTTPS

Situs web Anda seharusnya hanya tersedia melalui koneksi HTTPS dalam produksi. HTTPS meningkatkan keamanan, privasi, dan ketersediaan semua situs, dan tidak ada lalu lintas web yang tidak sensitif . Langkah-langkah untuk mengonfigurasi situs web Anda agar disajikan secara eksklusif melalui HTTPS sangat bervariasi tergantung pada arsitektur dan penyedia hosting web Anda, dan dengan demikian berada di luar cakupan dokumen ini.

Situs yang dilayani melalui HTTPS juga harus mengakses semua stylesheet, skrip, dan aset lainnya melalui koneksi HTTPS. Jika tidak, Anda akan mengirimkan konten aktif campuran kepada pengguna , yang mengarah ke potensi kerentanan di mana situs dapat disusupi dengan mengubah ketergantungan. Ini dapat menyebabkan masalah keamanan dan peringatan dalam browser yang ditampilkan kepada pengguna. Baik Anda mendapatkan Bootstrap dari CDN atau menyajikannya sendiri, pastikan Anda hanya mengaksesnya melalui koneksi HTTPS.