Build時のトランスパイル生成物で、app.js/vendors.jsのみハッシュをつけないvue.configの設定


#1

はじめまして。井谷です。

Vue Cli3で作成してビルドしたファイルのファイル名の指定方法でvue.config.jsの設定方法で質問があります。

バックエンドとしてCakePHPを使用し、HTMLの初期表示とAPIを担当しています。
フロントでVue.jsを使用しています。

CakePHPで初期表示のHTMLを出力する関係上、その中に含まれる
app.jsとvendors.jsのファイル名は固定にしたいです。

今は、

https://cli.vuejs.org/guide/html-and-static-assets.html#prefetch

を参考にして、vue.config.jsは以下のようにしています。

module.exports = {
  baseUrl: '/',
  productionSourceMap: false,
  chainWebpack: config => {
      config.plugins.delete('html')
      config.plugins.delete('preload')
      config.plugins.delete('prefetch')
      // https://github.com/vuejs/vue-cli/issues/1167
      config.output.filename('js/[name].js')
      // config.output.chunkFilename('js/spa/[id].[chunkhash].js')
      config.output.chunkFilename('js/[id].js')
  }
}

この設定で、app.js、chunk-vendors.js、それ以外は、chunk-c5fab028.js な感じのファイルが生成されています。

ただ、キャッシュの問題がございます。
app.jsとchunk-vendors.jsは、CakePHPが出力する時に、ファイルの末尾に「?タイムスタンプ」を出力することでキャッシュはされません。

しかし、app.jsが必要なタイミングで読み出す、chunk-c5fab028.jsは、ハッシュがないためディスクキャッシュを使われてしまう場合があります。

このためそちらにはハッシュをつけたいのです。
そのような設定はできますでしょうか?

よろしくお願いいたします。


#2

自己解決として、以下のようにしました。
ハッシュ付きでトランスパイルを行って、
chunk-vendors.xxxxxxx.js
が生成されます。これをPHP側に持っていくときに、chunk-vendors.jsにリネームするようにしました。