CATEGORY

CSSファイルにパラメーターを付与してキャッシュを自動削除する方法

WEBサイトの〇〇を修正しましたので、ご確認ください！

変更されていません

キャッシュを削除してご確認ください。
mac: command + shift + r
windows: ctrl + F5

確認できました。

このやりとりが無駄すぎる！

ということで今回は、WEBサイトの更新時にCSSやJavaScriptファイルにパラメータを付与して、キャッシュを自動削除する方法を解説する。

たった5行のJavaScriptで実装できるので、制作現場から「キャッシュを削除してご確認ください」というやりとりが消えることを願っている。

実装（JavaScript）

(function() {
    const current_time = new Date().getTime()
    let css_link_tag = document.createElement('link');

    css_link_tag.setAttribute('rel', 'stylesheet');
    css_link_tag.setAttribute('href', './style.css?ver=' + current_time);
    document.head.appendChild(css_link_tag)
}())

以上！

解説

1. パラメータ用のデータを取得

const current_time = new Date().getTime()

2. linkタグを作成

とりあえずcreateElementで要素を作る。

let css_link_tag = document.createElement('link');

3. linkタグに属性を付与

hrefを指定する際に、’./style.css?ver=’ + current_timeとすることでファイル名の後にパラメータが付与される。パラメータはページロード時の現在時刻にしている。

パターメーターのデータは動的に切り替わるなら何でもOK。例えば、ランダムな文字列出力とかでも良さそう。

css_link_tag.setAttribute('rel', 'stylesheet');
css_link_tag.setAttribute('href', './style.css?ver=' + current_time);

4. head直下に描画

appendChildでheadタグ直下にタグを挿入してあげれば無事完了。

document.head.appendChild(css_link_tag)

appendChild()

【番外編】Vue.jsの場合

こんな感じかな？

export default {
    created() {
        this.initCss()
    },
    methods: {
        initCss() {
            const current_time = new Date().getTime()
            let css_link_tag = document.createElement('link');

            css_link_tag.setAttribute('rel', 'stylesheet');
            css_link_tag.setAttribute('href', './style.css?ver=' + current_time);
            document.head.appendChild(css_link_tag)
        }
    }
}
git cloneしたvueのソースをローカル環境で起動する手順 前の記事 【Vue.js】特定要素以外のクリックを検知して処理を行う方法 次の記事

関連記事

コメント

この記事へのコメントはありません。