TL;DR
自己満足。SEOなんてなかった、いいね？
1: 空のhtmlファイル
bodyとかheadタグすら存在しない、HTMLファイルと呼べるのか怪しい代物を読み込ませる
中身はない。
このHTMLファイルをChromeで開くと、こうなる。
このように、空のhead/bodyタグが生成される。
ということは、ここにjsかなにかで書き込んでやれば世界最小のhtmlファイルが実現することになる。
2: javascriptコードの追加
そこで、以下のように書き加える
<script src=.js></script>
本当はsrc="a"とかでもいいのだが、その場合サーバー側でheaderを指定してJavascriptファイルだと教えてやる必要がある(はず)。
もしかしたらそもそもできないかもしれない。
-------------3/29 追記-------------
以下の記載でいけました。特にヘッダー指定もいりませんでした。
コメントありがとうございます。
<script src=a></script>
閉じタグの省略はできないみたいです(実行してくれない)
-------------追記ここまで-------------
さて、これでjsファイルを読み込めたので後はjs側でゴリゴリ描写すればいいことになる。
最近の自分の好みとしてRiotを多用しているので、これを使う。
// .js
import riot from "riot";
// tag import
import "./app.tag";
import "./html.tag";
// mount
// ※1 DOMが読み込まれてからでないとbodyタグがmountできない
window.addEventListener("DOMContentLoaded", () => {
riot.mount("*")
});
<head>
<title>hoge</title>
<!-- yieldタグを用意することで、riotが用意する
cssを挿入できるようにする -->
<yield/>
</head>
<body>
<app/>
</body>
3: DOM生成のタイミング
上記コードのコメント※1にも記載したが、headタグとbodyタグは生成されるタイミングが異なるようである。
これは上記.jsファイルの先頭にbreakpointを設置し、コードの実行とDOMの状況を追うとわかる。
-
htmlとheadが生成される -
headの中にscriptが押し込まれる -
scriptの中身の実行 -
bodyの生成
という実行順序のようなので、riot.mount("*")をそのまま記載すると何もマウントされない。
そこで、window.addEventListener("DOMContentLoaded")を使用する。
これによって、上記4のbodyタグ生成後にmountが可能になる。
4: 世界最小のindex.html
実行してる様子
view-sourceを開いた様子
parcelでbuildしてるのでファイル名が少し冗長だが、それ以外は文句なしに空っぽである。
もはやここまで来たらindex.htmlの存在自体が不要な気もするが、さすがにそれはできなそうなのでここらで妥協。
ちなみに、firefox, edge, IE11でも動く。
こんなクソみたいなHTMLファイルでもちゃんと同一の解釈がされてるあたりは感動すら覚える。
IE11での動作確認
5: 欠点と総括
言うまでもないがSEOがお葬式になる(google botはjavascriptも実行できるらしいが)。
あと環境依存なところがあるので、万人受けさせたいコンテンツには絶対に合わない。
でもreactとかriotとか使うならどうせ似たようなHTML(笑)になるのはほぼ確定だし、いっそここまで極端にしてしまうのもありかもしれないですね。
<!-- author:hoge / repository:@arika0093/minhtml -->
<script src=.js></script>
とかなってたらかっこいい感じしますよ(当社比)。