自社プロダクトのVue2→Vue3移行対応#3

前回に引き続き、対応内容のご紹介です。具体的には、状態管理ライブラリをVuexからPiniaに変更し、ビルドツールをWebpackとVue CLIからViteに移行した際の対応内容や問題点、対処方法について詳述しています。

はじめに

引き続き対応内容の紹介をしていこうと思います。
前回はコンポーネントの書き換え部分であったので、今回はその他のライブラリ更新関連です。

前回の記事はこちら

Vuex→Piniaに変更

Vueの公式で案内されている状態管理ライブラリがVuexではなくPiniaになっており、さらにはVuexの案内でもPiniaの利用を推奨していたため、Piniaに変更するようにしました。

書き換え自体はVueと同じく、Composition APIスタイルに対応しました。

メンバ関数をfunction
getter,setterをcomputed
メンバ変数をref

export default class UserStore {
  @State()
  user: User | null = null;

  @Getter()
  public get hasPermission() {
    return this.user.permission;
  }
  
  @Action()
  public async fetchUser(): Promise<void> {
    const result = await api.getUser();
    this.SET_USER(result);
  }
}

  @Mutation()
  private setUser(user: User) {
    this.user = user;
  }

↓

export const useUserStore = defineStore("UserStore", () => {
  const user = ref<User | null>(null);

  const hasPermission = computed(() => {
    return user.permission;
  });

  async function fetchUser(): Promise<void> {
    const result = await api.getUser();
    SET_USER(result);
  }

  function setUser(user: User) {
    user.value = user;
  }
  return {
    hasPermission,
    fetchUser
  }
});

なおMutationに関しては廃止されていますが、できるだけ機械的に書き換えるだけにするため、上記例の通りそのままfunctionに置き換えるのみとしています。

storeの呼び出し箇所は元々登録しているstoreをすべて取得して使用していましたが、今回の置き換えで、各コンポーネントでは無意味に全て取得するのではなく、必要なもののみ取得して使用する形に置き換えています。

export default class Component {
  public store: Store = useStore(this.$store);

  public get 
  public async handleUpdate() {
    this.store.user.update();
  }  
}

↓

<script setup lang="ts">
const userStore = useUserStore();
async function handleUpdate() {
  userStore.update();
} 
</script>

Webpack、Vue CLI→Vite

今回の対応でビルドツールをWebpack、Vue CLIからViteに変更しました。
元のままバージョンを上げるだけでもよかったのですが、実行速度の遅さが気になっていたので変更することにしました。

置き換え時の問題と対処

各コンポーネントで取り込んでいる共通スタイルの重複

元々、各コンポーネントのスタイルで共通定義の変数を使用するなどのために共通定義がされているscssファイルを取り込むような設定となっていました。
これをViteに置き換えたことで、共通スタイルがコンポーネントごとに展開され、重複するようになっていました。
なんとかならないかと思いViteのissueを調べた結果、同様の問題のissueが上がっていたため、そちらのコメントにあるように、ビルド時に共通スタイル部分を取り除くプラグインを作成して実行するようにしました。

チャンク指定

Webpackの際に特定画面を指定したチャンクに分割していました。
この部分はViteではmanualChunksで分類し、各ファイルとチャンクの紐づけを設定しました。

chunkFileNames: chunkInfo => {
  if (chunkInfo.name === "dialog") {
    return `js/${chunkInfo.name}.[hash].js`;
  }
  return "js/chunk.[hash].js";
},
manualChunks: (id: string) => {
  if (
    id.includes("src/views/Dialog1.vue") ||
    id.includes("src/views/Dialog2.vue")
  ) {
    return "dialog";
  }
}

外部ライブラリのcssの読み込み順制御

Viteでビルドした際、index.htmlに指定されるcssの順序にて外部ライブラリのcssが最後に読み込まれるようになっていました。これだとコンポーネント毎に上書きしようとしていた箇所でimportantを使用していない場合に上書きできないケースが発生していました。これに関してはissueはあったものの、制御することはできないようでした。対処としては、まずは対象のcssを特定のチャンクにまとめるようにチャンク指定を行いました。そしてdist配下のindex.htmlを読み込んで、特定のチャンクの読み込みが最初になるよう書き換えるスクリプトを作成し、ビルド実行後にスクリプトを実行するようにしました。これでリリース物上では問題なく動くようにはなりました。

その他のライブラリの更新

元々ライブラリを多く使っていたため、dependencies、devDependenciesで合わせて70個くらいある状況（dependenciesだけでも28個）でした。
すべてできるだけ新しい安定バージョンまたは、Vue3対応版のライブラリに置き換えていきました。
ビルドエラーにならない限りは単にバージョン更新していき、一部早めに動作を見ておきたいもののみ、対象のコンポーネントがVue3で表示できるようになってから確認しつつ更新していきました。
仮想スクロールといったVueに依存する画面系のライブラリは少し調査等が必要になることがありましたが、大部分は大きな問題なく更新できました。