非常に大きなjavascriptファイルを分割します

Question

私は、1で生成されたwebglコンテンツを使用するWebプロジェクトに取り組んでいます。必要なjsファイルをロードしようとすると、ブラウザは約30秒間フリーズします。メインのjsファイルは35MBのサイズで解凍されているので、これが原因であるようです。

可能であれば、このフリーズを避けたいですが、スクリプトにUIへのアクセスが必要なのでWebWorkersを使用して管理できませんでした。私の他の可能な解決策は、jsファイルをより小さなものに分割しようとすることですが、私はそれをどうやって行うのか分かりません。何か提案はありますか？

Answer 1

このようにasyncをスクリプトタグに追加すると、<script async src="app.min.js"></script>はレンダリングをもうブロックしません。また、スクリプトをブラウザにキャッシュするか、CDNから配信すると、ダウンロード時間を短縮できます。

35MBはウェブサイトではあまりにも多いですが、ライブラリのような未使用のものはそれほど多くないと確信していますか？

我々は最近、ちょうどJSファイルのための重要なレンダリングパスおよびその他のガラス張りの懸念への説明here

Answer 2

35メガバイトで、Webパフォーマンスのベストプラクティスとの記事を書きましたがばかげているようです。ビルド全体がおそらくそのサイズ（テクスチャ、メディアなど）である可能性があります。ビルドサイズを縮小する方法については、hereをご覧ください。

Answer 3

35メガバイトは、JSファイルのための多くのwayyyyですが、次のポインタで開始することができますが：

• ユーティリティを作成し、コードを再利用。これはどのレベルでも可能です。引数を使用して構成し、関数を作成して使用できる場合は、汎用コンポーネント（HTML生成コード）または検証ロジックにします。
• jsにHard-coded JSONがある場合は、ファイルを.josn個のファイルに移動し、必要な場合にのみロードしてください。
• ビュー内のセクションに基づいてファイルを分割します。 SPAでは、セクションが表示されない場合があります。そのような場合は、そのようなファイルをロードしないでください。コードベースを1ファイルから100ファイルに広げます。
• 多くのイベントリスナーがある場合は、別のファイルに移動します。 section_event.js,section_data.json、section_utils.js、section_index.jsのいずれかを指定できます。多くのデータ解析が必要な場合は、section_parser.js

というコードを複数のファイルに分割することが基本です。次に、コードをより再利用可能にします。ライブラリをロードすることで、負荷を軽減することもできます。

また、必要に応じてのリソースをロードします。 SPAにはステージがあります。関連するファイルを必要なときにロードします。 1回から部分的にオンデマンドの方法にダウンロードを分割します。 jsを小さくするには、webpackまたはgruntまたはgulpも見てください。