前言

Express+Vue+AMP搭建node服务端注入首屏渲染数据, Express+ejs组装AMP组件的项目架构
我做过的某个项目经历过以下5个项目架构形态

Vue+PHP CI
Vue+Nginx
Vue+PHP
Vue+Express
Express+Vue+AMP+PWA

具体架构变动看下面的思维导图

最终版项目架构（Express+Vue+AMP+PWA）介绍

介绍

为什么我把Express放在前面,而不是Vue+AMP+Express? 因为项目架构发展到这里，其实Express服务端框架已经占了主体，他可以分发管理部署Vue的静态资源以及AMP页面，以后也还有跟多可扩展性的可能。

Vue多页面应用

Vue-Cli3配置多页面入口只需要配置vue.config.js文件里面的全局CLI配置里面的pages参数

我们项目的多页面经历了多次调整

第零阶段：最开始担心单页面首屏资源过大，使用了每个页面新建一个page入口，导致VueRouter基本不能用，完全没利用上路由懒加载。
第一阶段：后面为了方便用<router-link to="/">逐渐改为一个单页面应用。
第二阶段：后面觉得业务功能太多，怕影响单页面首屏加载的资源大小。后面按照业务功能模块分了8个页面入口。
第三阶段：业务功能间业务关联密切，且交互需求上希望页面跳转加动画且最求更平滑的过渡，那多页面入口就不能较好的支持这些需求，经常遇到需要强制刷新页面切换入口的情况，而且入口匹配错误容易导致404bug。改为按照站点分多页面入口：商城站点入口、App原生及第三方落地页入口、社区站点入口。目前就还是这三个入口，三个入口不会任何的业务性关联，完全独立。这样商城网站的任何单页面交互就可以较好的支持，并且App落地页的入口总资源也相对更小。

Vue-Cli3项目架构

最开始我们也是用Vue-cli2，后面发现Vue-cli3项目的结构更清晰合理，配置更简单，并且也可选择深度配置。所有选择从Vue-cli2升级到Vue-cli3，请参考我的另一篇博客Vue-Cli2到Vue-Cli3 Vue项目架构升级
Vue-CLI3的几个优势点

目录结构更清晰.
弃用之前的的build文件夹的build.js和webpack.prod.conf.js
使用新的vue.config.js配置文件包含了之前的wepack配置项。
支持插件集成和插件开发。（比如typeScript 、mocha）
可以通过 vue ui 命令运行图形化界面，在图形化界面上创建和管理项目
@vue/cli-plugin-pwa插件方式快速配置PWA应用,这样PWA的功能可以通过插件一键集成

Express Node服务端路由

为什么需要服务端路由？

根据不同路由输出不同的预取数据
不同路由模块使用不同业务中间件
根据不同路由配置不同Vue多页面入口或AMP资源

Express Node服务端中间件

服务端中间件能做什么？什么是中间件？
用2019杭州·云栖大会上的程序员吐槽大会的一段说明就是
“我有个同事是做中间件的，我知道中间件很重要，什么是中间件？无非就是有很多人需要找马老师对接业务，马老师很忙没空跟这么多人对接业务，为了考虑马老师繁忙和安全问题，然后就找了水域去跟那些人对接，而马老师就只跟水域对接。说的好听叫中间件，其实就是个太监”。
哈哈！！！大家有啥要吐槽的吗？

举例：例如需要在进入服务端的每个路由之前做出移动端PC端的判断并重定向到对应的环境域名url上，或者是需要在所有路由匹配之前做出广告链接的重定向等业务逻辑。这个时候就需要一个全局的web中间件，在处理在路由匹配之前的业务。

Node服务端动态注入SEO相关数据到Html

大家都知道一个单页面应用的问题，就是不利于SEO搜索引擎的爬虫抓取对应路由页面的内容。因为单页面应用多个路由都是同一个HTML源码，根据前端js路由渲染不同页面内容。所有这个时候要优化ESO其实有多种方案。
跟多方案，请参考我之前的博客VueJs单页面应用SEO解决方案
目前项目用的是node服务端注入动态SEO相关参数的方案。

可以看到上项目架构思维导图的 Express核心控制器及中间—>Vue打包静态资源的部分, 这个关系里面就是在node服务请求到页面内容数据，并把SEO相关参数通过Ejs或其他html模板语法注入到即将to浏览器的HTML(在Vue打包的.html文件的基础上注入)里面。

Node服务端预取首屏渲染所需业务数据

单页面应用一般在主静态框架渲染完需要对不同的页面在浏览器端请求API异步拿到数据后再渲染内容到页面上。这个过程用户看到的体验是会有一个API请求Loading的过程。而且这个过程跟用户的网络情况有直接关系，如果页面首屏需要渲染的数据在服务端返回HTML文档的时候就直接包含在HTML源代码里面了，那前端到浏览器可以省掉请求首屏数据的API，整个速度体验可以提升1秒左右。因为在node服务端请求API拿数据不取决于用户的网络，一般服务的网络情况比较稳定，ndoe服务端还可以对请求的相同数据利用Redis或其他缓存工具进行缓存，这样在服务端请求数据的速度可以从之前的平均1000ms降低到平均10ms以内。

Express架构内增加AMP开发模块

AMP是什么?
AMP是Google主导的一个开源的网页性能优化组件库，我更多的认为AMP其实是为网站性能优化定制的一套规则，它有很多规则限制，不能自定义js代码，要使用组件必须按照规则来使用，避免制造出影响网页性能的代码。

AMP为什么要选择AMP他有什么优势？

AMP的静态页面会被Google收录并享受免费cdn服务。
AMP在Google的搜索结果页具有优先展示优势（虽然Google官方说并没特殊优先级，但是实际效果是确实会带来更多优质自然流量）
在Google搜索结果页提前预加载你的AMP页面，这样在结果页面点击打开你的AMP页面能有秒开的体验，因为不需要重新加载页面资源。
AMP网页加载速度更快，性能更稳定。

总结及Demo代码分享

前端项目架构并不是越复杂越好，并不是用最前沿的框架就是最好，最合适自己的业务的才是最好的，然后在能支持其现在的业务的基础上，再考虑一下明天的业务扩展，考虑怎么样快速高效的支持”明天的扩展业务”。再进一步就是考虑怎么样能够高效开发维护，并提高网站性能，给用户提供极致的用户体验。

Express+Vue+AMP架构的模板代码地址：StriverF/express-vue-amp-template

前言