react + webpack 课程笔记

[amenzai]

react-webpack

不使用服务端渲染存在的问题：

• 不利于SEO
• 页面加载时间较长

如何使用服务端渲染？ 在客户端使用 react-dom 的 render 方法渲染组件，而在服务端， react-dom/sever 提供我们将 react 组件渲染成 html 的方法

前端技术选型

• 单页应用
  • 所有内容都在前端生成
  • JS 承担更多的业务逻辑，后端只提供 API
  • 页面路由跳转不需要经过后端
  • 类库：backbone.js vue react，不在搞 DOM
  • 架构工具：npm bower jspm
  • 模块化：webapck rollup browserify
• 多页应用
  • 内容都由服务端用模板生成
  • 每次页面跳转都要经过服务端
  • JS 更多的是做做动画
  • 常用类库：jQuery、YUI
  • 无特定前端工具，跟后端配合
  • 出现了 grunt gulp
  • 模块化工具：无 -> sea.js -> require.js

考虑因素：

• 浏览器兼容性
• toB 还是 toC
• 移动端还是 PC 端

webapp 架构

• 工程架构
  • 解放生产力
  • 源码编译
  • 自动打包，自动更新页面
  • 自动处理图片依赖，保证开发，正式环境统一
  • 围绕解决方案搭建环境：例如：jsx || vue || typescript
  • 保证项目质量：规范-eslint（格式方面）
  • 重点：定制
• 项目架构
  • 技术选型
  • 数据解决方案：例如-redux
  • 整体代码风格：例如-哪些数据存入 redux，哪些数据存入组件 and 命名、注释等

web 开发常用网络优化

• 合并资源文件，减少 HTTP 请求（浏览器并发数限制）
• 压缩资源文件
• 利用缓存机制

.......

[amenzai]

nginx 配置单页应用，使用路由的 history 模式：

location / {
   try_files $uri /index.html;
}