seo不友好
首屏?xí)r間長(zhǎng)剩愧，用戶體驗(yàn)差
問(wèn)題 數(shù)據(jù)同步 路由跳轉(zhuǎn) SEO信息
如何在開(kāi)發(fā)是方便的進(jìn)行服務(wù)的的測(cè)試
工程架構(gòu)
- webpack配置
- node服務(wù)
- 服務(wù)端渲染的基礎(chǔ)
項(xiàng)目架構(gòu)
- React
- react-router
- mobx配置
- 服務(wù)端的優(yōu)化
業(yè)務(wù)開(kāi)發(fā)
- 頁(yè)面開(kāi)發(fā)
- 登陸優(yōu)化
- 服務(wù)端渲染的優(yōu)化
項(xiàng)目部署
- PM2
- Nginx
- 一鍵部署
學(xué)會(huì)
- 工程架構(gòu)的概念猪叙，為什么做工程架構(gòu)
- 服務(wù)端渲染的難點(diǎn)以及如何解決
- react + react-router -mobx 的項(xiàng)目架構(gòu)模式
WebApp 架構(gòu)簡(jiǎn)介
工程架構(gòu)
- 解放生產(chǎn)力
1、源代碼預(yù)處理
2仁卷、自動(dòng)打包穴翩，自動(dòng)更新頁(yè)面顯示
3、自動(dòng)處理圖片依賴锦积，保證開(kāi)發(fā)和正式環(huán)境的統(tǒng)一 - 圍繞解決方案搭建環(huán)境
1芒帕、不同的前端框架需要不同的運(yùn)行架構(gòu)
2、預(yù)期可能出現(xiàn)的問(wèn)題丰介，并規(guī)避 - 代碼規(guī)范
- 保證項(xiàng)目規(guī)范
- 保證項(xiàng)目質(zhì)量
1背蟆、code lint
2、不同環(huán)境排出差異
3哮幢、git commit預(yù)處理
項(xiàng)目架構(gòu)
- 技術(shù)選型
- 數(shù)據(jù)解決方案
- 整體的代碼風(fēng)格
web開(kāi)發(fā)常用的網(wǎng)絡(luò)優(yōu)化
- 優(yōu)化方法
1带膀、合并資源文件，減少http請(qǐng)求
2橙垢、壓縮資源文件減小請(qǐng)求大小
3、利用緩存機(jī)制，盡可能使用 緩存減少請(qǐng)求 cache-control
利用文件內(nèi)容做一次hash,內(nèi)容改變晶衷，則hash改變沧烈，請(qǐng)求新的資源。
模塊化工具
1喂击、no
2剂癌、seajs
3、requirejs
4翰绊、CommonJS
靜態(tài)文件
使用gulp或grunt等工具手動(dòng)編譯到html, 自由度低佩谷，操作復(fù)雜或者甚至不處理
交給后端办铡，讓后端服務(wù)處理。
單頁(yè)面應(yīng)用
- 特征
1琳要、所有內(nèi)容都在前端生成
2寡具、js承擔(dān)更多的業(yè)務(wù)邏輯，后端只提供API
3稚补、頁(yè)面路由跳轉(zhuǎn)不經(jīng)過(guò)后端
常用類庫(kù)
- react
- vue
- backbone
- ng
模塊化工具
- webpack
- rollup
其他考慮因素
- toB or toC
- 移動(dòng)端 PC端
為什么會(huì)有服務(wù)端渲染
-
單頁(yè)面存在的問(wèn)題
1童叠、seo不友好
2、首次請(qǐng)求等待時(shí)間不好课幕，體驗(yàn)不好
使用react-dom/server提供我們將react組件渲染成html的方法項(xiàng)目開(kāi)發(fā)的配置
常用配置
1厦坛、webpack dev server
2、hot module replacement
3乍惊、
