Vue CLI 3でビルド時に古いファイルを消さずにとっておく

沢城みゆきといえばギャラクシーエンジェルのミントの声優ですが、ServiceWorkerを使ったPWAを運用していると、強力なキャッシュに困ります。

ServiceWorkerのライフサイクルは通常のページとは違い、普通の再読み込みでは更新されないこともあったりと複雑です。

多々あるキャッシュ問題の一つとして、デプロイ後、ServiceWorkerのキャッシュが残ったブラウザでアクセスすると、古いjsファイルにアクセスしようとして404エラーを出すことがあった。

当然jsが読めないとエラーが起きて実行できなくなるためvue-routerによるページ遷移等もできず、再読み込みでも変わらない時もあるので、ブラウザ再起動しかなく、結構やばい状況。

これは

vue-cli-service build

を実行すると、デフォでは古いファイルをすべて削除してから書き出しされるため。

当然それをFirebaseにデプロイするとサーバー上からも古いファイルが消えてしまう。

これは--no-cleanオプションをつけることで回避できた。うまい検索キーワードが見つからず時間がかかった。

--no-clean    do not remove the dist directory before building the project

でもこれをつけてビルドしまくると、どんどんファイルが増えていくので、アプリによって違うけど、期間とか、世代数とか何らかの指標で古いファイルを消していく必要がある。

とりあえずyagishは本番デプロイは現状多くないので、しばらくは手動で2,3世代以降を消していけばいいかなと思う。

GAミント至上主義