 《玩转webpack》 第三章 基础篇 Webpack 进阶用法rem 是什什么? W3C 对 rem 的定义: font-size of the root element rem 和 px 的对⽐比: ·rem 是相对单位 ·px 是绝对单位 移动端 CSS px ⾃自动转换成 rem module.exports = { module: { rules: [ { test: /\.less$/, use: [ 'style-loader', 加载图⽚片资源 图⽚片加载成功 ⻚页⾯面可交互 服务端渲染 (SSR) 是什什么? 渲染: HTML + CSS + JS + Data -> 渲染后的 HTML 服务端: 所有模板等资源都存储在服务端 内⽹网机器器拉取数据更更快 ⼀一个 HTML 返回所有数据 浏览器器和服务器器交互流程 ⽤用户层现 客户端渲染 vs 服务端渲染 ����� ����� �� ����(HTML ������������JS��������� 总结:服务端渲染 (SSR) 的核⼼心是减少请求 SSR 的优势 减少⽩白屏时间 对于 SEO 友好 SSR 代码实现思路路 服务端 客户端 ·使⽤用 react-dom/server 的 renderToString ⽅方法将 React 组件渲染成字符串串 ·服务端路路由返回对应的模板 ·打包出针对服务端的组件 webpack ssr 打包存在的问题0 码力 | 69 页 | 4.33 MB | 1 年前3 《玩转webpack》 第三章 基础篇 Webpack 进阶用法rem 是什什么? W3C 对 rem 的定义: font-size of the root element rem 和 px 的对⽐比: ·rem 是相对单位 ·px 是绝对单位 移动端 CSS px ⾃自动转换成 rem module.exports = { module: { rules: [ { test: /\.less$/, use: [ 'style-loader', 加载图⽚片资源 图⽚片加载成功 ⻚页⾯面可交互 服务端渲染 (SSR) 是什什么? 渲染: HTML + CSS + JS + Data -> 渲染后的 HTML 服务端: 所有模板等资源都存储在服务端 内⽹网机器器拉取数据更更快 ⼀一个 HTML 返回所有数据 浏览器器和服务器器交互流程 ⽤用户层现 客户端渲染 vs 服务端渲染 ����� ����� �� ����(HTML ������������JS��������� 总结:服务端渲染 (SSR) 的核⼼心是减少请求 SSR 的优势 减少⽩白屏时间 对于 SEO 友好 SSR 代码实现思路路 服务端 客户端 ·使⽤用 react-dom/server 的 renderToString ⽅方法将 React 组件渲染成字符串串 ·服务端路路由返回对应的模板 ·打包出针对服务端的组件 webpack ssr 打包存在的问题0 码力 | 69 页 | 4.33 MB | 1 年前3
 《玩转webpack》第八章 实战篇: React 全家桶 和 webpack 开发商城项巨进阶⽤用法 03 扫码试看/订阅 《玩转 webpack》视频课程 商城技术栈选型 前端 后端 商城架构设计 平台层 ⾸首⻚页 列列表⻚页 购物⻋车⻚页 商品管理理 订单管理理 ⽤用户端 管理理后台 服务层 基础设施 商品服务 订单服务 购物⻋车服务 搜索服务 ⽀支付服务 评论服务 CI/CD …… 订单⻚页 详情⻚页 登陆/注册 ⽤用户信息管理理 商城界⾯面 UI 设计与模块拆分 actions、reducers、store · rootReducer src/reducers/rootReducer.js 将所有的 reducers 进⾏行行 Combine 数据库实体设计 编写服务端 API · 登陆注册 API · 商品 API ·商品列列表(GET):/goods?page=1&per_page=10 ·商品详情(GET): /goods/:id ·修改商品(PUT): Native 渲染 · 弱⽹网优化 · 使⽤用离线包、PWA 等离线缓存技术 · Webview 优化 · 打开 Webview 的同时并⾏行行的加载⻚页⾯面数据 功能开发要点 · 浏览器器端: · 服务端: · MVC 开发⽅方式,数据库基于 Sequelize · Rest API ⻛风格 ·采⽤用 JWT 进⾏行行鉴权 ·组件化,组件颗粒度尽可能⼩小 ·直接复⽤用 builder-webpack-geektime0 码力 | 25 页 | 5.67 MB | 1 年前3 《玩转webpack》第八章 实战篇: React 全家桶 和 webpack 开发商城项巨进阶⽤用法 03 扫码试看/订阅 《玩转 webpack》视频课程 商城技术栈选型 前端 后端 商城架构设计 平台层 ⾸首⻚页 列列表⻚页 购物⻋车⻚页 商品管理理 订单管理理 ⽤用户端 管理理后台 服务层 基础设施 商品服务 订单服务 购物⻋车服务 搜索服务 ⽀支付服务 评论服务 CI/CD …… 订单⻚页 详情⻚页 登陆/注册 ⽤用户信息管理理 商城界⾯面 UI 设计与模块拆分 actions、reducers、store · rootReducer src/reducers/rootReducer.js 将所有的 reducers 进⾏行行 Combine 数据库实体设计 编写服务端 API · 登陆注册 API · 商品 API ·商品列列表(GET):/goods?page=1&per_page=10 ·商品详情(GET): /goods/:id ·修改商品(PUT): Native 渲染 · 弱⽹网优化 · 使⽤用离线包、PWA 等离线缓存技术 · Webview 优化 · 打开 Webview 的同时并⾏行行的加载⻚页⾯面数据 功能开发要点 · 浏览器器端: · 服务端: · MVC 开发⽅方式,数据库基于 Sequelize · Rest API ⻛风格 ·采⽤用 JWT 进⾏行行鉴权 ·组件化,组件颗粒度尽可能⼩小 ·直接复⽤用 builder-webpack-geektime0 码力 | 25 页 | 5.67 MB | 1 年前3
共 2 条
- 1













