前端工程化实践
前端工程化实践
参考:《前端技术架构与工程》作者: 周俊鹏
前端工程化是前端开发的一种思维方式,是针对前端开发过程中遇到的一些列问题的解决方案。前端工程化围绕编码、方法、工具三个要素展开。从前端应用的技术架构本身出发,关注点聚焦于模块解耦、数据管理架构模式、性能以及前后端分离,目标是实现架构的高可用性、可扩展性、可伸缩性,同时提高独立开发和跨团队协作开发的效率;从架构之外的角度出发,关注点聚焦于前端应用的开发、架构、测试、部署以及持续化工程体系,目标是建立规范、有序、高效的迭代流程,降低产品迭代所消耗的人力和沟通成本。
开发阶段
统一技术栈减少团队成员学习成本以及协作成本
自建 Mock 平台让加快前端开发效率
具体实践
通过 Git 进行代码版本管理, 便于 Code Review 和 Version Revert
通过 husky, @commitlint/cli, @commitlint/config-conventional 规范 Git commit
通过 ESLint 检查代码错误,使用 Prettier 格式化代码
通过 Code Review 责任连带机制严 ...
以用户为中心的性能指标
我们都听说过性能如何重要如何重要,但当我们讨论性能——可能就是让网站“快”,那么具体是什么意思呢? 事实上,性能是一个相对的概念:
一个网站可能对某一个用户来说很快(在一个功能强大并且网络优质的设备上的时候),但是对另一个用户来说就很慢(在一个网速很慢的低端设备上的时候)。
两个网站同时加载完成可能总耗时相同,但是有一个可能会加载地更快(如果这个网站渐进式加载而不是等到最后才展示页面)
一个网站可能看起来加载的很快,但是对用户交互却响应的很慢(甚至不响应)
所以当谈到性能,精确化和可以使用量化的客观标准计算是非常重要的。这些标准我们称之为指标。
但是仅仅因为指标是基于客观标准并且可以被量化,那也并不意味着这些计算是有用的。
指标定义传统上,web 性能是通过加载事件来计算的。但是,即使加载事件是一个页面生命周期中定义的一个精准的时刻,这个时刻也并不与用户关心的任何东西相对应。
比如,一个服务器可能发送了一个最小化的页面立刻就加载了,但是推迟拉取内容和展示内容,直到数秒后负载事件发起。虽然这个页面可能加载的很快,但是这个很快并不对应一个用户感觉这个页面很快。
过去数年里,Chrome ...
ChromeV8是如何工作的
Chrome V8 是如何工作的我们知道,V8 是 Google 开源的 JavaScript 引擎,被广泛应用于各种 JavaScript 执行环境,比如 Chrome 浏览器、NodeJS、Electron 以及 Deno。但是,很多前端开发人员对 V8 的理解还停留在表面,只是单纯地使用 JavaScript 和调用 Web API, 并不了解 V8 这个黑盒内部是如何工作的。我们只有搞清楚这个问题,才能写出性能更好,更优雅的 JavaScript 代码。
同时,了解 JavaScript 的执行原理,也能够让你更轻松的理解 Babel 的词法分析和语法分析原理、ESLint 的原发检查机制、React 和 Vue 等前端框架的底层实现,以后你在面对其他新的技术和新框架,也能够以不变应万变。
所以,我们先从宏观上学习 V8 架构的演进历史,了解 V8 是如何演进成如此成熟的架构,然后在此基础上深入学习 V8 执行 JavaScript 过程中的词法分析、语法分析、解释器、优化编译器的工作机制及原理,让我们知其然并知其所以然。
V8 架构演进
2008 年,V8 发布了第一个版本 ...
No title
React16.8.0React
hooks
useReducer 懒初始化
React DOM
使用 Object.is 比较 useState 和 useReducer 的值
React.lazy() 支持异步
Effect 的清楚函数要么返回 undefined 要么返回 function, 否则是不允许的
React Test
支持 hooks
新增 ReactTestRenderer.act() 和 ReactTestUtils.act() 用于批量操作以贴近实际场景
ESLint
支持 hooks
React17.0.0React
新增 react/jsx-runtime 和 react/jsx-dev-runtime 处理 JSX 转换
context 可以设置 displayName 以便调试
停止使用 fb.me 进行重定向(@cylim refactor fb.me url to reactjs.org/link)
React DOM
dom 绑定到 root 上而不是 document 上
在运行下一个 effect 会把之前的所有 ...
No title
你必须要知道的30个 Linux 命令
pwd
列出当前所在目录
12$ pwd/mnt/c/Users/Matthew/Desktop
cd
文件夹切换
12root@matthew:/mnt/c/Users/Matthew$ cd Downloads/root@matthew:/mnt/c/Users/Matthew/Downloads$
快捷方式:
123cd .. # 返回上一层cd # 直接到home目录cd - # 退回到上一次目录
ls
列出当前文件夹内容
12root@matthew:/mnt/c/Users/Matthew/Videos$ lsCaptures desktop.ini
快捷方式
123ls -R # 列出当前文件夹以及当前文件夹子文件夹内容ls -a # 列出隐藏文件ls -al # 列出当前文件夹内容以及详情,包括文件权限,大小,拥有者等等
cat
通过标准输出查看文件内容
12root@matthew:/mnt/c/Users/Matthew/Desktop/test$ cat 1.txt123 ...
你必须要知道的30个 Linux 命令
你必须要知道的 30 个 Linux 命令
pwd
列出当前所在目录
12$ pwd/mnt/c/Users/Matthew/Desktop
cd
文件夹切换
12root@matthew:/mnt/c/Users/Matthew$ cd Downloads/root@matthew:/mnt/c/Users/Matthew/Downloads$
快捷方式:
123cd .. # 返回上一层cd # 直接到home目录cd - # 退回到上一次目录
ls
列出当前文件夹内容
12root@matthew:/mnt/c/Users/Matthew/Videos$ lsCaptures desktop.ini
快捷方式
123ls -R # 列出当前文件夹以及当前文件夹子文件夹内容ls -a # 列出隐藏文件ls -al # 列出当前文件夹内容以及详情,包括文件权限,大小,拥有者等等
cat
通过标准输出查看文件内容
12root@matthew:/mnt/c/Users/Matthew/Desktop/test$ cat 1.tx ...
Electron Forge 入门
Electron Forge 入门
Electron Forge 是一个集创建,发布和安装现代 Electron 应用于一身的完备工具链。
基本使用首先初始化一个项目
1234# with yarnyarn create electron-app my-app# with npmnpx create-electron-app my-app
现在你的 my-app文件夹下面就有了一个超级小的 Electron 应用模板。进入 my-app文件夹,启动项目,你就可以开始开发了。
123456# with yarncd my-appyarn start# with npmcd my-appnpm start
构建发行版现在你可以把你的应用和全世界分享。当你运行make 脚本时, Electron Forge会生成对应平台的发行版。了解你可以构建的发行版类型,请参考Makers 文档。
1234# with yarnyarn make# with npmnpm run make
高阶使用有了一个入门级的应用,你就可以构建发行版了。了解更多高阶功能,可以参考:
Publishers
D ...
React 中的高阶组件及其应用场景
React 中的高阶组件及其应用场景什么是高阶组件如果一个函数 接受一个或多个组件作为参数并且返回一个组件 就可称之为 高阶组件 下面就是一个简单的高阶组件:
1const HigherOrderComponent = (WrappedComponent) => <WrappedComponent />;
React 中的高阶组件React 中的高阶组件主要有两种形式:属性代理 和 反向继承
属性代理(Props Proxy)最简单的属性代理实现:
12345678910111213// 无状态function HigherOrderComponent(WrappedComponent) { return (props) => <WrappedComponent {...props} />;}// 有状态function HigherOrderComponent(WrappedComponent) { return class extends React.Component { ...
Webpack5新特性
Webpack5 新特性整体方向
尝试使用持久性缓存来提高构建性能
尝试使用更好的算法和默认值来改进长期缓存
尝试使用更好的 Tree Shaking 和代码生成来改善包大小
尝试改善与网络平台的兼容性
尝试在不引入任何破坏性变化的情况下,改善 v4 的内部结构
尝试引入一些突破性变化为未来做准备
不再为 Node.js 模块自动引用 Polyfills
webpack4浏览器下node:crypto可用,是因为webpack4使用了官方polyfill: crypto-browserify,但是打包下来bundle.js文件2.2MB(未压缩),不包含node:crypto打包下来bundle.js也就1020KiB
webpack5浏览器下node:crypto不可用
建议
尽量使用前端兼容模块,比如使用crypto-js代替crypto
手动添加 polyfill,参考上图提示
在 package.json 中添加 browser 字段,使package 与前端兼容
源码
长期缓存
确定的 Chunk、模块 ID 和导出名称 新增长期缓存算法,生产环境默认启用chun ...
前端性能优化----网络篇
前端性能优化—-网络篇基础知识DNSDNS 过程:浏览器(cache) ==> 操作系统(hosts) ==> ISP
三次握手SYN: 同步信号, ACK: 知道, FIN: 说完了
Round1: A发送SYN(x)给B
Round2: B发送ACK(x+1)和SYN(Y)给A
Round3: A发送ACK(y+1)给B
第三次握手的必要性:前两次结束说明A能发,B能收,B能发,需要最后A发送ACK(y+1)这样B才能知道A能收
三次握手成功之后就可以发送HTTP内容了
四次挥手也可能B先发FIN(x)给A
Round1: A发送FIN(x)给B
Round2: B发送ACK(x+1)给A
这两次挥手结束B就知道了A说完了
Round3之前B还有可能会继续说话,因为B知道A说完了,但是B可能还没有说完
Round3: B发送FIN(y)给A
Round4: A发送ACK(y+1)给B
Round4之后A也知道B说完了
为什么四次挥手中间两次不能合并? 因为Round2和Round3之间B还可能有话要说
HTTP 请求和响应可以使用WireShark抓包查看请求
浏览器基 ...