非潮流前端项目架构

项目特征

• 运行于第三方 APP 内，需要以 H5 等相关后台技术为基础。
• UE 、 UI 、静态页面由合作公司开发，然后再套用到前端项目中。
• 页面较少，但需要在第三方 APP 内进行多次 webview 切换，路由需要自己负责，第三方 APP 不提供支持。
• 动静分离。
• 前端前端技术采用 React 、Webpack 、 Babel 等，开发时热更新。
• 没有 redux ，没有 RxJS ，没有 SEO 。
• Web api 采用 Spring ，部署于 WAS 。
• 后端较重，使用 Dubbo 等。

组织架构

前端的工作流程如图。

前端工作流.png

面临的问题主要有：

• UE 设计缺乏设计规范和支撑实施设计规范的组件库，经常会出现分支流程缺失的情况。比如某个流程失败，某几个展示要素缺失等。
• UE 设计的缺失导致 UI 没有对此进行设计，因此静态页面也缺少相关实现。比如一个物品最多可以展示 5 个标签，只实现了展示 5 个标签和不展示标签。
• 反馈流程过长，许多上述问题在开发阶段和测试阶段才暴露出来。
• 组件化受限于静态页面开发质量，影响组件化的实施。

模板套用

因为项目组内缺乏对 css 、 less 、 scss 、 postcss 等熟悉的工程师，所以从 UI 到静态页面是从外部公司采购的。我们拿到的静态页面是这样的。

- app
|-- css
| | |-- app.css
|-- image
|-- html
| | |-- pageA.html
| | |-- pageB.html

拿到之后，将静态资源复制到对应的目录下，然后将 html 的内容改写成 jsx 。很多页面展示内容和业务强相关，可以共用的组件基本就是 header ， modal ， toastr ，存储和路由等。

代码组织

前端代码采用动静分离，分为两个部分：页面代码和 web api 。

页面代码组织

Java 项目的工程化是非常成熟的，页面代码参考 Java 项目，该分层的分层，该配置管理的配置管理。

• 按照页面划分路由，每个页面保存自己的 state ，全局变量使用 localStorage 来传递。
• 由于存在 webview 切换的问题，没有使用 redux 等，当然也可以考虑切换前利用 localStorage 持久化，切换后用其初始化。

- app
|-- asset // 构建输出目录
|-- css // 样式源文件目录
|-- image // 图片源文件目录
|-- node_modules // npm 仓库
|-- scripts // js源文件目录
| | |-- pages // 相当于一般 react 项目中的 container
| | | | |-- [Page] // 页面目录
| | | | | | |-- index.js // 入口文件
| | | | | | |-- [Component].js // 页面组件文件，0 到多个
| | |-- routes // 封装页面为 react-router lazy-load 组件
| | | | |-- [Page] // 对应页面目录
| | | | | | |-- index.js // 页面 route 配置文件
| | |-- utils // 公共库
| | | | |-- polyfill // 适配第三方 APP 的代码
| | | | |-- [CommonComponet] // 公共 react 组件目录，如 Toastr
| | | | |-- Example // 示例代码目录
| | | | |-- global.js // 基础公共函数库
| | | | |-- browserHistory.js // history.js + react-router 
| | | | |-- clientStorage.js // 使用 cookie / storage 本地存储
| | |-- app.js // 客户端 js 入口
| | |-- index.ejs // 生成入口 html 的模板文件
|-- tools // 构建相关源文件目录
| | |-- clean.js // 清理历史构建文件
| | |-- zip.js // 构建输出打包
| | |-- copy.js // 管理外资源拷贝，如 favicon.js
| | |-- start.js // 开发用 web server，基于 webpack-dev-server
| | |-- verify.js // 验证构建结果的 web-server
| | |-- ...
|-- .babelrc // 目前配置在 package.json 里
|-- .eslint // 代码规范校验
|-- .eslintIgnore // 忽略代码规范校验
|-- package.json // npm 描述文件
|-- webpack.config.[target].js // 对应各个环境的 webpack 配置。

页面构建

项目主要通过 webpack 构建静态资源。webpack 的构建以配置文件中的 entry 为起点，对依赖的资源进行静态分析，然后通过 loaders 和 plugins 进行处理，输出到 output。

webpack 工作流.png

构建时的性能优化：

• 通过 CommonsChunkPlugin 抽取公共函数库，打包成单独的 js chunk 。
• 通过 UglifyJsPlugin 压缩 js 。
• 通过 css-loader 压缩 css 。
• 通过 url-loader 将小图片转为 base64 ，减少小文件请求。
• 通过 webpack 提供的 import 和 react-router 配合使用，实现延迟加载的功能，进一步提升首屏加载速度，保证各个页面的加载速度。

Additional：

• 在 pre-build 阶段，提供清理之前构建，复制依赖之外的资源等功能的脚本。
• 在 post-build 阶段，提供输出目录压缩，启动模拟目标部署环境 web server 验证等功能的脚本。

web api 代码组织

web api 是典型的 maven web project 。

- project
|-- src
| | |-- main
| | | | |-- java // java 源文件
| | | | |-- portable // 构建时的部署环境配置
| | | | |-- resources // 各种依赖配置，如 spring，dubbo ， redis ， shiro ， logback ， shiro 等。
| | | | |-- webapp
| | | | | | |-- web.xml // 主要是 web.xml 的配置。
| | |-- test // 对应同级 java 目录的单元测试文件
|-- pom.xml // maven 描述文件，项目对象模型

Java 里充当 express/koajs 等角色的实际上是 web 容器，Spring 对应的是 express/koajs 生态圈的一揽子方案，包括了 route 、 template 、load 等等。

web api 构建

所有的项目构建其实内容都差不多：预处理 -> 处理 -> 后处理 -> 输出。maven 就等于是 Java web 的 npm + webpack 。
npm install, webpack -> maven install 。

运行态

此时前台访问一个页面的过程大致上如图。

前端架构运行时.png

静态资源服务器使用 nginx ，没有做同构直出。为了正确渲染页面，任意请求返回的都是同一个 index.html （try_files），该 index.html 含有 app.css ，外壳 + 路由配置的 app.js 。app.js 加载完成后，则会进一步 lazy-load 对应 uri 所需的 js 文件。

因此，初次访问或者缓存过期的情况下，一个页面的访问有：

1. 请求 index.html 。
2. 请求 app.css 。
3. 请求 app.js 。
4. 请求 vendor.js 。
5. 请求 [route].js 。
6. 请求其他静态资源，如静态图片资源。
7. 其他动态请求。

而 app.css 、 app.js 、vendor.js 在缓存后如果是 304 ，并不会再次请求。

TBC

• less/scss/postcss 。
• 后端渲染。
• RN 。
• koa&pm2 。