常看常新 深入解析你不知道的 EventLoop 和浏览器渲染、帧动画、空闲回调（动图演示） 从 Vue 的 nextTick 到浏览器的 EventLoop 和 UI Render

背景 记录下日常遇到的问题和简便操作 学到了 1. ant-design 中的图标应用 @ant-design/icons-vue提供了很多图标组件 在 vue 组件中使用可以直接通过: 1234import &#123; StepBackwardOutlined &#125; from "@ant-design/icons-vue";// 使用<StepBackw

H1 背景 日常开发中用到 ssh 的场景包括公司内部使用私有化部署的 git 工蜂, github 以及连接 devnet 开发机进行远程开发, 导致 ssh 相关配置混乱. 很久之前就是这一套开发流程了, 一直没记录, 简单记下. 多 git 账号配置 生成 ssh 秘钥 1ssh-keygen -t rsa -C "邮箱" 按照默认配置操作的话, 最后在~/.ssh

之前一直对设计模式方面的知识没有系统的学习, 私以为对常见设计模式和编程范型的掌握对提升架构思维和代码重构能力是很有帮助的. 本文为阅读《JavaScript 设计模式与开发实践》过程中的随笔, 包括 JavaScript 遗漏的基础知识的完善以及常见设计模式记录. 不定期更新 平常上班摸鱼的时候也是在看 webpack 源码…毕竟不能明目张胆的掏本书出来(随笔完结后该段删除) 第一部分 J

背景 最近又要搞个系统平台, 后续大小迭代通过版本号标识, 很自然地想到CHANGELOG.md, 调研后发现 使用教程 完整的配置参考自动产出 changelog-第二节：自动产出 简单说下在自己项目中用到的配置: .versionrc 配置 CHANGELOG 的展示 format 12345678910111213141516171819202122232425262728293031

背景 前段时间负责将组内项目接入自动化流水线, 磕磕绊绊最后也算把全流程走通并且在线上稳定运行了, 把过程中遇到到的问题和知识点作用做个记录总结. nestjs 这里不会介绍 controller, provider 是啥, 应该怎么使用, 这些直接看官方文档就能理解了, 只会记录使用 nestjs 中的问题的解决过程, 官方文档模棱两可的描述以及底层原理的思考. 1. eslint wro

学习笔记 Tree shaking tree shaking 在计算机中表示消除死代码(dead code). JavaScript 的 Tree shaking 源自于 rollup, 依赖 ES Module 的静态语法分析. webpack4 正式扩展了这个能力, 分为usedExports和sideEffects两种: usedExports optimization.usedExp

学习笔记 prefetch & preload 预获取(prefetch)的含义是在当前路由下加载将来其他路由可能需要的资源, 在vue-router中就经常见到, 正常情况下我们并不需要加载所有的路由资源, 只需要加载当前路由需要的资源; 配置prefetch可以在加载完当前路由所需资源后, 由浏览器决定何时加载设置 prefetch 的资源, 从而实现路由懒加载. webpack

学习笔记 配置区分环境 针对开发环境和生产环境, 可以抽离不同环境特定的配置和公共配置, 针对传入的环境参数生成不同的配置. 首先在config目录下新建通用配置文件, 生产环境配置文件, 开发环境配置文件. 现将原先webpack.config.js的内容复制到webpack.common.js 1234config├── webpack.common.js├── webpack.dev.j

学习笔记 watch 本节之前如果要运行打包产物, 博主都需要执行两步: webpack 打包代码 使用 VSCode 插件 live-server 打开 5500 端口查看网页 webpack 提供了watch参数监听文件变化自动执行打包命令, 可以通过: webpack --watch 或者在 webpack.config.js 中配置 watch: true 即使这样做依旧存在几个问