SSR React同构渲染改造

***.render(   
    <>   
    , document.getElementById('root')
)

{  
"scripts": {    
        "deploy": "NODE_ENV=production egg-scripts start --port=8080 --daemon --title=egg-server-lealf --env=prod",    
        "build": "easy build",   
        "dev": "egg-bin dev --port=8080",   
        "start": "egg-scripts start --port=8080",   
        "debug": "egg-bin debug",    
        "clean": "easy clean",    
        "kill-port": "sudo kill -9 $(lsof -i:8080 -t)",    
        "lint": "eslint .",   
        "fix": "eslint --fix .",   
        "ii": "npm install --registry https://registry.npm.taobao.org"
    },  
    "dependencies": {   
        "antd": "^3.0.3",  
        "axios": "^0.21.0", 
        "cross-env": "^5.0.0",   
        "egg": "^2.1.0",  
        "egg-cors": "^2.0.0",  
        "egg-logger": "^1.5.0",    
        "egg-scripts": "^2.10.0",   
        "egg-validate": "^1.0.0",   
        "egg-view-react-ssr": "^2.1.0",   
        "extend": "~3.0.0",  
        "history": "^4.7.2",    
        "lodash": "^4.17.4",    
        "mockjs": "^1.0.1-beta3",  
        "moment": "^2.17.1",   
        "react": "^16.0.0",    
        "react-dom": "^16.0.0",   
        "react-redux": "^5.0.6",   
        "react-router": "^4.2.0",    
        "react-router-config": "^1.0.0-beta.4",  
        "react-router-dom": "^4.2.2",   
        "react-router-redux": "^4.0.8",   
        "redux": "^3.7.2"  
    },  
    "devDependencies": {    
        "autod-egg": "^1.0.0",   
        "easywebpack-cli": "^4.0.0", 
        "easywebpack-react": "^4.0.0",  
        "egg-bin": "^4.9.0",  
        "egg-webpack": "^4.0.0",   
        "egg-webpack-react": "^2.0.0",   
        "eslint-config-egg": "^5.1.1",   
        "imagemin-webpack-plugin": "^1.5.2",  
        "ip": "^1.1.5",   
        "less": "^2.7.2",   
        "less-loader": "^4.1.0"
    },  
    "engines": {   
        "node": ">=6.0.0" 
    },
    "ci": {   
        "version": "6, 8, 9" 
    }
}

├── app                         // 根目录
│   ├── controller              // 控制器，类似于以前的MVC框架中的C，主要用户存储数据装载逻辑，处理请求
│   │   ├── test
│   │   │   └── test.js
│   ├── extend
│   ├── lib
│   ├── middleware            // 中间件目录，可自定义实现中间件，然后在洋葱模型基础上装载到此框架上
│   ├── mocks                   // mocks数据，用于在后端未能联调，自行mock数据来完成开发，可选用
│   ├── proxy                   // 代理相关设置，一般不用
│   ├── router.js               //  用户请求路由
│   ├── view                    // 存放build打包出来的文件，需要用.gitkeep保证空目录提交到代码线上
│   │   ├── home
│   │   │     └── home.js                 // 服务器编译的jsbundle文件
│   └── web                               // 前端工程目录
│       ├── asset                         // 存放公共js,css资源
│       ├── framework                     // 前端公共库和第三方库
│       │   └── entry                          
│       │       ├── loader.js              // 根据jsx文件自动生成entry入口文件loader
│       ├── page                           // 前端页面和webpack构建目录, 也就是webpack打包配置entryDir
│       │   ├── home                       // 每个页面遵循目录名, js文件名, scss文件名, jsx文件名相同
│       │   │   ├── home.scss
│       │   │   ├── index.jsx
│       └── component                         // 公共业务组件, 比如loading, toast等, 遵循目录名, js文件名, scss文件名, jsx文件名相同
│           ├── loading
│           │   ├── loading.scss
│           │   └── loading.jsx
│           ├── test
│           │   ├── test.jsx
│           │   └── test.scss
│           └── toast
│               ├── toast.scss
│               └── toast.jsx
├── config
│   ├── config.default.js               // 项目默认配置
│   ├── config.local.js
│   ├── config.prod.js
│   ├── config.test.js
│   └── plugin.js
├── doc
├── index.js
├── webpack.config.js                      // easywebpack-cli 构建配置
├── public                                 // webpack编译目录结构, render文件查找目录
│   ├── static
│   │   ├── css
│   │   │   ├── home
│   │   │   │   ├── home.07012d33.css
│   │   │   └── test
│   │   │       ├── test.4bbb32ce.css
│   │   ├── img
│   │   │   ├── change_top.4735c57.png
│   │   │   └── intro.0e66266.png
│   ├── test
│   │   └── test.js
│   └── vendor.js                         // 生成的公共打包库

// ${root}/config/config.local.js
exports.webpack = { // 默认是如下配置，可不配置  
    browser: 'http://localhost:7001', // 配置 false 可以关闭自动打开浏览器  
    webpackConfigList: require('@easy-team/easywebpack-react').getWebpackConfig()
};

