frontend

小程序相关

February 26, 2023
frontend

架构 # 渲染层的界面使用 webview 进行渲染；逻辑层采用 JSCore运行JavaScript代码 无论是线程之间的通讯、数据的传递、网络请求都由Native层做转发 框架 # Taro # 为了统一跨平台的开发方式，通过运行时框架、组件、API 去抹平多端差异 跨端 # 原生小程序 #

前端框架

February 26, 2023
frontend

Umi.js # MFSU # Module Federation Speed Up Umi 3.5+ 后支持, Umi4 默认支持，Umi3 在 config.ts 中添加 mfsu:{} 开启 基于 webpack 5 Module Federation 特性的提速方案 启动快、热更快、页面打开也快、 CI & CD 流程也快 Umi4 # 默认快 依赖预打包 双构建引擎 React Router 6 Next.js #

微前端

February 15, 2023
frontend

概念 # 微前端是一个架构理念 适用场景 # 把一个大系统，拆成若干小的子系统，分开去迭代维护 把若干分散的子系统(不同或同一技术栈）合在一起，避免过多的跳转 实现方案 # iframe # 优点：先天隔离，成本最低 缺点：性能低、通信复杂、双滚动条、弹窗问题(无法全局覆盖?) npm 包 # 子应用拆成 npm 包 优点：性能和兼容性上是最优的方案 缺点：版本管理，包更新后，包的使用方是否需要同步更新？ single-spa # 渲染原理：路由监听, 监听 url change 事件 出现最早、最有影响力的微前端框架 qiankun # 阿里出的 在 single-spa 基础上进行了封装，提供了js沙箱、样式隔离、预加载等功能，并且与技术栈无关，可以兼容不同的框架 渲染原理：路由监听, 监听 url change 事件 html 作为资源入口，通过加载远程 html，解析其DOM结构从而获取js、css等静态资源来实现微前端的渲染，这也是qiankun目前采用的渲染方案。 缺点： 接入成本高 主子应用通信： import { initGlobalState, MicroAppStateActions } from 'qiankun'; // 主应用初始化 state const actions: MicroAppStateActions = initGlobalState(state); actions. ...

前端性能优化

February 15, 2023
frontend

性能监测 # 监测方式: devtool performance tab, lighthouse(lab data) 插件 window.performance， 可编程的性能 api 性能指标 # 分类: In the field 用户实际体验到的指标 In the lab 利用工具去跑性能指标数据 常用指标： FP First Paint 首次绘制 FCP First Contentful Paint 首次内容绘制 TTFB Time to First Byte LCP Core Web Vital Largest Contentful Paint 最大内容绘制 用来衡量页面的加载性能，2.5s 以内最佳 FID Core Web Vital ...

组件化

July 17, 2022
frontend

什么是组件 # 任何可被共享的函数，库，ui 等，都可称之为组件 一切皆组件: 中间件，service，controller，module，hook 等都可统称为组件，不仅仅局限于前端 Why # 一致性 避免重复工作，提效 新人友好 中心化 # 中心化的组件仓库，所见即所得，single source of truth 去中心化 # 去中心化开发，可在任意代码仓库里向中心化组件仓库贡献组件 版本控制 # 类似 git Tag # semver 快照 # 能快速针对某个状态的组件进行记录，方便调试 生产者 # 被依赖方，组件的生产者，开发者，维护者 消费者 # 消费并使用组件，依赖方 Bit # component-driven architecture Apps # 可被部署的组件，可作为独立的后端或前端应用，或作为运行时，微服务，微前端，serverless function 等被其他 app 消费 apps 为独立的，包含其所有构建，部署等所需要的信息 Aspect # Service，使用 Aspect environment 用来拓展 bit 功能的组件,也可用来构建用户的可组合应用 ...

Webpack

May 28, 2022
frontend

配置1 # 配置结构 工作过程 # 根据入口文件构建依赖图 处理依赖图里的所有资源 生成 js bundle，清单文件 Loader # 将任意类型文件转译为 JavaScript 代码 常见资源处理 # Typescript babel-loader 加上 @babel/preset-typescript 规则集 缺点： 无类型校验 module.exports = { /* ... */ module: { rules: [ { test: /\.ts$/, use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-typescript'], }, }, ], }, ], }, }; CSS ...