LoginSignup
3

More than 3 years have passed since last update.

JSとCSSをIndexedDBにキャッシュして3分でWebアプリを爆速に

Last updated at Posted at 2019-12-01

JavaScriptファイルとCSSファイルをIndexedDBにキャッシュして初回アクセス以降のHTTPロードを削減します。

SPA、プリレンダーした静的ページ群など、なんでも高速化。

before

index.html
<html>
<head>
    <script src="./index.js"></script>
    <link rel="stylesheet" href="./index.css"></link>
    <script>
        window.onload = function(){ 
            doit();
        };
    </script>
</head>
<body id="root">
</body>
</html>
index.js
var doit = function(){
    document.getElementById('root').innerHTML = '<h1 class="cosme">Hello World!</h1>';
};
index.css
.cosme {
    color: red;
}

after

index.html
<html>
<head>
    <script src="https://unpkg.com/@craftkit/craft-bootloader/dist/craft-bootloader.min.js"></script>
    <script>
        window.bootConfig = {
            library : [
                { uri:'./index.js',  version:'1.0.0' },
                { uri:'./index.css', version:'1.0.0' },
            ],
            onProgress : function(lib){
                console.log( lib.uri + ' was loaded' );
            },
            onLibrayLoaded : function(){
                doit();
            }
        };
    </script>
</head>
<body id="root">
</body>
</html>

about

before → after という感じに library にリソースを設定。全部読み込まれると onLibrayLoaded が呼ばれます。

library に定義されるリソースエントリーの uri をキーにして、version を管理するオブジェクトストアと実体を管理するオブジェクトストアが IndexedDB に作成され、version が変更されると IndexedDB の実体キャッシュもアップデート。エントリーが library から削除されれば次回チェック時に IndexedDB からも削除されます。

上の例示では unpkg.com から読み込んでいますが、5KB程のライブラリなので <head> に直接埋め込めば1セッションでロードが完了します。

コードキャッシュは同期的に動いて簡単に使える localStorage に入れることが多いですが、SPAはサイズも大きくなりがちでついつい10MBを超えてしまうことも。AppCacheはもっと小さいですし各リソースの明示的なコントロールも効かせにくい。

そんなときは IndexedDB に入れてしまえば大体解決ということで書いてみました。副産物として各リソースが読まれたことをイベントで判定することも可能に。

古いアプリケーションの高速化などにも使えると思います。また、ロード時に IndexedDB へのアクセスモジュールが window.bootConfig.Context.libStore に設定されるので、libStore#put / libStore#get でアプリケーション内からもキャッシュシステムとして利用可能かも知れません。

コードはこちら:
https://github.com/craftkit/craft-bootloader

枯れてないコードなのでバグがあればPR頂けると嬉しいです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3