seo不友好
首屏时间长，用户体验差
问题 数据同步 路由跳转 SEO信息
如何在开发是方便的进行服务的的测试
工程架构
- webpack配置
- node服务
- 服务端渲染的基础
项目架构
- React
- react-router
- mobx配置
- 服务端的优化
业务开发
- 页面开发
- 登陆优化
- 服务端渲染的优化
项目部署
- PM2
- Nginx
- 一键部署
学会
- 工程架构的概念，为什么做工程架构
- 服务端渲染的难点以及如何解决
- react + react-router -mobx 的项目架构模式
WebApp 架构简介
工程架构
- 解放生产力
1、源代码预处理
2、自动打包，自动更新页面显示
3、自动处理图片依赖，保证开发和正式环境的统一 - 围绕解决方案搭建环境
1、不同的前端框架需要不同的运行架构
2、预期可能出现的问题，并规避 - 代码规范
- 保证项目规范
- 保证项目质量
1、code lint
2、不同环境排出差异
3、git commit预处理
项目架构
- 技术选型
- 数据解决方案
- 整体的代码风格
web开发常用的网络优化
- 优化方法
1、合并资源文件，减少http请求
2、压缩资源文件减小请求大小
3、利用缓存机制，尽可能使用 缓存减少请求 cache-control
利用文件内容做一次hash,内容改变，则hash改变，请求新的资源。
模块化工具
1、no
2、seajs
3、requirejs
4、CommonJS
静态文件
使用gulp或grunt等工具手动编译到html, 自由度低，操作复杂或者甚至不处理
交给后端，让后端服务处理。
单页面应用
- 特征
1、所有内容都在前端生成
2、js承担更多的业务逻辑，后端只提供API
3、页面路由跳转不经过后端
常用类库
- react
- vue
- backbone
- ng
模块化工具
- webpack
- rollup
其他考虑因素
- toB or toC
- 移动端 PC端
为什么会有服务端渲染
-
单页面存在的问题
1、seo不友好
2、首次请求等待时间不好，体验不好
使用react-dom/server提供我们将react组件渲染成html的方法项目开发的配置
常用配置
1、webpack dev server
2、hot module replacement
3、
