

はじめまして。  
色々調べていたのですが、煮詰まってしまい質問させていただきます。

Java8でSpringを使用して開発しております。  
JSフレームワークはAngularJS(1系)です。

今回やりたいことはcache
busting対策でHTML内の外部読み込みしている複数のCSS/JSなどに日付やバージョンなどのクエリー文字列を付けることってあると思うのですが、それを今リリース日ベースで手動で全置換していてリリース前にリポジトリに都度プッシュしているのですが、面倒で何とかならないかなと思っています。

そこでJavaScript側でyyyymmdd形式のクエリーを生成して、1日単位で更新がかかるようにしたいなと考えております。

これが

[code]

    <link href="css/bootstrap.min.css?20180510" rel="stylesheet" type="text/css" />
    
[/code]

翌日開くと自動的に下記のようになっていてほしいです。

[code]

    <link href="css/bootstrap.min.css?20180511" rel="stylesheet" type="text/css" />
    
[/code]

しかし、小生あまりJavaScriptを触る機会が多くなかったもので、実現可否や方法に行きつかず時間だけが経過しているため皆さまのお知恵を恐縮ながら拝借願えないでしょうか。

情報が不足している場合は、教えていただけると幸いです。

お手数をおかけいたしますが、よろしくお願いいたします。


CC BY-SA 4.0
2018-05-11T10:01:50.053
43918
2021-10-14T16:08:25.743
2018-05-11T11:33:08.170
3060
28486
question
javascript java html5 angularjs spring
JavaScriptでcache bustingを自動化する方法


次のように外部 css タグの文字列を javascript で生成し、 head 中で document.write すれば読み込まれます。  
（スニペット実行だと分かりにくいので文字色を赤にする css を入れておきます。）

[code]

    <head>
        <script>
            const now = new Date()
            const y = "" + now.getFullYear();
            const m = ("00" + (now.getMonth()+1)).slice(-2);
            const d = ("00" + now.getDate()).slice(-2);
            document.write(`
                <link href="css/bootstrap.min.css?${y+m+d}"
                      rel="stylesheet"
                      type="text/css">
            `);
            document.write(`<style>h1 { color: red; }</style>`);
        </script>
    </head>
    <body>
        <h1>JavaScript cache bustingを自動化する方法<h1>
    </body>
[/code]


CC BY-SA 4.0
2018-05-13T17:12:26.390
43963
2018-05-13T17:12:26.390
28340
43918
answer