上篇透過簡單的 vue add 指令就完成了 BootstrapVue 安裝和引入，其引入 bootstrap-vue plugin 的方式其實是備妥所有 BootstrapVue 功能和樣式，這樣才能讓使用者在不做任何設定的情況下，便能快速渲染出所有元件內容。好處是方便讓使用者能直接進行開發，附帶的缺點就是被多餘資源佔據專案容量。

這就好比因為不知道你會看哪一本書，所以準備了一整間圖書館給你，表面上讓你方便查找任何一本書，但實際上，你有那麼大的地坪可以容納一間圖書館的藏書量嗎？又或者，每一本書你都確實會看嗎？

試著執行 npm run build，就能發現到 vendors 元件和樣式佔據的資源量有多～麼龐大了吧！

明明我們只用了一個 Navbar 元件而已，卻在無形中被不需要的資源霸佔容量。因此，如果你的專案只需要用到部分元件，建議採用「部分引入」的方式即可，避免空間被多餘的資源佔用而影響效能。

部分引入：用多少、拿多少

以我們目前使用到的 Navbar 元件為例，回到 BootstrapVue 官網 Navbar 文件的最底部分，官方也整理出兩種部分引入的方式供使用者選用：

1. Importing individual components：引入單獨元件

由於 Navbar 涵蓋的內容較多，若只需要該元件中的部分元件，可使用此方法單獨引入。

（圖片來源：截自 BootstrapVue - Navbar - Importing individual components）

2. Importing as a Vue.js plugin：引入 Vue plugin

若是以上部分元件們全數都會使用到，就直接引入整個 Vue plugin 即可，而較大型的元件通常會同時附帶其他 plugins，所以文件內也有指出當引入 NavbarPlugin 時，將會自動包含 NavPlugin、DropdownPlugin、CollapsePlugin。

（圖片來源：截自 BootstrapVue - Navbar - Importing as a Vue.js plugin）

由於本範例會使用到所有 Navbar 元件，因此選擇直接引入 NavbarPlugin。另外，從複製到 <template> 的範例程式碼當中，可以觀察到除了 NavbarPlugin 相關的元件之外，還有出現 <b-form-input>、<b-button> 元件，這兩個分別是 Navbar 元件裡的搜尋欄位和搜尋按鈕，因此要再到 Form Input 和 Button 的文件底部引入其 Vue Plugin。

• bootstrap-vue.js 部分引入

  // 引入元件相關的樣式檔
  import "@/assets/scss/_bootstrapVue.scss";
  
  // 引用<b-navbar>，其中已包含 NavPlugin、DropdownPlugin、CollapsePlugin
  import { NavbarPlugin } from "bootstrap-vue";
  Vue.use(NavbarPlugin);
  
  // 引用<b-form-input> 搜尋欄位
  import { FormInputPlugin } from "bootstrap-vue";
  Vue.use(FormInputPlugin);
  
  // 單獨引用 <b-button> 搜尋按鈕，因為目前不會用到 <b-button-close>
  import { BButton } from "bootstrap-vue";
  Vue.component("b-button", BButton);
  

樣式部分則需另外查看原始碼，同時也可留意有些元件已作為被引入的對象時，就不需要再重複引入，例如 bootstrap-vue 的 navbar 已有引入 dropdown。

• _bootstrapVue.scss

  用波浪符號「~」作為路徑前綴時，webpack 就會搜索 node_modules 底下的資源。

  // Bootstrap basic
  @import "~bootstrap/scss/functions";
  @import "~bootstrap/scss/variables";
  @import "~bootstrap/scss/mixins";
  @import "~bootstrap/scss/root";
  @import "~bootstrap/scss/reboot";
  @import "~bootstrap/scss/utilities";
  
  // Bootstrap grid system
  @import "~bootstrap/scss/grid";
  
  // Bootstrap components
  @import "~bootstrap/scss/transitions";
  @import "~bootstrap/scss/nav";
  @import "~bootstrap/scss/navbar";
  @import "~bootstrap/scss/forms";
  @import "~bootstrap/scss/buttons";
  @import "~bootstrap/scss/dropdown";
  
  // BootstrapVue components
  @import "~bootstrap-vue/src/components/navbar"; // include dropdown
  @import "~bootstrap-vue/src/components/form-input";
  

重新執行 npm run build，發現 vendors 元件和樣式的佔用量都直接打對折囉！

參考資料

• BootstrapVue - Navbar
• Titan - BootstrapVue：環境建置 (引入全部元件/部分元件)
• Webpack - sass-loader - Resolving import at-rules