// framework/layout/layout.jsx 组件
import React, { Component } from 'react';
export default class Layout extends Component {
  render() {
    return <html>
    <head>      
        <title>{this.props.title}</title>   
        <meta charSet="utf-8"></meta>     
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"></meta>                   <meta name="keywords" content={this.props.keywords}></meta>       
        <meta name="description" content={this.props.description}></meta>     
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"></link>  
    </head>    
    <body>
        <div id="app">
            {this.props.children}
        </div>
    </body> 
    </html>; 
    }
}

// app/web/framework/entry/server-loader.js
module.exports = function() {
  this.cacheable();
  return `   
      import React, { Component } from 'react';  
      import Layout from 'framework/layout/layout.jsx';
      import Header from 'component/header/header.jsx';   
      import App from '${this.resourcePath.replace(/\\/g, '\\\\')}';  
      export default class Page extends Component {     
          render() {       
            return <Layout {...this.props}><App {...this.props} /></Layout>; 
          } 
      } 
  `;
};

// app/web/framework/entry/client-loader.js
module.exports = function() {
  this.cacheable();
  return `  
      import React from 'react';  
      import ReactDom from 'react-dom';    
      import { AppContainer } from 'react-hot-loader';  
      import Entry from '${this.resourcePath.replace(/\\/g, '\\\\')}';   
      const state = window.__INITIAL_STATE__;    
      const render = (App)=>{     
      ReactDom.hydrate(EASY_ENV_IS_DEV ? <AppContainer><App {...state} /></AppContainer> : <App {...state} />, document.getElementById('app'));   
      };   

      if (EASY_ENV_IS_DEV && module.hot) {  
      module.hot.accept('${this.resourcePath.replace(/\\/g, '\\\\')}', () => { render(Entry) });   
      }    
      render(Entry);  
  `;
};

gzip on;                 #决定是否开启gzip模块，on表示开启，off表示关闭；
gzip_min_length 1k;      #设置允许压缩的页面最小字节(从header头的Content-Length中获取) ，当返回内容大于此值时才会使用gzip进行压缩,以K为单位,当值为0时，所有页面都进行压缩。建议大于1k
gzip_buffers 4 16k;      #设置gzip申请内存的大小,其作用是按块大小的倍数申请内存空间,param2:int(k) 后面单位是k。这里设置以16k为单位,按照原始数据大小以16k为单位的4倍申请内存
gzip_http_version 1.1;   #识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
gzip_comp_level 2;       #设置gzip压缩等级，等级越底压缩速度越快文件压缩比越小，反之速度越慢文件压缩比越大；等级1-9，最小的压缩最快 但是消耗cpu
gzip_types text/plain application/x-javascript text/css application/xml;    #设置需要压缩的MIME类型,非设置值不进行压缩，即匹配压缩类型
gzip_vary on;            #启用应答头"Vary: Accept-Encoding"
 
gzip_proxied off;
nginx做为反向代理时启用,off(关闭所有代理结果的数据的压缩),expired(启用压缩,如果header头中包括"Expires"头信息),no-cache(启用压缩,header头中包含"Cache-Control:no-cache"),
no-store(启用压缩,header头中包含"Cache-Control:no-store"),private(启用压缩,header头中包含"Cache-Control:private"),no_last_modefied(启用压缩,header头中不包含
  "Last-Modified"),no_etag(启用压缩,如果header头中不包含"Etag"头信息),auth(启用压缩,如果header头中包含"Authorization"头信息)
 
gzip_disable msie6;
(IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩 )指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配),依赖于PCRE库

new BundleAnalyzerPlugin(    {       
    //  可以是`server`，`static`或`disabled`。        
    //  在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。       
    //  在“静态”模式下，会生成带有报告的单个HTML文件。       
    //  在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。        
    analyzerMode: 'static',        
    //  将在“服务器”模式下使用的主机启动HTTP服务器。 
    analyzerHost: '127.0.0.1',       
    //  将在“服务器”模式下使用的端口启动HTTP服务器。        
    analyzerPort: 8888,        
    //  路径捆绑，将在`static`模式下生成的报告文件。        
    //  相对于捆绑输出目录。        
    reportFilename: 'report.html',        
    //  模块大小默认显示在报告中。        
    //  应该是`stat`，`parsed`或者`gzip`中的一个。       
    //  有关更多信息，请参见“定义”一节。       
    defaultSizes: 'parsed',       //  在默认浏览器中自动打开报告        
    openAnalyzer: true,       //  如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成        
    generateStatsFile: false,        //  如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。        
    //  相对于捆绑输出目录。        
    statsFilename: 'stats.json',        //  stats.toJson（）方法的选项。        
    //  例如，您可以使用`source：false`选项排除统计文件中模块的来源。        
    //  在这里查看更多选项：https：  
    //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21        
    statsOptions: null,       
    logLevel: 'info' // 日志级别。可以是'信息'，'警告'，'错误'或'沉默'。    
    }
)

// webpack.config.js修改如下
const webpack = require('webpack');

module.exports = {
    externals:  {   
        'moment': 'moment',   
        'moment/locale/zh-cn' : 'moment.locale'
    },
    plugins : [   
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ]
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/zh-cn.min.js">
</script>