html-disable-cache[HDC]

クリックしてhdcの使用紹介に行きます

これはhtmlのモバイル側でのキャッシュを解決する方案です

案の背景

スキームの原理

を実現

まとめ

シナリオの背景

最近、モバイル側の活動H 5をする時、H 5ページをテストする必要があります.結果、ページが何度も更新されてから、修正された内容を見ることができます.この場合、プロジェクトを変更した後、ページがリアルタイムで更新できない.テスト時にキャッシュをクリーンアップすることでページを迅速に更新できますが、オンライン上のプロジェクトでは少し骨が折れます.ユーザーが手動で絶えずリフレッシュしたり、キャッシュを明確にしたりしてこそ、できるだけ早く更新の内容を見ることができ、このようにページの更新が遅延し、ユーザーの体験が悪く、リアルタイムの更新ができない.もちろん、現在のフレームワークCLIはパッケージ化時にhash値やバージョン番号を追加してキャッシュを避ける効果を確立していますが、ブラウザがhtmlをキャッシュすることもあります.このように元のコードをロードするのは、新しいコードではなく、古いデータをレンダリングします.

シナリオの原理

HTMLキャッシュの調査を行うことで、一般的なブラウザやappに埋め込まれたwebview(特別な処理ではない:例えば、ブラウザを人工的に設定したり、webviewをキャッシュしたり、キャッシュを離れたりするなど)は、初めてファイルを要求したときにサーバを移動し、すべての情報は片手の情報である.再請求時ブラウザがファイルがロードされ、キャッシュがあると判断すると、自動的にキャッシュされます.これは、よく見られるページの1回目のロードがそんなに遅く、2回目のロードが速い理由です.だからこの法則を利用して更新が必要かどうかを検出する機能を作って、このように更新が必要な時に更新することができます;更新する必要がないときは直接キャッシュします.

シナリオの実装

このシナリオ設計の原理は、css、jsを動的にロードさせ、キャッシュしない目的を達成することである.
このスキームのすべてのプログラムはcss、jsを動的にロードする関数です
次のようになります.

; (function () {
 ...
 //  
  function laodScript (obj, callback, version) {
    var done = false
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.language = 'javascript'
    script.charset = 'utf-8'
    //  - 
    script.src = obj.url + '?HDC=' + version
    // script.setAttribute('src', url);
    script.onload = script.onreadystatechange = function () {
      if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'compvare')) {
        done = true
        script.onload = script.onreadystatechange = null
        if (callback) {
          callback(script)
        }
      }
    }
    putToHtml(obj, script)
  }
  ...
})()

動的接合文字列により、キャッシュ制御可能な目的を達成する.ロードする必要があるjs、cssをjsファイルに書いてロードします.例:

__loadFn([{ 'url': 'asad.js', 'type': 'js', 'position': 'head', 'id': '' }], 1550573427160)

文字列が変化しない限り;それはキャッシュです.文字列が変化すると、新しいデータが取得されます.このような操作は、jsスクリプトの実行を許可する様々なブラウザ環境に適用されます.各種の制限を受けない.修正と更新の効果を達成する.
また、この論理はnpmパケット(html-disable-cache)に書かれています.ファイルをすばやく処理できるコマンドを内蔵します.コマンドを実行するだけでhtmlを動的にリソースをロードするhtmlに変換することができます(一時的にcss、jsしかしません).リソースをロードする必要があるjsファイルを自動的に生成します.処理するたびにバージョン番号が自動的に変更され、このバージョン番号はタイムスタンプで置き換えられます.jsを生成した後、このjs内容を手動で処理することもできる.

HDCの動作原理

フォルダ内のhtmlドキュメントの内容

を先に読み込む.

コンテンツからscript導入jsリンク

を抽出する

抽出js

をロードするためのjsファイルを生成する.

htmlにjsをロードする方法を注入し、同時に'replaceUrl'を生成したjsファイルアドレスに置き換える.

HDCの使用方法

npm i html-disable-cache -gまず処理するファイルディレクトリに:コマンドラインにhdc url ./と入力すればよい.

まとめ

このスキームはhtmlがキャッシュされている場合を処理するために、iosに多くのデバイスが存在する.
コードアドレス