Laravel9＋Vuetify3で自動インポート(旧vuetify-loader)を導入する
Vuetify3でTreeshaking（自動インポート・容量削減）をしようとしたら、どうやらvuetify-loaderじゃなくなったらしいのでVuetify3の導入方法と共にメモで残します。
ググっても見つからなかったので。
Environment
PHP -> v8.0.14
Laravel -> v9.2
node -> v16.13.2
vue -> 3.2.36
vuetify -> 3.0.0-beta.3 (@next)
Laravel9＋Vue3導入
私が書いた以下の記事を見てみて下さい。割愛します。
Vuetify3インストール
Vue3に対応したVuetify3をインストール
npm i vuetify@next
// vuetify: ^3.0.0-beta.3
resource/js配下のapp.ts(Typesciptを使ってないなら.js)を以下に変更。
import "vuetify/styles";
import {createVuetify} from 'vuetify';
import router from "./route";
import {createApp} from 'vue';
import App from './App.vue';
const vuetify = createVuetify();
const app = createApp({
components: {
App,
}
});
app.use(router);
app.use(vuetify);
app.mount('#app');
ここで注意なのが、Vue内で<v-xxxx>のようVuetifyコンポーネントを呼び出す処理は後のTreeshakingで自動インポートするので態々個別にインポートする必要はありません。
Vuetify3で自動インポートするには
本題。Vuetifyはかなり幅広い部分までカバーしてくれている分、使わないコンポーネントまで読み込んでビルドサイズが肥大になりがちです。対策として各単一ファイルコンポーネント内でimport ～～で読んでいいですが、面倒。
そんなとき、Vuetify2ではvuetify-loaderでTreeshakingを行うのが最も便利とされていました。
vuetify-loaderをVuetify3で使うにはnpm i vuetify-loader@nextで出来るよ～とググったら出てきたのですが、どうやら作者によるとWebpackを使う場合はwebpack-plugin-vuetify を使えと言われてた。
なので、公式に則って導入します。Treeshakingの仕組みは以下に詳しく書いてあります。
webpack-plugin-vuetifyインストール
NPMでインストール。
npm i webpack-plugin-vuetify
あとは、Laravel MixのWebpack設定に以下を追記するだけ。
+ const {VuetifyPlugin} = require('webpack-plugin-vuetify');
+ mix.webpackConfig({
+ plugins: [
+ new VuetifyPlugin({autoImport: true}), // Enabled by default
+ ],
+ });
mix.ts('resources/js/app.ts', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css');
ドキュメントによればautoImport: trueで自動インポートしてくれるそうです。
最後にちゃんとVuetify3＋Treeshakingが動作するか確認。
<template>
<v-app>
<v-app-bar>
<v-app-bar-title>
<span>Demo</span>
</v-app-bar-title>
</v-app-bar>
</v-app>
</template>
npm run prod
全部Vuetifyのコンポーネントを読み込むとMinifyしても1MB程度ですが、数百キロバイトになります。VuetifyのCSSをpurgeCSSを通すと更に容量削減できますー
更に容量削減する
通常、Laravel MixプロジェクトのCSSのアセットサイズを削減するにはPurgeCSSを使いますが、どうやら自分の環境ではエラーが発生します。
ですが、以下のようにCSSを読み込む場所をTSファイル内からScssファイルに切り替えると、何故か790KB→400KB程度まで削減されます。
- import {createVuetify} from 'vuetify';
+ @import "vuetify/lib/styles/main";
備考:自動インポートしない方法
テスト用で別にTreeshakingはいらないなら以下ですぐ終わり。
ただ、プロダクションビルドした際にファイルサイズがかなり大きくなるので注意です。
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
const vuetify = createVuetify({
components,
directives,
});
Discussion