クライアントレンダリングのアイデア
ちょっと放置気味の過去のWordpressコンテンツの静的HTML化の話である。静的HTMLそのものをデータとしたいがためにできる限りセマンティックなタグやメタ情報のみとしたい。 静的HTMLはモデル、外部css,jsはビューという考え方である。 デザイン的なタグやCSSをHTMLに書いてしまうと、デザイン変更したとき静的HTMLを変換しなければならなくなるからだ。 Wordpressがテーマファイルを自由に差し替えて変更できるのはサーバー側で都度コンテンツをリアルタイムに生成しているからである。静的HTMLではそうはいかない。 あとjqueryなどのライブラリもあとで差し替えることができるようにしたい。knockout.jsからanguler.jsへの差し替えが、静的HTMLを再生成しなくてもできるようにしたい。 そこで以下のようにクライアント側でWebページをレンダリングしたいと考えている。
- HTMLで読み込むcssファイル・jsファイルはmain.css,main.jsのみとする。インラインCSS,scriptはできる限り含まないようにする。
- main.css内で関連する外部cssファイルを@importする。これは静的HTMLが特定のスタイルシートに依存しないようにするためである。
- main.js内では必要なjsファイルを読み込む。これはjqueryやknockout.jsなどのライブラリも含む。これは静的HTMLが特定のjsライブラリに依存しないようにするためである。
- Webページのレンダリングはすべてmain.js内で行う。
外部CSSファイルを@importするとページ読み込みスピードが遅くなる件
例えば5つ外部CSSファイルがあるとする。<link>タグで外部cssファイル5個書いて読み込ませると同時に読み込まれるが、1つの<link>タグ@importで書くと個々のファイルが順に読み込まれるため、結果その分ページ読み込み速度が遅くなる。「【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる ｜ Developers.IO」の実験結果だと
- まずlinkファイルのcssが読まれる。
- 次に@importのファイルが並行して読み込まれる。
一番速いのはsassで@import分も含めて1つのファイルにまとめてしまうことである。
sassやLESSで事前にファイルを作成して置いておき、それを読み込ませるようにするのが一番よさそうだ。そうしようかな。sassやLESSの使い方は知らないが勉強するとして。 しかしそうするとライブラリはCDN経由で読み込むことができなくなるな。どうしたものか。。
外部jsファイルの読み込みについて
<script>タグを動的生成するしかないかな？とか考えていた。が、こういうことをするためのライブラリとして「RequireJS」というのがあって、これを静的HTMLに<script>タグに外部jsファイルとして指定する。data-main属性に最初に読み込みたいファイルを指定(今回だとmain.js)しておけばそのファイルが最初にインクルードされるらしい。そのあとmain.js内で以下の記述を行えばよいとのこと。
require(["helper/util"], function(util) {
});