1

大量のjsコードと依存関係をどのように処理app-jsdeps.jsしますか?app-opt.jsScala.js React applications

@ochrons spa-tutorial の例を使用して @japgolly scalajs-reactを使用して最初の Web アプリケーションを構築しましたが、最適化した後でも、ページが読み込まれる前にダウンロードするのに時間がかかるサイズとファイルです。app-jsdeps.js (only 10 external JS deps)app-opt.js900kb8 seconds

この状況で私たちは通常何をしますか?

  • アプリをサーバー上の複数の html ページに分割しますか?各ページには独自のapp-jsdeps.jsファイルapp-opt.jsがあり、各ページの新しい React-router を意味しますか?
  • それとも、app-jsdeps.jsandapp-opt.jsを複数のファイルに分割して、ダウンロードが 1 つの大きなチャンクではなく同時に行われるようにしますか?
4

2 に答える 2

1

ページごとに必要なjsdepsを非同期にロードできます。現在、scaljs-react-componentsデモアプリでこれを行っています

非同期ミックスイン

非同期ミックスインの例

app-opt.js ファイルは約 900kb

gZip の後は約 350 ～ 370kb になります。物事を明確にするために、scala.jsコア（現在のバージョン）は出力ファイルに約150kb〜200kb（中規模から大規模のプロジェクトの場合はgZipの前）を追加します。これらの 2 つのライブラリは内部的にscalaz ,shapeless.. に依存しており、より安全性を提供するために存在しています! )プロジェクトの機能、サイズはあまり変わりません。

そうは言っても、長期キャッシュを有効にすれば、上記のことを心配する必要はありません。ユーザーがページに初めてアクセスしたときにわずかな遅延が発生しますが、それ以降のアクセスはほぼ瞬時になります。これは webpack を使用した例です: http://webpack.github.io/docs/long-term-caching.html

ところで、どの Web プロジェクトでもこれらすべてを処理する必要があります。sclaa.js も例外ではありません ;)

于 2015-08-02T16:51:05.523 に答える
1

また、本番リリースでは、通常、最小化された JS 依存関係を使用し、ここで説明されているように、-jsdeps.js の代わりに -jsdeps.min.js を使用する必要があることに注意してください。JavaScript の依存関係が適切なミニファイヤで構築されている場合、gzip がなくてもかなり役立ちます。

@invariant が指摘しているように、クライアントが jsdeps をキャッシュしている限り、影響はページの最初のヒットに限定され、その後ははるかに高速になります...

于 2015-08-03T19:24:47.577 に答える