技术文章

怎么调试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对象来删除