阅读 1023

如何构建一个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) => 整体设计的角度


                                            

                                                  欢迎大家关注公众号,一起进步



关注下面的标签,发现更多相似文章
评论