- 博客(235)
- 收藏
- 关注
RSS订阅原创 新版cnpmcore部署私有npm源全教程
新版cnpmcore出世已久，但部署却十分麻烦，如果是小范围场景使用，建议直接使用 verdaccio，本文从0到1的介绍了如何部署cnpmcore，并细致描述了各个细节，但cnpmcore没有文档，阅读源码是家常便饭。
2024-01-11 21:15:13
2077
原创 Node.js使用jemalloc内存分配器显著减少内存使用
在服务端领域「不会选择默认的 malloc」是一个常识。ptmalloc的分配效率较低，对于长时间、多核 / 多线程运行的程序，特别适合使用jemalloc分配器，使用jemalloc分配内存可以更好的处理内存碎片问题，jemalloc并不总是最优的，但十分适合服务端 Node.js 程序使用。对于 长时间、多进程 的 Node.js 服务端程序，我们可以切换至jemalloc内存分配器提高内存回收效率。
2024-01-01 10:37:26
2013
原创 前端Rust二进制/wasm全平台构建流程简述
现代前端 Rust 构建基本分三大类，即 构建.wasm、构建.node二进制 、构建 swc 插件。对于单独开发某一类的流程，在上述参考文章中已有介绍，但对于一次开发后全平台构建发布，上述文章并未涉猎，基于此，本文将快速介绍一个最简的全平台构建（包括二进制.node与.wasm） 前端 Rust 包的开发流程是怎样的。
2023-11-10 20:07:46
7838
2
原创 前端Rust开发WebAssembly与Swc插件快速入门
现代前端对速度的追求已经进入二进制工具时代，Rust 开发成为每个人的必修课。一般我们将常见的前端 Rust 开发分为以下几类，难度由上至下递增：开发 wasm。开发 swc 插件。开发代码处理工具。我们将默认读者具备最简单的 Rust 知识，进行快速入门介绍。本文对 Rust 浅尝辄止，如希望更有所作为，你可以通过不断精进 Rust ，组织出更优雅的代码结构，实现更高的执行效率。
2023-06-04 07:07:26
6763
7
原创 Webpack迁移Rspack速攻实战教程（前瞻版）
rspack 即将开源，但社区中不乏有已经落地的 case 。基于此，本文将介绍如何迁移一个近似于 CRA 的项目到 rspack。在阅读本文前，我们认为读者已经熟练掌握了 webpack 配置，本文将略过所有前置知识。注：由于 rspack 处于0.0.x版本，可能会发生较大变化，故本文可能存在过时的部分，请仔细甄别。本文介绍了webpack迁移至rspack的基本流程和相关探索，至此，已经完成了 CRA 所有基本能力的平替，代码详见。
2023-03-09 01:48:32
7597
2
原创 pnpm v8版本升级变化关注点（前瞻速攻版）
pnpm版本已经发布，包含少量变化，但其中还是有令人在意的点的。本文将默认读者拥有大部分 pnpm v7 版本的知识储备，进行 v8 版本的前瞻速攻。Monorepo 丝滑方法论：引用模块热更新Monorepo 管理方法论和依赖安全从 v7 升级至 v8 是几乎无损、水到渠成顺利的。另外，请留意在 v8 状态下你的依赖是锁定等价的最低版本，请定期升级版本防止不必要的 bug ，并在出现 bug 时升级依赖排查。
2023-02-21 16:06:57
8850
原创 core-js常见于qiankun中的多份polyfill冲突问题
你可能会在 qiankun 等微前端体系中，有多个子应用时，发生 Math. DEG_PER_RAD 等的加载崩溃问题，经过探究，其实 core-js 本身是没问题的，原因是你加载了多份 polyfill ，由于本文探讨的问题场景比较特定和深入，更多的面向对 webpack 比较了解的用户，跳过了很多基础概念的介绍，希望对你有所帮助。
2023-01-16 14:14:41
4249
原创 Eslint 8.23 Flat Config 新配置迁移升级指南
直入正题，eslint 目前为止的配置文件格式（ 如） 存在很多无法避免的历史问题：配置格式混乱，层层不明确的继承，不易理解。插件配置时不支持实体运用（不能传function/object），基于字符串的依赖解析一旦错误，插件将失效。依赖关系混乱，继承的配置中，依赖查找经常错位，找不到预期的/等依赖，需要在当前项目重新安装。等等问题，对于2、3问题我们早期会使用或 fork @rushstack/eslint-patch来 hack 插件的导入路径解决依赖找不到的问题。
2022-12-18 06:52:13
5215
15
原创 浅析TypeScript 4.9 satisfies操作符使用方法
TypeScript 4.9 将新增satisfies操作符，类似于as，但他更像一个不那么strict的as。satisfies 操作符可以非常丝滑的解决对象的格式匹配问题，关于更多信息，请参见 ts 4.9 发布介绍。
2022-10-04 22:22:06
6712
原创 react router v6实现useHistory与自定义history设计思路
众所周知，/在 v6 版本取消了对的依赖，大幅减负，内部自己实现了更简约、轻量的history，所以不再提供useHistory方法，这会导致：如果从 react router v5 升级，迁移困难。无法使用，新的、学习成本等。为了解决这个问题，本文介绍 三种不同场景 下重新实现useHistory的思路。注：以下我们均指代的是 react router >= 6 的版本。从某种程度上来说，使用UNSAFE_*的 router 内部 context 确实可以解决我们的问题，但也带来了一定的不确定性。
2022-09-20 02:37:42
9569
1
原创 Monorepo管理方法论和依赖安全
最近看到、体验了不少 不规范 的 monorepo 仓库和场景，有很多错误点，都和我自身曾经的失败经历都如出一辙，因为他们最后都会、很快就会变成不可逆的历史债务。为了避免历史债，现代 monorepo 的一些行为、规范底线是什么？由于存在依赖提升、幽灵依赖问题，目前的唯一且最佳解只有 pnpm ，关于选型临界点，可参考：同时，应该使用最新版本的 pnpm （现在是 v7 ），如果你目前正在使用 v6 ，可参考：在配置上， pnpm v7 对 peer deps 的默认严格设定需要如下选项解决：详见 pnp
2022-07-03 13:53:31
5477
原创 vue-cli4升级vue2.7教程快速版
vue 2.7 正式 release，升级我们的 vue-cli 4 到 vue-cli 最新版，从而支持 vue 2.7 的使用。 依赖升级 ：全部 vue-cli 4 的相关依赖升级 v4 的最新版：注：可在 这里 找到最新版本号。若有，则删除 的依赖项，新版不再需要：全局锁 为 版本，保证全局唯一，pnpm 请使用 overrides ：yarn 使用 resolutions 锁：npm 建议尽快迁移到 pnpm 。vue 2.7 主要带来了 composition api
2022-07-01 21:31:37
4433
原创 Monorepo丝滑方法论：引用模块热更新
虽然 monorepo 一题之前聊过很多，对技术选择边界也反复洞察，但随着时间的流逝和实践的领域、量级拓宽，自省：越发重要的心智点是哪个？什么是 “引用模块热更新” ：就是你在 monorepo 中开发项目时，跨子包引用代码，改动其他子包的源代码文件，要能在当前项目中自动检测到，支持热更新，从而你就不需要去重新构建那个子包的产物，然后手动刷新页面了。下面我们从几个角度探讨一种 trade off 的丝滑解法，在阅读前，我们默认读者已经具备了 熟练的 webpack 基础 或是 框架开发者 。先做一个质问，为
2022-06-19 15:28:32
5369
4
原创 初步认知Next.js中ISR/RSC/Edge Runtime/Streaming等新概念
浅窥 nextjs 到目前 v12 版本的几个重点新概念，我们有：下面我们对这几个新概念进行一个初步的认知，在阅读前，我们默认读者已经预备了 nextjs 的基本知识。、 这两个是冷饭，我们都耳熟能详，那所谓 增量再渲染的概念，其实是基于 场景下的混合版 ，也可以理解成加强版 。对于 来说，也要分纯 和带服务端的 。纯 （ ）就是构建时预渲染 导出纯静态文件的做法，在 v 圈 nuxt 2 中已经被广泛应用。而考虑有无限个页面（如电商商品等）的网站，还想要享受 该怎么办？所以我们就引入
2022-06-02 14:10:15
4891
原创 Jest 28版本升级与关注点（shard分片调度测试）
前言直入正题，jest 28 发布信息如下：jest v28.0.0 changelog : Release changelogjest 28 config api : Configuring Jestjest 28 release blog : Jest 28: Shedding weight and improving compatibility阅读本文前，我们默认你已经具备了应用 jest 的基础知识。正文依赖升级以下 jest 基础依赖需要升级：{ // ↓ 这
2022-04-30 22:58:06
4241
原创 turborepo v1.2.0版本升级指南（--filter过滤范围）
背景turbo 在 v1.2 实现了众人期待的 --filter 语法，和 pnpm 的 filter 基本一致。Turborepo：Filtering PackagesTurborepo：v1.2.0 CHANGELOG如果你还不了解 turbo ，可以参见之前我的几篇文章：《 使用Turborepo进行复杂拓扑关系的monorepo最优构建 》《 Turborepo的进阶构建技巧和是与非 》解法我们关心的是该如何升级 v1.2.0 ，其实只有一件事我们应该注意的，
2022-04-08 19:55:57
4456
1
原创 聊聊pnpm v6升v7拥抱的变化和经验谈
前言可以看到 pnpm v7 已经进 rc 了，下个月就要正式 release 了。因为这次大版本升级带来的 Breaking change 还不少，这里先用 rc 版做一下升级，总结一些经验。正文我们此处以 7.0.0-rc.2 为例，CHANGELOG 。rc 变化跟进提前需要注意的是，rc 意味着不会再有大的变化了，但是 rc.1 到 rc.2 还是有变化的（全局 store 缓存位置变了），所以实际到 v7 正式 release 时，很大概率还有新的变化，所以需要额外注意下。Break
2022-04-04 05:56:33
11148
原创 Monorepo设计思路（Speeches）
先言This article is a speech结构设计位置作用libs/*提供基础能力、框架、sdk、组件库等apps/*业务应用（微前端子应用、整体应用） 核心，所有基础能力为业务服务templates/*各种模板utils/*赋能工具.../*更多分类…驱动模式基础能力 - libs领域范围sdk：埋点 / 环境变量 / 请求方法 / 高层封装工具等等…组件库：表单 / 联动组件 / 复杂组件等等…框架：业务自洽性
2022-03-31 15:04:07
4241
原创 chrome99关闭阅读清单/侧边栏（Side panel）
问题最新版 chrome 99 默认会新增 阅读清单 side panel 侧边栏的特性。如果不使用阅读清单，还要让他在快捷栏占用一个按钮是很冗余的（毕竟插件栏的空间很宝贵），所以我们要关掉他。解法打开 chrome://flags/搜索 reading ，之后 disabled 掉两个与阅读清单相关的特性即可：重启浏览器结束后即可恢复原状。...
2022-03-23 11:22:44
5422
2
原创 聊聊vscode几个常用的自定义快捷键（shortcut/keybindings）
前言有关 vscode 的话题一般都会很冗长，因为涉及的内容比较多，且配置千人千面。这一次聊的主要是 vscode 的几个自定义快捷键，什么是 “自定义” ？就是不在默认 vscode 预设内的。之前我也有幸见到过：全触控板 + vscode 全默认预设的开发者，所有操作全部使用快捷键，所以这是一个千人千面的事情。正文快开终端假如我们打开了某个文件，想在该文件的目录下快速打开一个终端该怎么做？配置的角度有两个解法：一个是早期到现在一直通用的 code runner 解法，可参见：《 vs
2022-03-12 17:49:52
4851
原创 聊聊Monolisa和JetBrains Mono字体在编码中的体验
JetBrains Mono早期一直是 JetBrains Mono 的使用者，vscode 配置如下： // settings.json // 这里使用的是 NL 无连体版本 "editor.fontFamily": "'JetBrains Mono NL','等线'",JetBrains Mono 是 JB 公司出品的免费等宽字体，也是在 JB 系软件上的默认字体，可谓是最普及的字体之一了，因为免费，所以也特别受欢迎。用了很久的 JB Mono ，总结好处如下：免费，用的人多，
2022-02-27 05:17:46
8790
6
原创 swc兼容polyfill的权衡与选择
背景开门尖山，swc 目前在 polyfill 上存在一些问题：es2022 不支持当使用 es2022 特性（如 array.at）时（目前未发布），无论使用哪种 swc 提供的 polyfill 策略（usage / entry），都无法提供 es2022 的 polyfill （其中 entry 策略最多提供至 es2021 ）。swc polyfill 查询列表已过时swc 的 polyfill 策略是自己维护了一份 core-js-compat 的 modules-by-versions
2022-02-09 17:03:33
1719
原创 聊聊vscode配置settings.json知其所以然（附大量配置）
前言vscode 的配置 settings.json 是一个老生常谈的话题，随着时间的流逝我们可能会很高频的改动他，但我们应该极力避免一个问题：⚠️ 配了某项但是不知道他的作用 ⚠️其实就是一个 知其所以然 的问题。籍此话题，本文将细致的分析我的 settings.json ，希冀可以给读者带来一些帮助。正文以下部分插件的配置来自于：《 前端web开发高效vscode插件分享（辩证的海量实战检验）》中提到过的插件。自动保存{ // 自动保存 "files.autoSave":
2022-02-06 04:18:49
36685
4
原创 现代组合构建方法论之swc、esbuild、mfsu秒级时代的开端
前言时过境迁，经过 2021 年的工程链疯狂 involution 之后，到了 2022 俨然已形成了三分天下的趋势，即 babel、swc 、esbuild 。那么他们之间有什么区别？如何考量和选择？需要考虑的波及场景有哪些？有没有体系化的打法？为了解该问题，下面我们将循序渐进的，逐步推导一个现代化的组合构建方法论。解法方向在进入正文之前，我们先看一个 babel 、swc、esbuild 他们的笼统区别：poweredspeedpolyfillbabel?????
2022-01-28 01:10:23
3008
1
原创 浅谈webpack5自动注入环境polyfill的策略
前言webpack5 相较 wp4 取消了内置的 polyfill （如 process 等），谈到 polyfill ，这里我们先分个类：categorypackagedescriptionbabel polyfillcore-js / regenerator-runtime高阶 es 语法，async 异步 polyfillnodejs polyfillnode-libs-browserbuffer 、process 等 polyfill我们的需求侧逻辑：
2022-01-24 18:27:14
3461
1
原创 css-in-js在qiankun微前端切换丢失样式问题（styled-components/emotion）
背景开门见山，我们在解该问题前先做一个 css in js 插入 style 标签的前提介绍：方案说明快速方案A目前使用现代 css style sheet 也就是 cssom 的 api 去操作样式是性能最好的，会把一堆 css 放到一个 <style></style> 标签里，这种方案速度很快，支持万级别的样式插入慢速方案B而早期是一个 style 标签对应插入一个样式，这样会比较慢，但是他在开发环境会很方便于修改和调试问题问题是什么呢？
2022-01-23 21:12:35
5987
1
原创 monorepo工作流基础之changesets打开与进阶（Speeches）
背景changesets 是 jira 公司 atlassian 的产品，由于公司人力问题，目前已经转由 changesets 新组织专门维护。repo 地址：changesets/changesets谁在用？先置理论聊聊工作流workflow 一致性问题如何达成一致协作的 workflow？公司内：拉通对齐形成一致合力开源：github bot + github actions开源项目的工作流解法官方推荐自动化解法：Automating Changesetsgithub
2022-01-08 21:25:45
6522
6
原创 聊聊2021年高效能的前端技术架构
前言2021 要结束了，不管是从 vue 3 从去年下半年开始走高到今年爆火也好，还是 modern bundle 技术在 2021 掀起新的内卷风潮，各种工具轮子爆发式增长，react 18 高度变革......，当然不止这些，显然 2021 年在一年时间内 fe 圈出现了太多新物质，无数涌现以使无法完全涵盖，但作为收年之作，我更想聊的是一个理想的 FE 技术架构是如何？在聊之前，我们先定义一下这里的 “架构” 是何含义，首先我们不会讨论大企业里的基建挂钩的架构，因为即使讨论了，对于一般的中小开发者来
2021-12-24 02:48:46
893
5
原创 聊聊webpack配置幽灵hack法与无缝简易脚手架
前言直入正题，本文将介绍两个不寻常的 hack 手法，以完成一个无落差、无缝启动的 webpack 自制脚手架。万物的起源来自一个很简单的问题，当我们拥有最佳 webpack 配置实践时，如何自定义自己的脚手架？webpack 配置的矛盾首先肯定不是使用第三方脚手架，也不是搞一份文件拷贝来拷贝去，其实本质上我们只需要营造一个 webpack 最佳配置来使用而已，但是我们又不能让他有实体，不然就回到了 “一份文件拷贝来拷贝去” 这种不清真的时代了。其实这是一个矛盾的话题，又要有一份 webpack 配
2021-12-04 01:41:07
835
原创 pnpm monorepo的技术选型临界点（Critical adoption）
前言直入正题。之所以要聊聊 pnpm 的技术选型临界点 Critical adoption ，得益于一段时间以来在 pnpm 上的丰富实践和赋能落地积累的经验。讲道理从 BD douyin 和 infra 团队相关开发者开始在国内推行和宣传，介入 pnpm 社区之后我也是对 pnpm 开始抱着探索的态度。当然经过一段时间的实践考究，发现 pnpm 只能是属于功大于过，下面我们简单聊聊。正文本文的主题是 pnpm monorepo 实践，但是聊之前，我们先捋一捋其他包管理器 npm / yarn ，
2021-11-27 15:21:35
1911
3
原创 Nodejs纯esm模块的迁移方法、社区冲击、评价浅论
背景npm 轮子哥 Sindre Sorhus 承担社区有相当规模的一部分的底层轮子维护，他的一举一动将深刻影响社区数以万计的顶层工具。按 Sindre Sorhu 的评价和思考，他现在是讨厌 cjs 的，要完全拥抱 pure esm ，并且在最近几个月将他所维护的几乎所有轮子都强制迁移到了 pure esm 版本，此举可以公开的信息如下：大版本变化：进行了大版本的 Breaking change ，所以如果你正在使用 cjs 编写，需要安装他的前一个版本（如现在为 ^3.0.0 ，你需要安装 ^
2021-11-20 17:57:54
2550
原创 使用swc与esbuild闪电加速你的webpack打包链路
前言直入正题，自动 umi mfsu 和 vite unbundle 打响 FE 高效开发第一枪，淘系 rax 新增 swc 功能、swc 作者加入 vercel 麾下，nextjs 新版本默认 swc 打包，再到阿里 ice2 新增 swc + esbuild 链路支持，swc 和 esbuild 逐渐入侵 FE 主工具流，暗示了一统天下的预兆。Rust 和 Go 将成为未来 JavaScript 基础建设的主流语言。本文将就 swc 与 esbuild 如何打通落地到 webpack 项目中为抓手
2021-11-15 23:27:21
8288
3
原创 【旧淘宝npm源停用】使用工具全方位快速切换到新源npmmirror
背景因旧 taobao npm 源使用量激增，taobao 业务域名已不再符合潮流大势，cnpm 旧核心老旧等原因，官方决定切换到新域名同时改进 cnpm 核心：npmmirror.com时间截止：2022 年 5 月迫在眉睫，目前旧 taobao 源 ( registry.npm.taobao.org ) 已 301 到新域名，项目也需改造。解法使用 npmmirror-quick 快速解决切源问题： yarn global add npmmirror-quick # 在项目根目录执
2021-11-14 05:13:42
2040
2
原创 私有npm源带scope作用域的环境变量自动分流法
问题显然，不管是出于节省流量考虑，还是私有源不够强大不能即时映射上游，或是速度太慢等原因，内网 / 私有 npm registry 源应该只负责管理私有包（大公司除外）。一般我们把这种私有包都管理到一个作用域 scope 下，比如：@scope/some-pkg 。在我们的知识储备中，npm_config_* 下面的环境变量会被读取到 npm 作为默认配置，而 npm_config_registry 是 npm 默认下载源。那如何配置带 scope 作用域前缀的 registry ？让他和默认 re
2021-11-13 04:26:42
1712
原创 vscode1.62原生代码块边缘导轨着色与Bracket Pair Colorizer的对标和差异化（附配置）
前言听闻 vscode1.62 已发布，相信聪明的 vscode 使用者已经在 vscode1.61 要升级为 1.62 ，或已升级为 1.62 ，虽然本次 1.62 的版本变化没有 awesome 级别的 feature ，但格外引人注意的就是与 Bracket Pair Colorizer 这个插件的对标和差异化。对标追溯古老的 vscode 1.60 版本，官方开始提供更好的正则引擎去识别括号并附加彩色着色，就已经开启了 Bracket Pair Colorizer 的对标时代，详情可见下文：
2021-11-06 05:58:19
5805
6
原创 webassembly/worker避免加载根域文件通用hack直载法（另思考gif操作现状）
前言使用过 web worker / webassembly 的同学相信都不会陌生，worker 虽好但使用很麻烦！那就是 worker 必须要求同域，而且还要把他专门拷贝到 /public 跟随 copy 到打包产物根目录去，保证直接在根域下加载，而 wasm 要求更严格，还需要指明响应头安全策略。用过 gif.js / pdf.js 等老库的同学相信都十分头大，到了 1202 年我们还不能直接 import 一下从 npm 包直接使用？还要自己 copy 文件吗，不可思议。不过办法总比困难多，我
2021-11-06 04:39:11
2137
1
原创 pnpm monorepo之多组件实例和peerDependencies困境回溯
回溯开门见山，pnpm 从渐入视野到使用已经进入成熟期。本文不会探讨 pnpm 的使用和 monorepo 方案，如需从零开始了解，可参见：pnpm 官方文档：pnpm.io《 为什么使用 pnpm 可以光速建立好用的 monorepo（比yarn/lerna 效率高） 》随着 lerna 的维护速度逐渐放缓（几个月才 commit 一次），vite / vue3 仓库迁移至 pnpm ，使用 pnpm 管理 monorepo 已是目前的最佳解之一。但是其中不免存在一些问题。问题p
2021-11-01 21:34:47
5681
3
原创 eslint8插件配置与api迁移、单测编写前瞻（波及prettier链路）
前言所谓前言，也即前沿，eslint 8 正式版已发行 20 天之久，日至今日，甚至都 release 了 v8.1 版本！一觉睡醒，看不懂 eslint 了，一切翻天覆地。下面我们就 eslint v8 的插件配置聊几个抓手切面。正文配置切面 ( eslint-config-* )eslint 的 config 是最简单的东西，说宏观点就是 rules 的聚合体，我们不会讲解 rule 这种简单的东西，但是可以给你一份流行的 config 列表：eslint-config-standar
2021-10-30 12:45:46
971
原创 pm2助力服务端Nodejs集群部署简易教程（上手成本极低）
前言相信 pm2 这个工具只要在 FE 圈混过的人都略有耳闻，主从模式、集群模式、多进程、日志管理、内存监控…等都是由 pm2 完成，可以说使用 pm2 的 nodejs 应用才能被称为真正的 nodejs 应用。乍一看很复杂的东西，上手应该很难吧，但其实不然，只要进行简单的配置即可开箱即用！正文包管理工具新纪元我们以往的文章都是一概采用 yarn 作为包管理工具进行演示，由于 pnpm 已经在国内被推流起来了，加上尤雨溪和 pnpm 进行了朋 ( p ) 友 ( y ) 交易，也把 vue-ne
2021-10-24 16:48:27
2378
原创 flask_socketio主动调用emit/send发送消息失败解决（伪同步flask上下文）
问题flask_socketio 有两大问题。第一大问题是 socket 依赖版本间的互相制约，仅限于固定的版本内才可以互通，关于这一点，可以查看 python-socketio 提供的说明表：如果不按照对应版本安装依赖，socketio 将失效，且不会有任何提示。第二大问题便是异步或多线程时 flask app 不在同一个上下文，导致主动 emit / send 失效，无法发送消息，但是在通过 on 侦听的作用域内则可以生效，正常返回消息（这是因为在此作用域内上下文已先置确认了）。解决由于
2021-10-16 20:09:46
3421
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人