Day 07：大人更要懂选择－BootstrapVue 部分引入

上篇透过简单的 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