kazuki.m

Appearance

sumnail

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

created at : 2024/08/04

Vuetify
Vite
TreeShaking

TreeShakingとは ​

プロジェクトで全てのVueitfyコンポーネントをインポートすると、バンドルサイズが大きくなることがあります。 実際に使用されるコンポーネントだけをバンドルに含めることで、バンドルサイズを最適化することができます。

webpackやviteなどで、自動TreeShakingが可能です。

Vutifyの自動TreeShakingを有効化 ​

実際に使用されるコンポーネントだけをバンドルに含めるために、VuetifyのTreeShakingを有効にする手順を紹介します。

Pluginのインストール ​

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

bash
npm install npm i vite-plugin-vuetify
bash
npm i webpack-plugin-vuetify

Configの設定 ​

それぞれのプロジェクトのconfigファイルにplugins設定を追加します。

js
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

export default {
  plugins: [
    vue(),
    vuetify(),
  ],
}
js
const { VueLoaderPlugin } = require('vue-loader')
const { VuetifyPlugin } = require('webpack-plugin-vuetify')

module.exports = {
  plugins: [
    new VueLoaderPlugin(),
    new VuetifyPlugin(),
  ],
}
js
const { VuetifyPlugin } = require('webpack-plugin-vuetify')

module.exports = {
  plugins: [
    new VuetifyPlugin(),
  ],
}
js
import vuetify from 'vite-plugin-vuetify'

export default defineNuxtConfig({
  modules: [
    async (options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', config => config.plugins.push(
        vuetify()
      ))
    },
  ],
})

注意

pluginsでvue()もしくはVueLoaderPlugin()を使用している場合、VuetifyPlugin()よりも前に設定する必要があります。

importの修正 ​

*を使って全てのコンポーネントをimportしている部分を削除します。

js
import { createApp } from 'vue'
import App from './App.vue'

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

ここまで設定できれば、使用するコンポーネントのみをバンドルすることが可能です。

まとめ ​

VuetifyのTreeShakingを有効にすることで、バンドルサイズを最適化することができます。 プロジェクトのバンドルサイズを最適化するために、ぜひ活用してみてください。

参考 ​