くりーむわーかー

NUXTでビルドする時に、キャッシュバスティング用のクエリ文字列をつけたい場合は「nuxt.config.js」のbuildのとこを下の感じにする。※これだけだとnpm run devした時におかしくなるっぽいので要調査。。。

build: {
  filenames: {
    app: '[name].js?v=[chunkhash]',
    chunk: '[name].js?v=[chunkhash]',
    manifest: '[name].js?v=[hash]',
    vendor: '[name].js?v=[hash]'
  },
  ...
}

デフォだとファイル名にハッシュの文字列がつくから、それでもいいんだけど、ファイル名は固定させたい場合はこんな感じでいいのかしらね？結果的には大丈夫そうなんだけども・・・。出来るASSETの名前は「pages_index.js?v=13ce94dbf4253c98fda3」とか「app.js?v=756d7ba036939c0fe3b2」みたいな感じ。物理ファイルとしては「pages_index.js」とか「app.js」みたいな感じ。

WebPackの質問で書き方としては↑の感じで行けるよみたいに書いてあるんだけど、ついでに、出来ればコレ系は止めた方がいいよって書いてあってイマイチ理由がわからなかったりする。↓の質問。

GitのISSUES

イチを理由も書いていただいてて、質問した人も分かった～って言ってるんだけど、自分バカなのでよくわかりません。

ユーザが操作中に資源上げると整合性取れなくなる可能性あるからやめとけって事なのかしらしら。 そうだとしたら、理由で書いてる事って実運用で起きたら、そもそもリリースの仕方おかしいんじゃない？って気がするんだけども。不特定多数向けのインターネット上のサイトとかだと普通なのかしら。

以前、書いたやつのちょっと補足。

<link href="/Content/site.css?20160508113250" rel="stylesheet"/>

↑みたいな、ブラウザキャッシュをやめさせるクエリ文字列をファイル更新された自動でつけるやつ。

直すのは「RegisterBundles()」してるとこ。デフォだとBundleConfigっていうクラス名かな。

//CSSはこっち
Bundle addBundle = new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css", "~/Content/site.css");
addBundle.Transforms.Add(new FileHashVersionBundleTransform());
bundles.Add(addBundle);
//JavaScriptはこっち
addBundle = new ScriptBundle("~/lib/hoge").Include("~/Scripts/lib/hoge.js");
addBundle.Transforms.Add(new FileHashVersionBundleTransform());
bundles.Add(addBundle);

「FileHashVersionBundleTransform」の中身は元記事参照。そしたら、cshtml側で↓の感じで使いたいやつを呼ぶ。

@section scripts {
@Scripts.Render("~/lib/hoge")
}

結果は↓の感じ。

<script src="/Scripts/lib/hoge.js?v=20170508210031529"></script>

タイトル通り。CSSとか更新した際に、普通はクライアントでF5しないと読み込み直さない。それを無理矢理やらせるのに、「site.css」みたいなのに「site.css?20160508113250」みたいなクエリ文字列をつけると別ファイルと認識して読み込み直させるというやつがある。↓の感じ。

<link href="/Content/site.css" rel="stylesheet"/>
↑を↓にする
<link href="/Content/site.css?20160508113250" rel="stylesheet"/>

.netMVCだと、CSSとかJavaScriptとかはcshtml側で、「@Styles.Render("~/Content/css")」みたいに書くけど、これの結果を↑の日付のクエリ文字列をつけた形に自動で変えたい。日付はファイルの更新日で。

で、これをやるのに、何がいいかなーで探したら一番よさそうなのは下の感じ。

修正するのは「BundleConfig」。こいつを下の感じに変える。

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        //とりあえず追加したいBundle作る
        var addBundle = new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css", "~/Content/site.css");
        //ここで↓の変換クラスをセットする
        addBundle.Transforms.Add(new FileHashVersionBundleTransform());
        //Bundleの追加
        bundles.Add(addBundle);
    }
}

//IBundleTransformでクエリ文字列を付加するように定義
//キャッシュされてるCSSをクエリストリングでファイルの更新日を付けて認識を変える
public class FileHashVersionBundleTransform : IBundleTransform
{
    public void Process(BundleContext context, BundleResponse response)
    {
        foreach (var file in response.Files)
        {
            string version = System.IO.File.GetLastWriteTime(System.Web.Hosting.HostingEnvironment.MapPath(file.IncludedVirtualPath)).ToString("yyyyMMddHHmmssfff");
            file.IncludedVirtualPath = string.Concat(file.IncludedVirtualPath, "?v=", version);
        }
    }
}

結果は↓の感じ。

<link href="/Content/site.css?v=20160508113250" rel="stylesheet"/>

参考にしたのはココ。っていうかまんまですが。

上のサイト見てて思ったけど、このクエリ文字列って「キャッシュバスティング(cache-busting)」って言うのかしら。

2017/8/6追記：Ver2