Vuetifyの軽量化

[ShotaroHirose59]

１. Nuxt.jsのnuxt.config.jsファイルで、buildオプションを設定

build: {
  transpile: [/^vuetify/],
}

2. nuxt.config.jsファイルのplugins配列に、Vuetifyの必要なコンポーネントをインポートするプラグインを追加

   plugins: [
   {
   src: '~/plugins/vuetify',
   ssr: false, // Vuetifyは、クライアントサイドのJavaScriptの実行に依存しているため
   },
   ]

3. ~/plugins/vuetify.jsファイルを作成し、必要なVuetifyコンポーネントをインポート

   
   import Vue from 'vue';
   import {
   VApp,
   VBtn,
   VCard,
   // 必要なコンポーネントをインポートする
   } from 'vuetify';

Vue.use(Vuetify, { components: { VApp, VBtn, VCard, // 必要なコンポーネントを追加する }, });

これで必要なVuetifyコンポーネントのみが読み込まれるようになる。
ただし、すべてのコンポーネントをtree shakingするわけではない？
--> ビルドされたファイルサイズが大幅に削減されるわけではない？