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

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

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

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

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

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

更新:

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

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

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

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

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

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

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