陣營海量內容和重複使用服務器端呈現

沒有服務器端渲染（SSR），要求重現該問題：
ReactJS + WebPack + React-Router
我用約曼發電機aspnet core React項目沒有SSR，禁用在Startup.cs中HotReloading（或可能運行生產模式）
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包括用於家庭和計數器組件（子頁面）的所有內容/佈局，以及用於其他子頁面的所有內容和佈局。
  這表示我們正在加載整個應用程序的佈局，即使我們只請求了一個子類別，例如，計數器
  停止網站後，您仍然可以在通過webpacked main-client.js加載的子頁面之間進行切換。
  
  問題1：是否有可能只是你請求當前頁面（應用程序外殼+流子類別）來加載？
  （當時爲另一部分只有一個新的子類別，由於緩存的應用程序殼）
  （或許與其他路由器和特殊（基於web）包設置）
服務器端渲染（SSR），要求重現問題：
ReactJS + WebPack + React-Router + SSR
我Startup.cs用約曼發電機aspnet core React項目，終極版和SSR，也被禁止HotReloading（或可以運行生產模式）

結果
- 現在更糟糕，因爲我們加載整個網站佈局兩次：第一次在完全渲染HTML，然後裏面main-client.js
這表明，在默認情況下做出反應沒有差別靜態內容（控制內部的靜態文本）和動態內容（一些有條件的html輸出）之間，因此它把所有的信息放入巨大的JS文件中。

問題2：是否可以給出大約做出反應靜態部分的提示，所以只需要通過一臺服務器，一旦使其從客戶端的Java腳本只留下動態計算/組件消除它？

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

它接縫不是所以很多人都知道它，因爲這些問題是在很多樣本內，他們沒有在教程中提到。

現在常用的方法之一是首先加載一個空的應用程序外殼佈局，然後通過客戶端JavaScript加載JSON數據的內容。但是它並沒有解決這些問題，例如對於第一個問題，我們仍然在爲hole應用程序加載一個shell，而對於豐富的佈局，它可能是一個真正巨大的帶有大量空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 */

來源

2016-10-17 Artru

可以解決與[的WebPack代碼分割] Q1（http://jonathancreamer.com/advanced-webpack-part-2-code-splitting/）。我相信Q2是[inferno]（https://github.com/trueadm/inferno）的動機。 – joews

@joews不錯，我還沒有聽說過'inferno'項目，你可以把信息給一個正確的答案 – Artru

問題1

你可以把你的應用分成幾個包與Webpack code splitting。

它提供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-17 22:02:42 joews

陣營海量內容和重複使用服務器端呈現

回答

相關問題