React 性能优化文章记录

  • journey of improving react app performance by 10x

  • 7 steps to modernize and optimize your react app

目标及介绍

利用项目集成插件的方式来实现

使用项目插件的方式集成到项目中
确保多人协作或者同一团队产出的代码规范统一,看上去像出自一人(很理想化,哈哈)

目前的主流方式:eslint+commitlint+prettier+editorConfig

eslint

js/ts规范检查工具

commitlint

规范 commit msg,配合 husky 一起使用,配合 lint-staged 则更加完美
husky:githooks 工具,在 Git 提交前搞一些事情
lint-staged:只检查 staged 文件(也就是被 git add 的文件),提高执行效率

prettier

代码格式化工具

editorConfig

帮助维护跨多个编辑器和 IDE 的同一个项目的多个开发人员的一致编码风格
需要安装 EditorConfig for VS Code 插件以确保项目中的 .editorConfig 配置能正常读取

向头部大厂的前端开发攻城狮看齐

阅读全文 »

这是在开发公司 sso jssdk 时遇到的问题,登录方式增加了企业微信扫码登录,但是企业微信扫码的二维码我希望能美化下,文档说明如下,

参数说明

参数 必须 说明
href 自定义样式链接,企业可根据实际需求覆盖默认样式

可以提供相关 css 样式文件,并把链接地址填入 href 字段(只支持 https 协议的资源地址):

⚠️⚠️ 但是这不是我想要的啊 ⚠️⚠️

  • 需要提供 https 提供的 css 链接
  • 还要设置 CORS 头,避免跨域问题
  • css 万一修改的话感觉也很烦(虽然一般不会修改 😝)

在网上发现了新的方法在此记录下,我觉的很赞

通过访问 data-url 解决样式问题

阅读全文 »

一、命令对比

yarn npm 命令功能
yarn install npm install 根据 pack.json 安装项目所需的依赖包
yarn install –flat 注释 1
yarn install –no-lockfile npm install –no-package-lock 不读取或生成 yarn.lock 锁文件
yarn install –pure-lockfile 不要生成 yarn.lock 锁文件
yarn add [package] npm install [package] 安装需要的依赖包
yarn add [package] –dev npm install [package] –save-dev 注释 2
yarn add [package] –D npm install [package] –save-dev 同上
yarn add [package] –peer 注释 3
yarn add [package] –P 同上
yarn add [package] –optional npm install [package] –save-optional 注释 4
yarn add [package] –O npm install [package] –save-optional 同上
yarn add [package] –exact npm install [package] –save-exact 注释 5
yarn add [package] –E npm install [package] –save-exact 同上
yarn global add [package] npm install [package] –global 全局安装依赖包
yarn global upgrade npm update –global 全局更新依赖包
yarn add –force npm rebuild 更改包内容后进行重建
yarn remove [package] npm uninstall [package] 卸载已经安装的依赖包
yarn cache clean [package] npm cache clean 注释 6
yarn upgrade rm -rf node_modules && npm install 更新依赖包
yarn version –major npm version major 更新依赖包的版本
yarn version –minor npm version minor 更新依赖包的版本
yarn version –patch npm version patch 更新依赖包的版本

二、命令注释

阅读全文 »

问题

最近在做项目的时候发现一个神奇的 bug,点击某一个 Radio 的时候提示下面 👇 报错,其他都 OK

1
Error in nextTick: "InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '`' is not a valid attribute name."

用 Vue 以来从来没遇到过

解决

后来一步步检查,从 js 传参,赋值开始,一个个检查过去没有问题…
然后检查 html 发现了最低级的错误..

好尴尬,不知道在什么时候在placeholder中间多敲了一个 就成了plac∂eholder

image.jpg

删除就好了

阅读全文 »
0%