bootstrap-vue,iconのバンドルを減らす。開発時に気をつけたいbootstrap-vueの使い方

2021.03.29

こんにちはjunです。Nuxt.js or Vue.js x Bootstrap-vue の構成を使って管理画面UIを作成する機会が多く、それらの融合性や使いやすさに虜になっています。しかしやけにビルドの時間がかかるなーと思っていたら、なんとバンドルサイズが1MBを超いたという事実に気付き、慌てて対処しました。（他のライブラリもあります）

今回はそのbootstrap-vueを使ったアプリのバンドルサイズを減らす方法として、開発時から気をつけたいことについて述べます。

そのままいれるな

ドキュメントの最初の方にある通り、bootstrap-vueとboo-strap-iconを以下のようにいれるとかなりサイズを食います。

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';

Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

理由はnode_modulesのBootstrap-vueの全てを入れているためです。別に全てのbootstrapモジュールを使用しているならば問題ありませんが、基本的にそんな状況はないと思います。importでモジュールを読み込む時は原則、必要なものだけインポートして置くことがベストです。それを意識するだけでも自然とバンドルサイズが小さくなります。

必要なものだけ指定する

やり方は公式ドキュメントにもありますが、必要なコンポーネントだけ使用する場合は以下のようにします。

parent.js

import {  
    BButton,BSpinner,BTable,BAlert
} from 'bootstrap-vue';

Vue.component('b-button',BButton);
Vue.component('b-spinner',BSpinner);
Vue.component('b-table',BTable);
Vue.component('b-alert',BAlert);

上記はapp.jsのような元締めのファイルでグローバルコンポーネントとして登録する場合です。こうすれば配下のファイルで<b-badge></b-badge>という風に使用できます。

グローバルでなく、局所的に単体のvueファイルで使用したい場合はVue.component()でなく、そのvueファイルにいて以下のようにします。

child.vue

<template>
  <BButton variant="danger">Clikc</BButton>
</template>

import { BButton } from 'bootstrap-vue';
<script>
export default{
  components:{
    BButton
  }
}
</script>

グローバルでやっていたものをcomponents配下で入れてあげるだけです。

アイコンも同様

アイコンが豊富な故にサイズも大きいです。Vue.use(IconsPlugin);とすると全てのアイコンがインポートされるので、これも以下のようにcomponentsで使用します。

<template>
  <BIconXCircleFill variant="danger">
</template>

import { BIconXCircleFill } from 'bootstrap-vue';
<script>
export default{
  components:{
    BIconXCircleFill
  }
}
</script>

アイコンはグローバルに登録するよりも、必要になったら都度入れとく方がいいです。

適宜必要なモジュールを入れる

BadgeやButtonは上記のようなVue.commponentで十分ですが、ModalやCollapseは追加のプラグインなどが必要です。例えばModalは以下のモジュールをセットしておく必要があります。

import { BModal,VBModal,ModalPlugin } from 'bootstrap-vue';

Vue.use(ModalPlugin);
Vue.component('b-modal',BModal);
Vue.directive('b-modal', VBModal)

こうすることでModalのコンポーネントやthis.$bvModal.show('select-file-modal');のようなディレクティブや動きを実装できます。

どこにかいてある？

それぞのコンポーネントのドキュメントの最後の方にある、Component referenceにあります。さらにいうとその下のImporting individual componentsに詳しく、依存関係が書いてあるのでその通りにインポートしてあげましょう。

開発時初期から個別インポートを考える

もしこれに気づかず後から単体読み込みにしようと思ったら大変なことになります。 必要なコンポーネントの洗い出しとそのチェックが必要になるからです。 ファイル検索でなんとからならくもないですが、後からの修正はかなり大変です。

であれば最初から個別のインポートで行っていくほうが、必要になった時にエラーで教えてくれるので対処がしやすいです。端末の性能や通信速度が上がっているとはいえ、まだ1Mを超えるのは気が引けます。塵も積もれば山となる精神で不要なインポートは避けましょう。