nDiki

data-cfasync を指定して Cloudflare Rocket Loader で特定の JavaScript コードを除外する

HTML ページ中の mermaid 定義を自動的にクライアント側で SVG 変換し表示させるのが動いていないのに昨日気づいた。 initialize がうまく動いていいないっぽい。 Cloudflare の Rocket Loader をオフにしたら再び動くようになったのでそれが原因のようだ。

How can I have Rocket Loader ignore specific JavaScripts? – Cloudflare Help Center

によると

 <script data-cfasync="false" src="/javascript.js"></script>      

のように data-cfasync を指定するとそのスクリプトの読み込みを最適化から除外するらしい。

今回は HTML ファイル中に直接 script 要素で埋め込んだコードが動かなくなったので

 <script data-cfasync="false" type="text/javascript">
 ... // Rocket Loader オンで動かなくなったコード
 </script>

のように追加してみたところ Rocket Loader をオンにしても動くようになった。高速化のため、できれば Rocket Loader をオンにしておきたかったので良かった良かった。