長いデータ URI のコード処理

Question

データ URI、base64 を使用して画像とビデオをゲームに追加していますが、複数のビデオを含むゲームを作成したい場合、各ビデオのコードが 500 行を超えることがわかりました。何か良い方法はありますか?このタイプのファイルを処理することをお勧めします。私が実際に行ったのは、Mixin ファイルを作成し、base64 を返す複数の関数を作成することでした。

ああああ

Answer 1

(webpack、parcel、rollup、browserify など) のようなバンドラーを使用することをお勧めします。 複数のファイルでプログラムでき、バンドラーはファイルにデプロイする前にすべてのファイルをマージします (そしてそれを縮小します) 。

webpack のようなバンドラーを使用すると、すべてのデータ URL を含む json ファイルを作成できます。例:

リーリー

アプリケーションスクリプト内:

リーリー

そして、アプリケーション ファイルに json ファイルをインポートすると、それがバンドラーのビルド アクションに統合されます。 そして、アプリケーションのすべてのファイルを含む 単一ファイル を作成します。

Webpack とプロジェクトのセットアップ方法の詳細については、ドキュメントを確認してください。回答で説明するには長すぎますが、それに関する優れた記事/ビデオがすでにあります。 (ただし、他のバンドラーも使用できます)

私の答えはあなたを正しい方向に導きます。

更新:

小さなデモ プロジェクト (node と npm がインストールされている場合) :

使用 npmこれらのパッケージをインストールします

• html-インラインスクリプト-webpack-プラグイン
• html-webpack-プラグイン
• ネットワークパケット
• webpack-cli

Webpack の基本構成ファイルを作成します:

リーリー

デモ アプリケーション コードは次のとおりです:

リーリー

デモ プロジェクトの構造は次のとおりです:

出力 HTML ファイルのみが作成され、他のファイルはすべてインライン化されます。