kazuki.m

Appearance

sumnail

TreeShakingでVuetifyのバンドルサイズを最適化する in VitePress

created at : 2024/08/04

Vuetify
Vite
VitePress
TreeShaking

悩み ​

PageSpeed InsightsでVitePressのページ表示速度を確認したところ、Vuetifyの未使用コンポーネントを削減できることがわかりました。

使用していない JavaScript の削減

Vuetifyのコンポーネントを全てインポートすると、未使用のコンポーネントもバンドルされます。 PageSpeed Insightsで確認すると、未使用なJavaScriptファイルとして80kb以上が削減できることがわかりました。

折角VitePressを使ってページ表示を高速化しているので、VueitfyのTreeshakingを設定しバンドルサイズを最適化してみます。

TreeShakingとは ​

実際に使用するVueitfyコンポーネントだけをバンドルすることで、ビルドファイルを最適化を図ります。

viteやwebpackで設定する場合は、こちらの記事を参考にしてください。

TreeShakingの設定手順 ​

VitePressでのVuetifyのTreeshakingの設定方法を紹介します。

Pluginのインストール ​

まずはpluginをインストールします。

VitePressはViteを使用しているのでvite-plugin-vuetifyをインストールします。

bash
npm install npm i vite-plugin-vuetify

Configの設定 ​

プロジェクトのconfigファイルにplugins設定を追加します。
VitePressの場合は、.vitepress内にあるconfig.mtsに設定を追加します。

js
import { defineUserConfig } from "vitepress";
import vuetify from "vite-plugin-vuetify"; 

export default defineUserConfig({
  // viteの設定を追加
  vite: {

    plugins: [

      vuetify(), 
    ], 
  }, 
});

importの修正 ​

Vuetifyのコンポーネントを使用するファイルで、importを修正します。

js
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
    components, 
    directives, 
    ...
})

これでVuetifyのTreeShakingが有効になり、不要なコンポーネントはバンドルされなくなります！

まとめ ​

VitePressでVuetifyを使用する場合、TreeShakingを有効にすることでバンドルサイズを最適化することができます。 ビルドファイルのサイズを最適化して、ページ表示を高速化しましょう！

実際に設定してみると、PageSpeed Insightsでの評価が改善されました！

参考 ​