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

这是我参与「第五届青训营 」笔记创作活动的第14天。活动详情：# 伴学笔记创作活动来袭 ｜ 第五届字节跳动青训营

Node.js 与前端开发实战

• 安装Nodejs（nvm多版本管理）
• 编写HttpSever+Client,收发GET，POST请求
• 编写静态文件服务器
• 编写React SSR服务
• 使用inspector进行调试，诊断
• 部署简介

1. 编写 Http Sever——Http Client

const http=require('http');

const body=JSON.stringify({
    msg:'Hello from my own client',
})

//发送一个client
const req=http.request('http://127.0.0.1:3000',{
    method:'POST',
    headers:{/
        'Content-Type':'application/json',
    },
},(res)=>{
    const bufs=[];
    res.on('data',(buf)=>{
        bufs.push(buf);
    });
    res.on('end',()=>{
        const buf=Buffer.concat(bufs);
        const json=JSON.parse(buf);

        console.log('json.msg is:',json.msg);
    })
});

req.end(body)

使用大量回调函数，不利于后期管理与维护

2. 编写 Http Sever——Promisify

使用Promise+async await重写该示例：将callback转换为promise

3. 编写 Http Sever——静态文件

Stream风格的api：尽可能少的占用内存空间

4. 编写 Http Sever——React SSR（server side rendering）

• 避免重复编写代码
• 相比SPA（single page application）首屏渲染更快，SEO友好

难点：

• 需要处理打包代码
• 需要思考前端代码在服务端运行时的逻辑
• 移除对服务端无意义的副作用或重置环境

5. 编写 Http Sever——Debug

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

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

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

6. 编写 Http Sever——部署

需要解决的问题：

• 守护进程：当进程退出时重新拉起
• 多进程：clusrer便捷的利用多进程
• 记录进程状态，用于诊断

使用Webpack Tree-Shaking

树摇，用于删除Dead Code

• 代码没有被用到，不可到达
• 代码的执行结果不会被使用
• 代码只读不写
• ···

开启tree-shaking主要依赖于两个属性

`modle`:`production`
`optimization:{
    usedExports`:`true`,
    }

其他工具：

• 缓存
• Sourcemap 将压缩产物映射回初始状态
• 性能监控
• 日志
• 代码压缩
• 分包
• ···

Feature Policy：限制一个页面（源）下可以使用哪些功能。