Posts
All the articles I've posted.
monorepo 的发展
Published: at 16:00monorepo 即一个 repo，多个 package。 + lerna + npm v7 + yarn + pnpm + react + vue + babel + eslint 当 node
dev 与 devDep 的区别
Published: at 16:00当 require('package-hello') 时，假设 package-hello 是一个 npm 库，我们是如何找到该 package 的？ 1. 寻找当前目录的 node_modules/package-hello 目录 1. 如果未找到，寻找上一级的 ../node_modules/package-hello 目录，以此递归
生产环境中使用 npm ci 代替 npm i
Published: at 16:00乍一眼看 npm ci ，CI，恩，看这名字就很适合放在持续集成中。事实也是如此，它更快，更严格，也更适合于放在 CI 中，至于为什么这么说，将会在以下分别做介绍。 npm ci 基于一个独立的库 $1 安装依赖，而它拥有和 npm install 兼容的 API。当它安装依赖时，默认是缓存优先的，它会充分利用缓存，从而加速装包。 直接从
如何对 npm 包进行升级
Published: at 16:00npm 的版本号为 semver 规范，由 [major, minor, patch] 三部分组成，其中 + major: 当你发了一个含有 Breaking Change 的 API + minor: 当你新增了一个向后兼容的功能时 + patch: 当你修复了一个向后兼容的 Bug 时 假设 react 当前版本号为 17.0.1 ，
如何对 npm package 进行发包
Published: at 16:00在发布公共 package 之前，需要在 $1进行注册一个账号。 随后，在本地(需要发包的地方)执行命令 npm login ，进行交互式操作并且登录。 发布一个 npm 包之前，填写 package.json 中以下三项最重要的字段。假设此时包的名称为 @shanyue/just-demo 之后执行 npm publish 发包即可。
name、version 与 semver 字段
Published: at 16:00name 与 version 字段几乎是 main 指 npm package 的入口文件，当我们对某个 package 进行导入时，实际上导入的是 main 字段所指向的文件。 main 是 CommonJS 时代的产物，也是最古老且最常用的入口文件。 随着 ESM 且打包工具的发展，许多 package 会打包 N 份模块化格式进行分
如何临时修复 node_modules 某个库的紧急问题？
Published: at 16:00假设 lodash 有一个 Bug，影响线上开发，应该怎么办？ 答: 三步走。 1. 在 Github 提交 Pull Request，修复 Bug，等待合并 1. 合并 PR 后，等待新版本发包 1. 升级项目中的 lodash 依赖 很合理很规范的一个流程，但是它一个最大的问题就是，太慢了，三步走完黄花菜都凉了。 此时可直接上手修改
软链接和硬链接
Published: at 16:00假设我们有一个文件，称为 hello 通过 ln -s 创建一个软链接，通过 ln 可以创建一个硬链接。 他们的区别有以下几点: 1. 软链接可理解为指向源文件的指针，它是单独的一个文件，仅仅只有几个字节，它拥有独立的 inode 1. 硬链接与源文件同时指向一个物理地址，它与源文件共享存储数据，它俩拥有相同的 inode 它解决了 np
前端工程化实践
Published: at 16:001. $1 1. $1 1. $1 1. $1 1. $1 1. $1 1. $1 1. $1 1. $1 以下 TODO 1. [如何部署 SSR 应用]() 1. [图片处理与工程化]() 1. $1 1. [CDN 下 index.html 应如何安放]() 1. $1 1. [使用 CICD 构造你的前端质量保障体系]() 1.
Redux TechStack
Published: at 16:00+ combineReduers + bindActionCreator + connect + Provider + mapStateToProps + mapDispatchToProps + redux + react-redux + redux-thunk + redux-saga + redux-actions + resele
style
Published: at 16:00在打包器，比如 webpack 中，需要借用 loader 将非 JS 资源转化成可识别为 Javascript 的 module。 在 webpack 中，处理 css 稍微比较费劲，需要借用两个 loader 来做成这件事情: 1. $1: 处理 CSS 中的 url 与 @import ，并将其作为模块引入 1. $1: 将样式注入
Tree Shaking
Published: at 16:00class 是否可以 Tree Shaking + CONCATENATED MODULE Tree Shaking 指基于 ES Module 进行静态分析，通过 AST 将用不到的函数进行移除，从而减小打包体积。 有例为证: > 以下示例可在 $1 中进行在线演示 最终打包过程中， sub 没有被引用到，将不会对它进行打包。以下为打包
如何提升 webpack 的构建速度
Published: at 16:00使用 $1 可评估每个 loader/plugin 的执行耗时。 webpack5 内置了关于缓存的插件，可通过以下配置开启。它将 Module 、 Chunk 、 ModuleChunk 等信息序列化到磁盘中，二次构建避免重复编译计算，编译速度得到很大提升。 如对一个 JS 文件配置了 eslint 、 typescript 、 bab
Code Spliting
Published: at 16:00Code Spliting 往往归为两个方面: 1. 通过 splitChunksPlugin 提取公共子模块，把第三方模块打包为 vendor.js 。一般被称作 Bundle Spliting 。 1. 通过 import() 动态加载模块，进行按需加载。一般被称作 Code Spliting 。 Code Spliting 可显著提
利用 hash/query 键值对优化网络性能 (APQ)
Published: at 16:00在 apollo-server 中，这种技术叫 APQ(Automatic persisted queries) 。
client-cache
Published: at 16:00+ network-only + store-and-network + store-or-network + store-only + 仅网络 + 网络优先 + 缓存优先 + 仅缓存
源码分析
Published: at 16:001. 验证 Schema 的有效性 1. 解析 Source(Operation) 1. 执行 + validateSchema + validateRootTypes + validateDirectives + validateTypes + parseSource + Source + Document + execute + ro
使用 GraphQL 构建 web 应用
Published: at 16:00+ $1 + $1 + $1 + $1 + [状态码]() + [N+1 Query 问题与 Dataloader]() - 待续 + [按需查询数据库字段]() - 待续 + [用户认证与 JWT]() - 待续 + [实现一个简单的 CRUD]() - 待续 + [graphql、cacheControl 与缓存]() - 待续 +
resolve function
Published: at 16:00再回到刚开始的 hello, world 的示例，用 graphql 表示如下 对以上章节的内容再梳理一遍： 1. 可以对 hello 进行查询，因为该字段在 Query 下 1. HELLO 查询所得到的 data.hello 是一个字符串 恩？我们好像把最重要的内容给漏了， hello 中的内容到底是什么？！而 resolve 函数就
异常监控
Published: at 16:00在一个后端服务设计中，异常捕获是必不可少需要考虑的因素 **而当异常发生时，能够第一时间捕捉到并且能够获得足够的信息定位到问题至关重要** 刚开始，先抛出两个问题 1. 在生产环境中后端连接的数据库挂了，是否能够第一时间收到通知并定位到问题，而非期待用户反馈 1. 在生产环境中有一条 API 出了问题，能否衡量该错误的紧急重要程度，并根据