Node.js与前端开发实战 | 青训营笔记

39 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天

一、Node.js的应用场景

图片.png 1.前端工程化

Bundle:webpack, vite, esbuild, parcel
Uglify:uglifyjs
Transpile:bablejs, typescript
其他语言加入竞争:esbuild(go), parcel(rust), prisma
现状:难以替代

2.Web服务端应用

学习曲线平缓,开发效率较高
运行效率接近常见的编译语言
社区生态丰富及工具链成熟(npm, V8 inspector)
与前端结合的场景会有优势(SSR)
现状:竞争激烈,Node.js有自己独特的优势

3.Electron跨端桌面应用

商业应用:vscode, slack, discord, zoom
大型公司内的效率工具
现状:大部分场景在选型时,都值得考虑

4.Node.js在字节

BFF应用、SSR应用,举例:Modern.js
服务端应用,例如:头条搜索,西瓜视频,懂车帝
Electron应用:飞连,飞书
每年新增1000+ Node.js应用

二、Node.js运行时结构

图片.png

结构:

  • V8:JavaScript Runtime,诊断调试工具(inspector)
  • libuv:eventloop(事件循环), syscall (系统调用)
  • 举例:用node-fetch发起请求时…

图片.png

三、编写 Http Server

安装Node.js

Mac,Linux推荐使用nvm。多版本管理。
Windows推荐 nvm4w 或是官方安装包。
安装慢,安装失败的情况,设置安装源
NVM_NODEJS_ORG_MRROR=https://npmmirror.com/mirrors/node nvm install 16

Http Server

图片.png

静态文件

图片.png

React SSR

图片.png

Debug

V8 Inspector:开箱即用、特性丰富强大、与前端开发一致、跨平台

node --inspect
open http://localhost:9229/json

场景:

查看console.log内容
breakpoint
高CPU、死循环:cpuprofile
高内存占用:heapsnapshot
性能分析

部署

部署要解决的问题:

守护进程:当进程退出时,重新拉起
多进程:cluster便捷地利用多进程
记录进程状态,用于诊断

容器环境:

通常有健康检查的手段,只需考虑多核 cpu 利用率即可

四、延伸话题

  • Node.js贡献代码
  • 编译Node.js
  • 诊断/追踪
  • WASM,NAPI

图片.png 图片.png

图片.png