如何构建一个WEB同构应用

栏目: CSS · 发布时间: 4年前

内容简介:WEB同构应用指的是通过代码的编译转换手段(通常借助于babel)来让代码在不同端client(浏览器), server(服务器)运行.同构的web应用主要有以下的优点:在进行代码转换的时候,首先要明白代码转换的目的才能明确对不同文件的转换策略.比如为了实现同构将client端的代码转换成server端可以运行的代码,对不同类型CSS文件的不同处理策略.通常借助于webpack来实现代码的转换功能.webpack会根据入口文件依次的解析引用的各种文件类型,通过配置的webpack loader可以实现对应文

简介

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

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

如何构建一个WEB同构应用

简单的实现思路

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

过程

代码转换

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

javascript

转换的目标是client端的代码(排除node_modules). 将client转换成server端可以运行的代码 如何构建一个WEB同构应用

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的体积,页面加载的资源更少

    如何构建一个WEB同构应用

加快编译速度

可以使用happyPack加快编译速度,happyPack通过多进程的方式来加快代码的打包过程. 使用happyPack的例子: 如何构建一个WEB同构应用

如何构建一个WEB同构应用

资源匹配

静态资源(CSS js)

可以通过webpack-manifest-plugin生成资源的位置信息文件,然后通过该文件查找资源的位置. 资源位置文件 如何构建一个WEB同构应用

通过manifest查找资源的位置  如何构建一个WEB同构应用

data

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

思考

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

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

如何构建一个WEB同构应用

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

网络素养

网络素养

[美]霍华德·莱茵戈德 / 张子凌、老卡 / 译言·东西文库/电子工业出版社 / 2013-8-1 / 49.80元

有人说Google让我们变得更笨,有人说Facebook出卖了我们的隐私,有人说Twitter将我们的注意力碎片化。在你担忧这些社会化媒体让我们变得“浅薄”的时候,有没问过自己,是否真正地掌握了使用社会化媒体的方式? 这本书将介绍五种正在改变我 们这个世界的素养:注意力、 对垃圾信息的识别能力、参与力、协作力和联网智慧。当有足够多的人学会并且能够熟练的使用这些技术,成为真正的数字公民后。健康......一起来看看 《网络素养》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具