技术文章
怎么调试npm包：https://mp.weixin.qq.com/s/nOFKKCwUDCYW1HAGH25W-Q
https://mp.weixin.qq.com/s/0Av-WqiyB3ApNm2KcVzUIw eslint的原理
https://mp.weixin.qq.com/s/x4LCeDunxuLgFZl0FplJmA 低代码平台设计
https://www.npmjs.com/package/hz-graph-canvas
https://www.npmjs.com/package/hz-tracker
webpack4升级到webpack5，使用文件缓存代替内存缓存，节省内存。文章地址：https://jishuin.proginn.com/p/763bfbd5a2d1
js内存优化：https://mp.weixin.qq.com/s/_wbP0B3EiTjME9Sg3BXqqA
低代码架构设计需要注意的点：https://mp.weixin.qq.com/s/lWCS0s4kPcTgcfU5HCY0RQ
https://mp.weixin.qq.com/s/1HyQLZcnZN6I27p_hbfUPg
组件在线预览工具：Stackblitz，CodeSandbox
https://mp.weixin.qq.com/s/5-tXHt1PnMdkCViqhQVtaA HTML转pdf的方案
https://mp.weixin.qq.com/s/md_Xu0EzvnqoBrlc_QAnig 解决我的档案导出图片的问题
https://mp.weixin.qq.com/s/uWDjCn3TwBqvri16Z-TMew mocha是个非常灵活的测试框架，可扩展性很高，但也与此同时会带来一些学习成本。
像Jest那种包揽一切，断言库，快照测试，数据mock，测试覆盖率报告的生成等等全部打包提供的使用起来是很方便，但问题在于不方便去做一些定制化开发。而mocha搭配他的生态(用chai断言，用sinon来mock数据，istanbul来生成覆盖率报告等)可以很方便的去做一些定制化开发。
https://mp.weixin.qq.com/s/d2RQs1J6jYCDr6u_JsQZpQ
伊斯坦布尔（以下简称 Istanbul）是一个基于 JavaScript 的测试覆盖率统计工具，目前绝大多数测试框架比如 jest mocha 等都是使用 Istanbul 来统计覆盖率的
https://mp.weixin.qq.com/s/g5GcZ10G89Xb9hZ1SibVrA webpack的sourcemap原理
https://mp.weixin.qq.com/s/RvNHtOBPWovZc1jtt2oKeQ 前端导出有样式的excel
js内存检测工具MemLab： https://mp.weixin.qq.com/s/r3yngOfNBNRQSC0KD3yopA
第三方包的修改：https://mp.weixin.qq.com/s/7w-TECwwtVx18cTsbFaA7w
底层画图抽成了npm包，nodejs导出svg变成了前端canvas转成png，调整了前端canvas转成png的清晰度
时序模式优化：
1.所有数据关系坐标计算耗时最少都需要70ms，将moment的diff改为new Date的getTime后，计算耗时减少为47ms左右
2.不在画布范围的不绘制
3.缩放比例小于0.5时，不展示横线和不绘制hover效果
加入了wasm算法包，要在nginx的mime.types文件下加入一个配置 application/wasm wasm;
webpack4升级到webpack5:
npm run start，从50秒提升到了10秒。第二次后。（不删除nodemodules）
npm run build，从55秒提升到了21秒。第二次后。（不删除nodemodules）
webpack5的一些优化：
1.devtools默认打开第三包的sourcemap，可以exclude掉nodemodules，第一次执行npm run start，从108秒提升到了99秒。
2.contextReplacementPlugin排除掉moment语言包的引入
3.单独配置splitchunk，避免lodash重复引入
build速度提升了legacy包：4秒，普通包：11秒，体积从13.11mb减少到了11.95mb。
jpeg:适合色彩丰富的图、Banner图。不适合：图形文字、图标、不支持透明度。
png:适合纯色、透明、图标，支持纯透明和半透明。不适合色彩丰富图片，因为无损储存会导致储存体积大于jpeg
gif:适合动画、可以动的图标。支持纯透明但不支持半透明，不适合色彩丰富的图片。
埋点信息通常也会使用gif发送，因为1x1的gif图发送的网络请求比普通的get请求要小一些。
webp:支持纯透明和半透明，可以保证图片质量和较小的体积，适合Chrome和移动端浏览器。不适合其他浏览器。
svg:矢量格式，大小非常小，但渲染成本过高，适合小且色彩单一的图标。
webpack-in-loader(webpack插件) + vue-i18n
常用命令
npx i18n generate src ： 对src目录下的vue/js/ts/tsx/jsx文件进行中文提取并生成国际化资源文件
npx i18n init ： 初始化翻译配置项（如已有配置项，不要重复执行，不然会覆盖）
npx i18n translate： 开始翻译文件，默认中文翻译成英文（需要配置百度翻译appId和secret）（百度翻译文档：https://fanyi-api.baidu.com/product/113）
首先我们要通过npx i18n generate 这条命令生成 记录了中文的js文件。
再通过npx i18n translate 去将上一步生成的中文js文件翻译生成对应的英文js文件，以及中文映射到英文的map.js文件。
最后当我们启动项目，引入的webpack loader就会去读取上面两步生成的文件，将我们的代码内容转换成为md5 key值作为参数的$t方法调用，再由后续项目选择的语言，进行语言的替换。
react国际化插件较多，写法也比较多，比较大众化的方案i18n-Ally(vscode插件) + react-intl（github地址：https://github.com/formatjs/formatjs）
某些react项目可以考虑阿里开源的一套国际化解决方案 kiwi，它集成国际化框架 kiwi-intl、vscode 插件 kiwi-linter、命令行工具 kiwi-cli 为一体，功能比较完整，基本解决了国际化开发中存在的大多痛点，但它并不适用于 Vue 项目。
大多数 WebAssembly 模块开发者使用 C 和 Rust 编写代码，然后编译成 WebAssembly（wasm文件）
.wasm 文件是 WebAssembly 组件，它可以被 JavaScript 加载。
1.在初始化属性的时候，如果参数没有传递该属性的值，那就不要初始化为null
2.不要使用delete操作，如果要用，可以用undefined的，如果一定要删除，可以用Map对象来删除
