使⽤用 px2rem-loader ⻚页⾯面渲染时计算根元素的 font-size 值 ·可以使⽤用⼿手淘的lib-flexible库 ·https://github.com/amfe/lib-flexible 资源内联的意义 代码层⾯面： 请求层⾯面：减少 HTTP ⽹网络请求数 ·⻚页⾯面框架的初始化脚本 ·上报相关打点 · css 内联避免⻚页⾯面闪动 · ⼩小图⽚片或者字体内联 //将所有的style标签合并成一个 } }, "css-loader", "sass-loader" ], }, ] }, }; 多⻚页⾯面应⽤用(MPA)概念 每⼀一次⻚页⾯面跳转的时候，后台服务器器都会给返回⼀一个新的 html ⽂文档， 这种类型的⽹网站也就是多⻚页⽹网站，也叫做多⻚页应⽤用。 多⻚页⾯面打包基本思路路 module.exports = { entry: { index: './src/index /src/index.js', search: './src/search.js ‘ } }; 缺点：每次新增或删除⻚页⾯面需要改 webpack 配置 每个⻚页⾯面对应⼀一个 entry，⼀一个 html-webpack-plugin 多⻚页⾯面打包通⽤用⽅方案 动态获取 entry 和设置 html-webpack-plugin 数量量 利利⽤用 glob.sync module.exports

前端 后端 商城架构设计 平台层 ⾸首⻚页 列列表⻚页 购物⻋车⻚页 商品管理理 订单管理理 ⽤用户端 管理理后台 服务层 基础设施 商品服务 订单服务 购物⻋车服务 搜索服务 ⽀支付服务 评论服务 CI/CD …… 订单⻚页 详情⻚页 登陆/注册 ⽤用户信息管理理 商城界⾯面 UI 设计与模块拆分 主⻚页 类⽬目⻚页 详情⻚页 登陆/注册 前台模块拆分 后台模块拆分 React 1:8001/api/v1/order/new 谈谈 Web 商城的性能优化策略略 · 渲染优化 ·个⼈人中⼼心⻚页预渲染 · ⾸首⻚页、列列表⻚页、详情⻚页采⽤用 SSR 或者 Native 渲染 · 弱⽹网优化 · 使⽤用离线包、PWA 等离线缓存技术 · Webview 优化 · 打开 Webview 的同时并⾏行行的加载⻚页⾯面数据 功能开发要点 · 浏览器器端： · 服务端： · MVC

export = json Vite 打包流程 – 静态资源打包策略 获取 Script 内容 如果有 style 就发送请求获取 style 的部分 发送请求获取 template 的部分 进⾏渲染 Vite 打包流程 – vue 脚本打包策略 判断是否是 .css 文件的请求 判断是否为 JS 中 import 的 CSS 进行 Sass/Less 的编译处理 基于 CSS 的源码包装成