0

ReactJS S̶i̶n̶g̶l̶e̶ シェルページアプリケーション

  1. サーバー側レンダリング (SSR) なし、問題を再現するための要件: SSR なしでaspnet コア Reactプロジェクト
    ReactJS + WebPack + React-Router
    に Yeoman ジェネレーターを使用し、Startup.cs で HotReloading を無効にしました (または運用モードを実行できます)。

    <Route component={ Layout }>
   <Route path='/' components={{ body: Home }} />
   <Route path='/counter' components={{ body: Counter }} />      
</Route>;
/* project includes Home.tsx, Counter.tsx and other components/subpages */

    Home.tsx の一部:

    class Home extends React.Component<any, void> {
  public render() {
    return <div>
        <h1>Hello, world!</h1>
        <p>Welcome to your new single-page application, built with:</p>

    結果

    • main-client.jsホームおよびカウンター コンポーネント (サブページ) のすべてのコンテンツ/レイアウト、および他のサブページのすべてのコンテンツとレイアウトが含まれます。これは、サブカテゴリを 1 つだけ要求した場合でも、アプリケーションのレイアウト全体
      をロードしていることを意味し
      ますmain-client.js。

      ここに画像の説明を入力

      質問 1 : 現在のページ (アプリケーション シェル + 現在のサブカテゴリ) に対して要求したものだけを読み込むことは可能ですか?
      (その後、別のセクションでは、キャッシュされたアプリ シェルによる 1 つの新しいサブカテゴリのみ)
      (おそらく、別のルーターと特別な (web-)pack 設定を使用)

  2. サーバー側レンダリング (SSR)、問題を再現するための要件: Redux とSSRを使用してaspnet コア React
    ReactJS + WebPack + React-Router + SSR
    プロジェクト に Yeoman ジェネレーターを使用し、Startup.cs で HotReloading を無効にしました (または運用モードを実行できます)。

    結果

    • Web サイトのレイアウト全体を 2 回読み込みます。最初は完全にレンダリングされた html で、次に内部で読み込みます。main-client.js

    これは、デフォルトで React の場合、静的コンテンツ (コントロール内の静的テキスト) と動的コンテンツ (いくつかの条件付き html 出力) の間に違いがないことを示しているため、すべての情報が巨大な JS ファイル内に配置されます。

    質問 2 : 静的部分について React にヒントを与えることは可能ですか? サーバーで一度レンダリングし、動的計算/コンポーネントのみを残してクライアント Java スクリプトから削除するだけで済みますか?

================================================== ======

これらの問題は多くのサンプルに含まれており、チュートリアルでは言及されていないため、認識している人はあまり多くないようです。

最近の一般的なアプローチの 1 つは、最初に空のアプリケーション シェル レイアウトをロードし、次にクライアント JavaScript を介してコンテンツの JSON データをロードすることです。ただし、これらの問題は解決されません。たとえば、最初の問題については、ホール アプリのシェルをまだロードしています。リッチ レイアウトの場合、多くの空の DOM 要素を含む非常に巨大な JS ファイルになる可能性があります。

<h1 id="react-hint-for-element-9997">/* here will be header*/</h1>
    <h2 id="react-hint-for-element-9998">/* here will be subheader*/</h2>
        /*and so on and on */
4

1 に答える 1

1

質問1

Webpack コード分割を使用して、アプリを複数のバンドルに分割できます。

必要なときにバンドルを遅延ロードする機能を提供require.ensureします (たとえば、ユーザーが新しいルートに到達したとき)。

例 (Webpack ドキュメントから):

//static imports
import _ from 'lodash'

// dynamic imports
require.ensure([], function(require) {
  let contacts = require('./contacts')
})

質問2

React は (まだ) 静的コンテンツと動的コンテンツを区別していません。 Infernoは、レンダリング パフォーマンスを向上させるためにこの区別を行う React ライクなライブラリです。あなたのユースケースには React よりも適しているかもしれません。

例 (インフェルノのドキュメントから):

import Inferno from 'inferno';
import InfernoDOM from 'inferno-dom';

const message = "Hello world";

InfernoDOM.render(
  <MyComponent message={ message } />,
  document.getElementById("app")
)
于 2016-10-17T22:02:42.877 に答える