【Vue + Vuetify】Some chunks are larger than 500 kBを解決してプロジェクトが軽くなった話

Vue.jsのプロジェクトをビルドしたときに時間がかかりすぎて困っていました。

というか、ビルド&デプロイ時に以下のような警告メッセージが出ていて、どうにかならんかとは思っていたものの後回しにしていたんですが、あるとき「普通に考えてこのプロジェクトで重くなる要素Vuetifyしかなくね…？」と思って調べていたらあっさり解決したので共有です。

警告メッセージ

警告メッセージ

どうにかならんかと思っていた警告は以下です。

「ビルド後の1ファイルがでけぇから何か対策打った方がいいぞ」って言われてますね。

[nuxi] ℹ Building for Nitro preset: heroku
ℹ Building client...

WARN
(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✔ Client built in 215169ms
ℹ Building server...
✔ Server built in 499300ms
[nitro] ✔ Generated public .output/public

環境

私のVue環境はこんな感じです。Nuxtを使用してます。

vue: ^3.5.13
nuxt: ^3.15.0
vuetify: ^3.8.3
vite-plugin-vuetify: ^2.1.1

上記の警告で分かる通りheroku上で動かしてます。

まぁ、ローカル環境でも同じ事象が発生するので不要な情報でしょうか。

原因

先述の通り、原因はVuetifyの設定方法です。

vite-plugin-vuetifyを使ってvuetifyをインポートしていましたが、そのやり方が良くなかったようで…。

批判するようなあれで誠に申し訳ないですが、下記のやり方が良くなかったです。

Nuxt3 で Vuetify3 を使う - Qiita

外部モジュールを使うと簡単にできます。 Nuxt3 で Vuetify3 + SASS/SCSS を使う (vuetify-nuxt-module 使用) 上記方法は SASS/SCSS も動くことを確認しました。 Nuxt3でVuetifyを使えるようにする簡単手順...

Nuxt 3 + Vuetify 3 + Storybook 開発環境構築

pluginsにvuetify.js(またはvuetify.ts)を配置するやり方ですが、使用していないコンポーネントもすべてインポートしちゃうっぽくて、チャンク化したときに最適化されないのが原因だと認識しています。

これが直接的な原因かはわかっていませんが、.output/public内にあるビルド後のファイルにおいて、cssファイルが最もファイルサイズが大きい状況になっていました。

解決方法

下記の記事が参考になります。私の記事より下記の記事を読んでくださいw

Nuxt3 で Vuetify3 + SASS/SCSS を使う (vuetify-nuxt-module 使用) - Qiita

注意 2024/12 現在、Nuxt3 + Vuetify + SASS/SCSS を使いたい場合は vite-plugin-vuetify を使ってもうまくいくようになりました。Vuetify 的には vite-plugin-vuetify の使用を推奨しているようなの...

package.json

まず、vuetify-nuxt-moduleをインストールしてください。

これが今回の対応の根幹です。

npm install vuetify-nuxt-module -D

そして、vite-plugin-vuetifyがある場合は削除してください。

plugins/vuetify.ts

ファイルごと削除しました。

nuxt.config.ts

vite-plugin-vuetifyを削除するにあたり、色々な定義を削除しました。

追加したのは、vuetify-nuxt-moduleの1行だけです。

import vuetify from 'vite-plugin-vuetify' // いらない

const defineNuxtConfig = () => {
  return {
    modules: [
      'vuetify-nuxt-module' // 追加
    ],
    css: [
      'vuetify/lib/styles/main.sass' // いらない
    ],
    build: {
      transpile: ['vuetify']  // いらない
    },
    hooks: {
      'vite:extendConfig': (config: any) => { // いらない
        config.plugins!.push(vuetify()) // いらない
      }
    },
    ssr: {
      noExternal: ['vuetify'] // いらない
    },
    vite: {
      css: {
        preprocessorOptions: {
          scss: {
            api:'modern-compiler',
            additionalData: '@use "vuetify/styles" as *;' // いらない
          }
        }
      }
    }
  }
}
export default defineNuxtConfig

修正は以上です。

何か問題があった場合は別途報告いたします。