如何构建一个WEB同构应用

简介

　　WEB同构应用指的是经过代码的编译转换手段(一般借助于babel)来让代码在不一样端client(浏览器), server(服务器)运行.同构的web应用主要有如下的优势:

1. 一套代码多处运行减小维护成本
2. 任务拆分,经过同构能够实现更多的功能(SSR, fetchData)  

简单的实现思路

1. 将client端的代码转换成server能够执行的代码(es6 => commonjs).
2. 在两端组合出一套模式相同的代码逻辑.下面的例子中在server和client端使用不一样的react-router提供的组件. 
3. server端路由匹配,组装资源(css, js, data), 能够经过不一样的中间件根据请求信息来组装.
4. client端路由匹配,匹配资源(data, 检查页面渲染结果是否正确).

过程

代码转换

　　在进行代码转换的时候,首先要明白代码转换的目的才能明确对不一样文件的转换策略.好比为了实现同构将client端的代码转换成server端能够运行的代码,对不一样类型CSS文件的不一样处理策略.一般借助于webpack来实现代码的转换功能.webpack会根据入口文件依次的解析引用的各类文件类型,经过配置的webpack loader能够实现对应文件类型的转换.如下主要从不一样类型文件处理的角度进行介绍:

javascript

转换的目标是client端的代码(排除node_modules). 将client转换成server端能够运行的代码 

css

对于CSS能够有如下两种的处理方法:

1. css-in-js (css-loader style-loader)处理,包括node_modules,client端不须要提取的CSS
2. client端全局样式或者经过mini-css-extract-plugin提取的样式

代码转换优化

公有代码提取

可使用DllPlugin对使用的基础组件库进行统一的提取和引用.提取公有模块代码主要有如下的好处:

1. 经过DllPlugin对公有代码的提取,能必定程度上加快webpack构建代码的速度
2. 公有部分的逻辑相对来讲是变化的较少,能够充分的利用缓存
3. 减小其余bundle的体积,页面加载的资源更少
   

   
   

加快编译速度

可使用happyPack加快编译速度,happyPack经过多进程的方式来加快代码的打包过程. 使用happyPack的例子: 

资源匹配

静态资源(CSS js)

能够经过webpack-manifest-plugin生成资源的位置信息文件,而后经过该文件查找资源的位置. 资源位置文件 

经过manifest查找资源的位置 

data

1. server端执行匹配到组件的获取数据的方法(返回promise),primose执行完毕获取到最新的数据储存.将数据经过脚本挂载到window上的属性上.
2. client端经过window属性的获取,生成存储数据. 服务端获取数据和注入数据 
   client端提取数据 

   
   

思考

在是否在项目中使用同构应用的时候,仍是要结合具体的场景.能够有如下的几点考虑:

1. 项目中是否须要进行服务端渲染 => 使用者角度
2. 是否有引入node中间层(api转发)的必要, 其余的替代方案是否可行(nginx) => 总体设计的角度

                                            

                                                  欢迎你们关注公众号,一块儿进步