Vuetify v1.3で追加されたvuetify-loaderが便利だった

Vuetify v1.3で追加されたvuetify-loaderが便利だった:

先月Vuetify v1.3がリリースされましたが、新しいコンポーネントが追加されたこと以外に、vuetify-loader というloaderが追加されています。

これがなかなかの優れものだったので、その内容をまとめます。

Vuetify は不要なコンポーネントを外すことができる

Vuetify が提供するコンポーネントの数が増えれば、ライブラリのサイズも大きくなってしまいます。

しかし、Vuetify の全コンポーネントを使うといったことはあまりなく、一部だけを利用することがほとんどです。

Vuetify v1.3 では Webpack による Tree Shaking に対応しており、必要なコンポーネントのみをバンドルさせることができます。

それ以前は、babel-plugin-transform-importsを利用していたようです。

そしてそのために、今までは以下のように利用するコンポーネントを明示的にインポートするように実装する必要がありました。

main.js

import Vue from 'vue' 
import App from './App.vue' 
import Vuetify, { 
  VApp, 
  VNavigationDrawer, 
  VFooter, 
  VToolbar 
} from 'vuetify/lib' 
 
Vue.use(Vuetify, { 
  components: { 
    VApp, 
    VNavigationDrawer, 
    VFooter, 
    VToolbar 
  } 
}) 

以下のように、.vueファイルでインポートすることもできます。

App.vue

import { VCard, VCardText, VCardMedia } from 'vuetify/lib' 
 
export default { 
  components: { 
    VCard, 
    VCardText, 
    VCardMedia 
  } 
} 

どちらの方法にしても、利用するコンポーネントを明示的にインポートしなければならず、非常に面倒です。

vuetify-loader を利用するとどうなるか

vuetify-loaderを利用すると、アプリで利用しているコンポーネントを自動的に調査し、インポートしてくれます。

そのため、上述のような面倒な実装が不要となり、以下だけでOKです。

main.js

import Vue from 'vue' 
import App from './App.vue' 
import Vuetify from 'vuetify/lib' 
 
Vue.use(Vuetify) 

ただし、v-data-iteratorのcontent-tagに指定したコンポーネントや<component is:="button ? 'v-btn' : 'v-chip' ">のようにコンポーネントを利用する場合は自動でインポートできないなどの制約があるようです。

詳細は以下で述べられています。
https://vuetifyjs.com/ja/guides/a-la-carte#limitations

vuetify-loader の使い方

Vue CLI3 を 利用して Vuetify を追加すれば、何も設定せずとも有効になっています。

設定はすべてデフォルトでOKです。

$ npm -g install @vue/cli 
$ vue create my-app 
$ cd my-app 
$ vue add vuetify 

作成したプロジェクトでは特に何も意識する必要はなく、普通に Vuetify のコンポーネントを利用するだけでOKです。

webpack を production mode でビルドすれば、Tree Shaking によって、不要なコンポーネントが除去された状態でバンドルすることができます。

---

今までは、少しでもファイルサイズを減らしたいので頑張ってインポートしていたのが、何も意識することなくできるようになっているのは非常に素晴らしい進化だと思います。

あと関係ないですが、Vue CLI3 が便利でビックリしました。特に vue uiコマンド。

Webpack の設定ファイルがなかったり、色々気になる部分はありますが、これがスタンダードになっていくのであれば、慣れていくしかないですね。