เพิ่มประสิทธิภาพ
ให้โครงการของคุณเป็นแบบลีน ตอบสนอง และบำรุงรักษาได้ เพื่อให้คุณสามารถมอบประสบการณ์ที่ดีที่สุดและมุ่งเน้นไปที่งานที่สำคัญกว่า
การนำเข้าแบบ 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";
หากคุณไม่ได้ใช้คอมโพเนนต์ ให้แสดงความคิดเห็นหรือลบออกทั้งหมด ตัวอย่างเช่น หากคุณไม่ได้ใช้ภาพหมุน ให้นำการนำเข้านั้นออกเพื่อบันทึกขนาดไฟล์บางส่วนใน CSS ที่คอมไพล์แล้ว โปรดทราบว่ามีการอ้างอิงบางอย่างในการนำเข้า Sass ที่อาจทำให้ละเว้นไฟล์ได้ยากขึ้น
จาวาสคริปต์แบบลีน
JavaScript ของ Bootstrap รวมทุกองค์ประกอบในไฟล์ dist หลักของเรา ( bootstrap.jsและbootstrap.min.js) และแม้แต่การพึ่งพาหลักของเรา (Popper) กับไฟล์บันเดิลของเรา ( bootstrap.bundle.jsและbootstrap.bundle.min.js) ขณะที่คุณกำลังปรับแต่งผ่าน Sass อย่าลืมลบ JavaScript ที่เกี่ยวข้อง
ตัวอย่างเช่น สมมติว่าคุณใช้ชุดรวม JavaScript ของคุณเอง เช่น Webpack หรือ Rollup คุณจะต้องนำเข้าเฉพาะ JavaScript ที่คุณวางแผนจะใช้เท่านั้น ในตัวอย่างด้านล่าง เราแสดงวิธีการรวม modal JavaScript ของเรา:
// 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 ใดๆ ที่คุณไม่ได้ตั้งใจจะใช้สำหรับส่วนประกอบต่างๆ เช่น ปุ่ม ภาพหมุน และคำแนะนำเครื่องมือ หากคุณกำลังนำเข้าดรอปดาวน์ คำแนะนำเครื่องมือ หรือป๊อปโอเวอร์ อย่าลืมแสดงรายการการพึ่งพา Popper ในpackage.jsonไฟล์ ของคุณ
การส่งออกเริ่มต้น
ไฟล์bootstrap/js/distที่ใช้การเอ็กซ์พอร์ตเริ่มต้นดังนั้นหากคุณต้องการใช้ไฟล์ใดไฟล์หนึ่ง คุณต้องดำเนินการดังต่อไปนี้:
import Modal from 'bootstrap/js/dist/modal'
const modal = new Modal(document.getElementById('myModal'))
คำนำหน้าอัตโนมัติ .browserslistrc
Bootstrap ขึ้นอยู่กับ Autoprefixer เพื่อเพิ่มคำนำหน้าเบราว์เซอร์ให้กับคุณสมบัติ CSS บางอย่างโดยอัตโนมัติ คำนำหน้าถูกกำหนดโดย.browserslistrcไฟล์ของเรา ซึ่งพบได้ในรูทของ Bootstrap repo การปรับแต่งรายการเบราว์เซอร์นี้และการคอมไพล์ Sass ใหม่จะเป็นการลบ CSS บางส่วนออกจาก CSS ที่คอมไพล์ของคุณโดยอัตโนมัติ หากมีคำนำหน้าของผู้จำหน่ายเฉพาะสำหรับเบราว์เซอร์หรือเวอร์ชันนั้น
CSS ที่ไม่ได้ใช้
ต้องการความช่วยเหลือในส่วนนี้ โปรดพิจารณาเปิด PR ขอบคุณ!
แม้ว่าเราจะไม่มีตัวอย่างที่สร้างไว้ล่วงหน้าสำหรับการใช้PurgeCSSกับ Bootstrap แต่ก็มีบทความและคำแนะนำที่เป็นประโยชน์บางประการที่ชุมชนได้เขียนไว้ นี่คือตัวเลือกบางส่วน:
- 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/
สุดท้ายนี้บทความ CSS Tricks เกี่ยวกับ CSS ที่ไม่ได้ใช้แสดงวิธีใช้ PurgeCSS และเครื่องมืออื่นๆ ที่คล้ายคลึงกัน
ลดขนาดและ gzip
เมื่อใดก็ตามที่เป็นไปได้ อย่าลืมบีบอัดรหัสทั้งหมดที่คุณให้บริการแก่ผู้เยี่ยมชมของคุณ หากคุณใช้ไฟล์ Bootstrap dist ให้ลองใช้เวอร์ชันย่อเล็กสุด (ระบุโดยไฟล์.min.cssและ.min.jsนามสกุล) หากคุณกำลังสร้าง Bootstrap จากซอร์สด้วยระบบบิลด์ของคุณเอง ตรวจสอบให้แน่ใจว่าได้ติดตั้งตัวลดขนาดของคุณเองสำหรับ HTML, CSS และ JS
ไฟล์ที่ไม่บล็อก
แม้ว่าการลดขนาดและการใช้การบีบอัดอาจดูเหมือนเพียงพอ แต่การทำให้ไฟล์ของคุณไม่ถูกบล็อกก็เป็นขั้นตอนใหญ่ในการทำให้เว็บไซต์ของคุณได้รับการปรับให้เหมาะสมและรวดเร็วเพียงพอ
หากคุณกำลังใช้ ปลั๊กอิน Lighthouseใน Google Chrome คุณอาจสะดุดกับ FCP เมตริก First Contentful Paintวัดเวลาตั้งแต่เมื่อหน้าเริ่มโหลดจนถึงเวลาที่ส่วนใดส่วนหนึ่งของเนื้อหาของหน้าแสดงผลบนหน้าจอ
คุณสามารถปรับปรุง FCP ได้โดยการเลื่อนเวลา JavaScript หรือ CSS ที่ไม่สำคัญออกไป นั่นหมายความว่าอย่างไร? พูดง่ายๆ ก็คือ JavaScript หรือสไตล์ชีตที่ไม่จำเป็นต้องแสดงในสีแรกของหน้าเว็บควรมีเครื่องหมายasyncหรือdeferแอตทริบิวต์
เพื่อให้แน่ใจว่าทรัพยากรที่มีความสำคัญน้อยกว่าจะถูกโหลดในภายหลังและไม่ปิดกั้นการระบายสีครั้งแรก ในทางกลับกัน ทรัพยากรที่สำคัญสามารถรวมเป็นสคริปต์หรือสไตล์แบบอินไลน์ได้
หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้ มีบทความดีๆ มากมายเกี่ยวกับเรื่องนี้อยู่แล้ว:
ใช้ HTTPS . เสมอ
เว็บไซต์ของคุณควรใช้งานได้ผ่านการเชื่อมต่อ HTTPS ในการผลิตเท่านั้น HTTPS ปรับปรุงความปลอดภัย ความเป็นส่วนตัว และความพร้อมใช้งานของไซต์ทั้งหมด และไม่มีสิ่งใดที่เป็นการเข้าชมเว็บที่ไม่ละเอียดอ่อน ขั้นตอนในการกำหนดค่าเว็บไซต์ของคุณให้แสดงผ่าน HTTPS เท่านั้นจะแตกต่างกันไปตามสถาปัตยกรรมและผู้ให้บริการเว็บโฮสติ้ง ดังนั้นจึงอยู่นอกเหนือขอบเขตของเอกสารเหล่านี้
เว็บไซต์ที่ให้บริการผ่าน HTTPS ควรเข้าถึงสไตล์ชีต สคริปต์ และเนื้อหาอื่นๆ ทั้งหมดผ่านการเชื่อมต่อ HTTPS มิฉะนั้น คุณจะส่งผู้ใช้ผสมเนื้อหาที่ใช้งานซึ่งนำไปสู่ช่องโหว่ที่อาจเกิดขึ้นซึ่งไซต์สามารถถูกบุกรุกโดยการเปลี่ยนแปลงการพึ่งพา ซึ่งอาจนำไปสู่ปัญหาด้านความปลอดภัยและคำเตือนในเบราว์เซอร์ที่แสดงต่อผู้ใช้ ไม่ว่าคุณจะรับ Bootstrap จาก CDN หรือให้บริการด้วยตัวเอง ตรวจสอบให้แน่ใจว่าคุณเข้าถึงได้ผ่านการเชื่อมต่อ HTTPS เท่านั้น