<

m98.be(xsspa)

m98.be(xsspa)

このサイトのフロントエンド。最小jsを目指して。

  • FullScratch

概要

既存のサイトは重すぎる。
どれだけjsサイズを小さく、動的ページ遷移を実現出来るか、頑張ってみた。

  • それぞれのページに状態は持てない。静的。
  • ある程度ページに"テンプレート"がある(ブログやギャラリーなど)サイトに最適
  • ページ同士をjson(一部raw_html)で動的ページ遷移する。
  • テンプレート必須ではなく、普通にraw_htmlを転送することも可。

実装したもの

  • jsonによる動的ページ遷移
  • 遷移時のスクロール位置の維持
  • xste (極小テンプレートエンジン,仮想DOMは見送り)
  • (gulp)テンプレートに対する部分リビルド
  • (gulp)markdownからページ用jsonを生成
  • (gulp)プリレンダリング出力 最速FMP

雑感

マトモなサイトなら、普通にライブラリ使ったほうがいいと思う。
ただ、これだけならここまで小さくできる、ということを証明出来たから満足…。
モバイルファーストの時代、通勤時間の車内は100kbpsを下回る事も。
その巨大なjs、本当に必要?