[TopGrd] # _

I code something

Recent Posts

NPM 发布ESM源码

published on
Background & Research 如果你调试的时候需要看所依赖的npm包的源码,一般包的入口main都指向dist里被babel或rollup编译过的es5代码。 { "name": "my-package", "version": "0.1.0", "main": "dist/index.js" } 会指示你的打包工具在require 或 import的时候找到正确的入口文件在哪,但是现在有种更推荐的方式是同时发布编译后的 es5 代码和 es2015+ 源码,让用户选择。 Why? es2015后,如果使用webpack或rollup构建,可以利用ES Module的很多特性, 加快打包速度, 还可以利用 treeshaking 每个npm包自行编译,很多模块重复引入,增加代码体积(runtime可能不同) 转译的结果是固定的,不能根据平台和市场自定义化 如果编译工具产生隐藏的bug代码,发布到npm上,被大量下载,即使用户编译工具修复了bug,也无法影响包中的源码,只能等待维护者修复。 发布多种版本库在业内已成为一种标准 How? publish 将 package.json 的main直接指向es6代码,会产生2个问题。 在基本上用户webpack编译的时候会选择exclude掉 node_modules下的文件, 这样可以极大的提升编译速度。所以默认都是在npm上发布es5规范的代码。 如果是node环境的代码,说不会经过构建工具的,不支持es6的话直接运行不起了 因此 package.json 中的main指向es5版本代码,要解决这个问题,rollup提出了module字段,现在也被webpack等构建工具所支持。当构建工具遇到我们的模块时,优先使用module字段入口。然后使用main入口。 创建 library webpack config exclude替换为inclue { test: /\.(js|jsx)$/, - exclude: /node_modules/, + include: [ + path.resolve('./src'), + path.resolve('./node_modules/carno') + ], use: { loader: 'babel-loader', }, } Research 这里取redux模块进行研究 Read More...

Node 性能优化与问题排查

published on
服务性能指标 吞吐量 是否存在内存泄露 吞吐量 QPS (TPS) 每秒查询率QPS是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准,通常用来表达和衡量当前系统的负载 并发数 系统同时处理的request/事务数 响应时间 一般取平均响应时间 关系 QPS = 并发量 / 平均响应时间 一个系统吞吐量通常由QPS(TPS)、并发数两个因素决定,每套系统这两个值都有一个相对极限值,在应用场景访问压力下,只要某一项达 到系统最高值,系统的吞吐量就上不去了,如果压力继续增大,系统的吞吐量反而会下降,原因是系统超负荷工作,上下文切换、内存等等其它消耗导致系统性能下 降! 如果想要提高系统吞吐量,就需要先进行性能测试,测出系统极限,然后再进行性能调优。 使用 JMeter 进行性能测试 Apache JMeter - Download Apache JMeter 下载jmeter,然后解压到任意目录,执行bin文件夹下的 jmeter.sh在出现的UI界面上进行对你的node 服务进行相应测试,具体如何测试可以Google。可以测出程序的吞吐量。 内存泄露 内存泄漏(Memory Leak)指由于疏忽或错误造成程序未能释放已经不再使用的内存的情况。 如果一个程序存在内存泄露,则随着时间的推移,内存占用越来越来,程序也就会越来越卡,导致系统性能下降,吞吐量下降,因此如果发现你的程序越来越慢,那可能存在内存泄露问题。 性能优化 heapdump或使用 v8-profiler 这两个工具的原理都是一致的:调用v8引擎暴露的接口: v8::Isolate::GetCurrent()->GetHeapProfiler()->TakeHeapSnapshot(title, control) 然后将获取的c++对象数据转换为js对象。 这里推荐使用v8-profiler因为多一个cpu快照功能 node-inspector/v8-profiler 快照 我们为程序添加一个进行快照的路由,在服务一开始运行的时候开始CPU分析并进行第一次堆快照,方便后面对比,服务端接受到这个Get请求时,进行停止分析,并进行堆快照和CPU快照,保存快照文件。 const router = require('koa-router')(); const fs = require('fs'); const profiler = require('v8-profiler'); profiler.startProfiling(); const snapshot1 = profiler. Read More...

Prettier + Eslint => 💖

published on
Prettier 为什么要用 Prettier? 关于代码风格的圣战,从到底要不要分号,缩进用tab还是space,2个还是4个空格,从未停止过。但是作为现代javascript 开发者,who cares ! 我们使用eslint 就可以轻松的控制团队的代码风格,但是 eslint 在某些方面就无法强制了,下面2份代码 if (a < 1) { console.log('haha'); } if (a < 1) { console.log('haha'); } Eslint 都不会报错,还有 trailing commas,Why you should enforce Dangling Commas for Multiline Statements 等等。而prettier + eslint 可以完美的避免这些风格不统一的问题。当你的风格与团队 eslint 配置有不同时,只需要prettier一下,就可以保持一致,不需要在写代码时关心差异,并且 prettier 也是当前最火的一款 format 工具,很多开源项目下面,你会发现都会有一份 .prettierrc By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles. It is generally accepted that having a common style guide is valuable for a project and team. Read More...

Tags

medium (1) node (1) react (2) webpack (2)