每一个国家的都有其特殊国情，每个项目都有特殊的项目情况。这个项目就对 SEO 和 ie8 有了特殊的要求。
Search Engine Optimization,搜索引擎优化
各类搜索引擎抓取页面的源码，识别其中的文本信息并予以记录。
Single Page Application 单页面应用程序
现在时下流行的前端方案就是 SPA 方案了，html 元素控制都是通过 js 渲染来进行的。在页面源码中只有基础的 demo、css 地址和 js 地址。
在现有的 SPA 工作模式下，使用同构直出的手段，不仅可以保留我们现有的开发模式，还可以减少很多工作量。前后端完全使用同一套代码，将前端的渲染逻辑移到服务器端完成，将渲染后的结果再交给用户。
当前 node 在服务端有着许多主流抑或非主流的框架，包括 express、koa、thinkjs 等，能够较快上手，利用各种中间件得以进行敏捷开发。
另外诸如 ejs、jade 这样的渲染模板能让我们轻松地把首屏内容（数据以及渲染好的 DOM 树）注入页面中。
这样用户访问到的便是已经带有首屏内容的页面，大大降低了等候时间，提升了体验。
目录结构
cmc_open_store
├─build // 服务端构建目录
│ └─server.bundle.js
├─dist // 客户端端构建目录
│ ├─bundle
│ │ ├─home
│ │ │ └─info.js
│ │ ├─dashboard.js
│ │ ├─home.js
│ │ └─input.js
│ ├─home
│ │ └─info.html
│ ├─lib
│ │ ├─anu.full.min.js
│ │ └─common.polyfill.min.js
│ ├─dashboard.html
│ ├─home.html
│ └─input.html
├─lib // 引用的三方库目录，需二次构建编译
│ ├─anu // anu 支持ie8的类react框架
│ │ ├─ReactIE.js
│ │ ├─ReactPropTypes.js
│ │ ├─ReduxIE.js
│ │ ├─Rematch.js
│ │ ├─createClass.js
│ │ └─injectTapEventPlugin.js
│ ├─common-polyfill // ie8垫片层
│ │ ├─fetch-polyfill-0.0.3
│ │ │ ├─avalon.js
│ │ │ └─index.js
│ │ ├─bluebird.js
│ │ ├─console-polyfill.js
│ │ ├─es5-shim.js
│ │ ├─json3.js
│ │ ├─object-create-ie8.js
│ │ └─object-defineproperty-ie8.js
│ ├─dist // 三方库二次构建输出目录
│ │ ├─anu.full.min.js
│ │ └─common.polyfill.min.js
│ └─gulpfile.js // 二次构建配置文件
├─src // 源码目录
│ ├─client // 客户端源码
│ │ ├─pages
│ │ │ ├─dashboard
│ │ │ │ └─index.js
│ │ │ ├─home
│ │ │ │ ├─info
│ │ │ │ │ └─index.js
│ │ │ │ ├─style // 页面样式文件
│ │ │ │ │ └─index.less
│ │ │ │ └─index.js
│ │ │ └─input
│ │ │ └─index.js
│ │ └─styles // 全局样式文件
│ │ └─index.less
│ │ └─templates // ejs 模板
│ │ └─index.ejs
│ └─server // 服务端源码
│ └─index.js
├─tools // 工具目录
│ ├─compiler-client.js // 客户端编译脚本
│ ├─compiler-server.js // 服务端编译脚本
│ ├─config.js // 通用配置文件
│ ├─server.js // 客户端Dev server
│ ├─webpack-config-client.js // 客户端编译webpack配置
│ └─webpack-config-server.js // 服务端编译webpack配置
├─package-lock.json
└─package.json
动态 meta 借助于 EJS 这个高效的 JavaScript 模板引擎，可以直接由后台来控制 html 页面的渲染。
<meta name="Keywords" content="<?= keywords ?>">
<meta name="description" content="<?= description ?>" />
<title>
<?= title ?>
</title>
<script>
window.__state__ = <?- state ?>
</script>
<div id='mainContainer'>
<?- component ?>
</div>
简介
anujs 是一个高级兼容 React16 的迷你 React 框架，它兼容 React16.3.0 的 99%接口， 跑通了官方 788 个 case， 支持 React 生态圈的 99％的组件与 UI 库。
优势
- 支持 React16 的各种新功能，Fragment, componentDidCatch, creactContext, createRef, forwardRef...
- 支持 React16 的各种新功能，Fragment, componentDidCatch, creactContext, createRef, forwardRef...
- 支持 React 全家桶（react-redux, react-router-dom, react-router-redux， react-lazy-load， react-hot-loader...）
- 支持 99％的 antd 组件 （antd 为中国最有名的 React UI 库）
已知问题 无法做按需加载 无法压缩
解决方案 anu 编译为独立类库 垫片层编译独立类库