最近幾年以來，前端開發人員似乎就一直處在一種特殊的矛盾中，即：越來越龐大的前端代碼，以及訪問者越來越消失的耐性之間的矛盾，他們習慣了各種如本地應用般的即時性，恨不得所有的網頁都能在1秒內加載完畢。

如果花費的時間比這更長，他們可能會不斷的刷新，然后在繼續一無所獲后，離開你精心為他們準備的網站。甚至有時候，這甚至會導致你脆弱服務器的一次小型的奔潰。

而當你分析起，為何你的前端代碼會變得如此龐大時，使用了Bootstrap，可能是你經常會得到的結果之一。似乎只要在項目中，一使用這種流行的前端UI庫，你就得承受這種種的煩惱。

事實果真如此？今天，我將教大家，通過三個前端優化步驟，來確?；贐ootstrap的網站能夠快速渲染并優化。

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的相關細節，歡迎大家關注我，因為我正在考慮就這些方面的內容，為相關初學者，準備一個還算有趣的課程中。