最近幾年以來，前端開發人員似乎就一直處在一種特殊的矛盾中，即：越來越龐大的前端代碼，以及訪問者越來越消失的耐性之間的矛盾，他們習慣了各種如本地應用般的即時性，恨不得所有的網頁都能在1秒內加載完畢。
如果花費的時間比這更長，他們可能會不斷的刷新，然後在繼續一無所獲後，離開你精心為他們準備的網站。甚至有時候，這甚至會導致你脆弱服務器的一次小型的奔潰。
而當你分析起，為何你的前端代碼會變得如此龐大時，使用了Bootstrap，可能是你經常會得到的結果之一。似乎只要在項目中，一使用這種流行的前端UI庫，你就得承受這種種的煩惱。
事實果真如此？今天，我將教大家，通過三個前端優化步驟，來確保基於Bootstrap的網站能夠快速渲染並優化。
1、只需下載您需要的預編譯程序包
如果你決定使用由Bootstrap進行預編譯的下載包，那麼，請你仔細的考慮下，哪些庫是你真正需要的，下面是一些建議。
（1）如果可能，千萬別使用包含完整的CSS庫bootstrap.css或bootstrap.min.css，以及除jQuery外的所有依賴項的JavaScript組件庫包bootstrap.bundle.js或bootstrap.bundle.min.js，雖然這很方便，但對於絕大部分的工程而言，這都太大了。
（2）如果你只需要包含Bootstrap基本風格的CSS類庫，來寫作你的HTML，以保證他們正常的按Bootstrap的原則，在各種不同尺寸的設備上進行合適的排版，那麼bootstrap-reboot.min.css就是最合適的，你甚至不需要引入任何的Bootstrap JavaScript文件。而如果此時恰好你除了這些之外，還想使用Bootstrap的靈活且易於使用的網格系統，那麼您應該去引入bootstrap-grid.min.css。
（3）與CSS類似，JavaScript代碼的引入也應該採用這一原則，比如說當你知道項目中不會出現下拉菜單，彈出窗口和工具提示時，你就更應該去使用bootstrap.min.js，因為哪些包含在bootstrap.bundle.min.js的Popper.js什麼的，其實你根本就用不著。
2、如果可能，應該選擇從源開始的構建，而不是選擇預編譯的下載包
比剛才更好的主意，當然是從源代碼開始，構建最符合你要求的“自己”的Bootstrap。畢竟，官方所給出的預編譯的文件，仍可能包含您可能實際上並不需要的內容不是麼？
這肯定是需要更多的一些知識和技巧的，因為，這通常就意味著，你需要了解幾乎每一個Bootstrap所包含的CSS文件和JavaScript類庫的作用，並且如果你是從LESS開始進行構建，你還需要非常熟悉和了解Grunt這樣的工具的使用方式。
但相信我，這些都是值得的，一個最小但高效的，且無需重複覆蓋樣式的清潔的類庫，不僅可以加快加載的速度，也更有利於瀏覽器進行UI的渲染。
3、千萬別忘記，那些在非Bootstrap網站開發中，被反覆經驗驗證過了的客戶端優化技術
它們包括但不限於：
（1）編寫更加精簡的CSS和JavaScript代碼
別忘了，代碼中的每個字符，最後都會添加到網頁中，並加重它的下載負荷。因此，編寫乾淨簡潔的CSS和JavaScript代碼，同時保持可讀性，對於任何一個前端開發人員而言，都是一個挑戰。
良好的CSS實踐包括：去除未使用的選擇器，重複的風格，並避免過度嵌套等等。因此，在項目開始之初，就對整體頁面組織有明確的規劃，並真正理解Bootstrap的各種風格，以儘量避免自創風格是非常重要的，當然，模式上，在整個項目組推廣LESS，也算是一個不二法門。
此外，還有很多很棒的工具可以幫助您清理代碼。比如像CSS Lint和JSLint等，它們不僅僅是你檢查語法錯誤的工具，也是你查找那些使用了低效的編碼模式，或從未使用過的代碼等方面內容的利器。
（2）最小化實踐
每次HTTP請求都要進行一次和服務器的握手！因此，別猶豫，儘量的壓縮（即從文檔中刪除無用的註釋和空白）和拼合CSS和JavaScript文件，現在已經成為一種非常流行的整合實踐方式，如果大家對此感興趣，可以在回覆中留言，我也非常樂意和大家分享這些方面的內容。
（3）注意圖像文件
網頁中最重要的部分，現在通常都是通過圖像文件來表示（但也不盡然，尤其是在Canvas和WebGL技術高度發展的今天，但那個對於普通Web前端開發人員而言，難度不小），當然，音頻和視頻文件也是其中的一部分。因此，優化這些視覺要素，對於提高網站加性能，是至關重要的。
這裡提供有兩個有用的小貼士：
使用正確的圖像格式：圖像格式還有正確的？當然，這實際上也是近幾年很多廠商競爭的一個熱點，好吧，或者你並不關心這個。
在上傳它們之前儘可能的進行優化，有很多工具可以幹這個活，TinyPNG、SSVGOMG等。
或者您有更好的建議？歡迎您在回覆中留言，畢竟，對於技術，我覺得，獨樂了不如眾樂樂，有時候，討論會引發新的火花。
又或者您其實剛剛入門Bootstrap，並不清楚關於Bootstrap，尤其是Bootstrap 4的相關細節，歡迎大家關注我，因為我正在考慮就這些方面的內容，為相關初學者，準備一個還算有趣的課程中。
閱讀更多 紙的飛機 的文章
