发表更新4 分钟读完 (大约546个字)

vite揭秘

vite的底层原理是什么？

vite核心原理就是利用了现在浏览器原生支持ES6的import，碰见一个import就发送一个http请求去加载文件，vite启动一个koa服务器拦截这些请求，在后端经过相应处理后再将文件ESM格式返回浏览器，整个过程没有对文件打包编译，实现了按需加载以及更快的运行速度。

  1. 基于浏览器ESM的支持，实现真正的按需加载

  2. 高效的热更新：基于ESM实现，利用HTTP头来加速整个页面的重新加载，同时利用浏览器缓存策略提升速度

  3. 快速的冷启动：采用No Bundle和esbuild预构建，速度远快webpack

为什么需要esbuild预构建？

  1. 支持commonJS依赖，因为vite是基于浏览器原生支持的ESM的实现的，这就要求代码模块必须是ESM模块，所以需要将commonJS文件提前处理转化为ESM模块并缓存如node_modules/.vite

  2. 减少模块和请求数量，比如将lodash-es这种包含很多个子模块的工具库合并为单个模块，提高页面加载性能

为什么使用esbuild？

  1. 大多数打包工具都是基于js实现的，但是js是解释型语言，边运行边解释，而esbuild选择的是go语言编写，可直接编译为原生代码，编译时直接将语言转换为机器语言，在启动的时候直接执行，在CPU密集场景下，go更具性能优势

  2. js是单线程语言，也可以使用webworker进行多线程操作，但是go天生的多线程优势对构建流程进行了优化，可以更充分利用cpu资源

特点

  1. 基于浏览器es module import实现编译服务

  2. 基于esbuild做依赖预构建

  3. 基于hash query做强缓存和缓存更新

  4. 兼容rollup的vite插件可以在开发服务和rollup中同时跑

发表更新6 分钟读完 (大约871个字)

前端工程化

一、打包资源处理

AST及其应用

源代码经过词法分析转化为Token流，维护一个Token的数组，可以利用Token流做一些代码检查、语法高亮、模版语法相关的操作，然后经过语法分析转化为有结构化ATS抽象语法树，方便操作。

参考一个最简编译器的实现

阅读更多
发表更新12 分钟读完 (大约1835个字)

杂记

前端事件循环机制是前端开发中一个重要的概念，也是面试中经常会涉及的话题。以下是一些与前端事件循环机制相关的常见面试题

阅读更多
发表更新31 分钟读完 (大约4651个字)

人月神话书摘

什么叫“人月神话”？

人是程序员，月是时间，，如果1人干10个月如果等同10人干1个月，那就成神话。

阅读更多
发表更新4 分钟读完 (大约667个字)

如何管理前端团队

个人角度

开发人员：业务需求 -> 自己动手 -> 解决问题

管理者：业务需求 -> 分析需求、分解需求 -> 分配任务 -> 跟踪进度 -> 解决问题

如何胜任技术管理者需要提高自己各个方面的能力，主要有以下方面：

  1. 技术能力：这是技术管理者的立身之本，肯定需要不断学习、不断精进，如果技不如人肯定无法服众。

  2. 业务能力：需要对业务有正确的理解，能理解业务的本质需求，才能让技术实现业务价值。

  3. 规划能力： 技术管理者需要明确团队目标、并以结果为导向，做出合理的规划：

  4. 1 技术体系规划：项目技术选型（可控性、稳定性、适用性、易用性）、技术文档沉淀等

  5. 2 任务规划：根据任务难易程度分配不同开发人员、任务时间安排等

  6. 3 人员安排规划：根据组员的实际情况和特点，安排合适的事情给合适的人，使团队利益最大化

  7. 沟通协作能力：技术管理者不仅在项目团队内，可能需要跨组或者跨部门进行沟通协作，需要向上级转达战略、任务，和团队内成员沟通清楚需要做什么，为什么这么做

  8. 判断能力： 需要全局把控项目，有底气在项目中对事项进行判断和决策：

  9. 1 风险判断：业务实现方向有没有问题、任务排期超时等

  10. 2 决策判断：某个时间段，应该做哪些内容，哪些做不了

  11. 3 诗句判断：针对业务评审的具体实现成本、实现方向等

  12. 领导力：技术管理者需要有责任，有担当，团队有问题必然反映到团队负责人身上有问题

  13. 架构能力：治理好系统复杂度才是最务实的

作为前端负责人在前端基础设施做了那些事情？

开发阶段：技术选型、项目创建、脚手架、公共UI组件库、utils工具库等方面的工作

部署阶段：如何部署项目、自动化CICD

质量保证：统一代码开发规范、git提交规范、代码审查code review等

前端优化：加载速度、渲染性能、用户体验等方面

发表更新1 分钟读完 (大约138个字)

nginx指南

负载均衡4种策略

  • 轮询：默认方式
  • weight：在轮询基础上增加权重，也就是轮询到的几率不同
  • ip_hash：按照ip的hash分配，保证每个访客的请求固定访问一个服务器，解决session问题
  • fair：按照相应时间来分配，需要安装nginx-upstream-fair插件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 默认轮询
upstream nest-server {
  server 192.xxx.x.x:3001;
  server 192.xxx.x.x:3002;
}

// weight
upstream nest-server {
  server 192.xxx.x.x:3001;
  server 192.xxx.x.x:3002 weight=2;
}

// ip_hash
upstream nest-server {
  ip_hash;
  server 192.xxx.x.x:3001;
  server 192.xxx.x.x:3002;
}
实现一个多人协作在线文档有哪些技术难点？
如何优化网站以符合谷歌的Core Web Vitals标准
发表更新1 分钟读完 (大约133个字)

代码的艺术

一流代码的特性

  • 正确和性能

    • 鲁棒性
    • 高效

  • 可读性和可维护

    • 简洁
    • 简短
    • 可测试

  • 共享和重用

    • 共享
    • 可移植

  • 运维和运营

    • 可监控/可观测
    • 可运维
    • 可扩展

好的代码从哪里来？

编码前：需求分析，系统设计
编码中：编写代码，单元测试
编码后：集成测试、上线、持续运营/迭代改进

一个好的系统/产品是以上过程持续迭代的结果

最新文章

×