基于React的PC网站前端架构分析

代码地址如下：
http://www.demodashi.com/demo/12252.html

本文适合对象

1. 有过一定开发经验的初级前端工程师；
2. 有过完整项目的开发经验，不论大小；
3. 对node有所了解，关注前端发展，了解所谓“大前端”的概念；
4. 了解React；
5. 了解ES6；
6. 想要初步了解一下大型网站的前端结构的人。

关于demo

本demo是我平时开发React项目时候自己配置的一套开发环境，由于每次写react的demo的时候都需要配置webpack，十分繁琐，因此前段时间我按照自己的开发习惯配置了一套基础的配置开发环境，以后每次写demo的时候直接使用本环境即可。

该环境由于只是用于本地开发使用，因此没有配置SSR和PRODUCTION_ENV。

序

最开始接触前端的时候，是从简单的html、css、js开始的，当时盛行的WEB理念是结构样式行为相分离，即html、css、js分离，独立开发，互相之间通过link和script来互相调用。

最开始我说接触到的小项目，都是直接将html、css、js等静态资源直接部署到服务器上，然后根据请求路由响应不同的html文件即可。

即使学习了webpack之后，我依然认为webpack的作用只是压缩js和css文件，提高服务器响应速度，优化用户体验，而部署到服务器上的依然是压缩后的min.css和min.js文件。

后来进入A公司实习之后，确实也是这种开发模式，当时我们开发h5页面，都是直接书写html、css、js文件，然后部署到服务器上，直接访问html即可。

后来进入B公司工作之后，才慢慢接触到真正的前端工程是什么样子的。

前后端分离

部分传统大型PC网站的业务前端部分都是采用的MVC架构方式，也就是每次立项之后，前后端约定好接口，分别开发，开发完毕之后，前端将开发好的页面交给后端（一般是Java或者PHP），然后由后端响应客户端请求，返回具体的html页面。

这种开发模式的缺点在于费时费力，沟通成本和联调正本非常高，前端有一点小的改动都需要前后端一起联调改动上线，大大增加了总工作量。

因此，现代大型PC网站一般都采用了前后端分离的架构方式，前端和后端的业务功能各自收敛，可以分别开发上线，互不影响，可以极大提高工作效率。

前后端分离一般分为两种：
1. 没有中间层的前后端分离；
2. 有中间层的前后端分离。

这里以目前最火的三大框架之一的react为主进行介绍。

无中间层

没有web中间层的前后端分离属于比较简单的类型，我们将一个统一的html/pug模板和其他的css、js等静态资源放置到cdn上，每次访问页面的时候，直接将模板返回给用户，然后里面所有的dom节点和其他数据都是由js来执行生成的。

(无中间层的前后端分离)

然而这种没有中间层的前后端分离的又有很多劣势：
1. 首屏渲染时间过长；
2. 对seo不友好。

有中间层

有中间层的前后端分离是一般大型项目采用的前后端分离方式。

自从2009年node横空出世之后，前端也逐渐承担了一些后端的业务，但是node由于自身健壮性的限制，又不适合作为大型项目的后端服务器，所以node