06 2021 档案

摘要:noParse 提高构建速度 直接通知webpack忽略较大的库 被忽略的库,不能有import ,require, define的引入方式 配置方式: wepack.config.js中,module: {noParse: /lodash/} DllPlugin 避免打包时不变的库重复构建 提高构 阅读全文
posted @ 2021-06-28 10:39 baixinL 阅读(135) 评论(0) 推荐(0) 编辑
摘要:webpack4 tree sharking 基于es6的export inport 没使用到的代码,去掉 不想被tree sharking 的文件,在package,json中配置 sideEffects配置 注意Babel默认配置的影响, ’@babel/preset-env':{modules 阅读全文
posted @ 2021-06-28 08:24 baixinL 阅读(48) 评论(0) 推荐(0) 编辑
摘要:字体未下载完成时,浏览器隐藏或自动降级,导致字体闪烁 flash of invisible Text(foit) 不显示--显示 flash of unstyled Text(fout) 先显示--换字体 font-display ie不支持 默认值: auto 引入字体:@font-face un 阅读全文
posted @ 2021-06-28 07:41 baixinL 阅读(307) 评论(0) 推荐(0) 编辑
摘要:图片的懒加载(loading lazy) 原生的:<img loading="lazy" src="xx" /> 插件:react-lazy-load-image-component (github) baseline jpeg 行扫描型图片,(自上而下的出现图片内容) progressive jp 阅读全文
posted @ 2021-06-27 21:02 baixinL 阅读(88) 评论(0) 推荐(0) 编辑
摘要:合适格式,合适尺寸,智能大小,合理的压缩,懒加载,未显示的用低品质的 图片格式 jpg 有损压缩,色彩保存的比较好 缺点:压缩比比较大,纹理型的图不适合jpg压缩,有锯齿 使用场景:色彩型图片 工具:imagemin jpg压缩文件的工具(npm), 参考:https://github.com/Kl 阅读全文
posted @ 2021-06-27 20:38 baixinL 阅读(122) 评论(0) 推荐(0) 编辑
摘要:性能检测工具 webpagetest:https://www.webpagetest.org/(测试功能需要fanqiang) lighthouse:npm全局安装,或直接使用chrome devtools的lighthouse performance: chrome devtools的perfor 阅读全文
posted @ 2021-06-27 09:47 baixinL 阅读(167) 评论(0) 推荐(0) 编辑
摘要:Restful API 设计:/api/list/2 传统传参方式基本臃肿 https://xxx/getWeather?city=深圳 得传两个参数给后台 用RESTful方式设计接口你可能会这么设计 GET https://xxx/weathers/深圳 GET /orders/1 :返回订单编 阅读全文
posted @ 2021-06-23 15:39 baixinL 阅读(38) 评论(0) 推荐(0) 编辑
摘要:e.stopPropagation(); // 阻止事件冒泡 事件代理:依靠事件冒泡 当给一个列表的每个元素去绑定事件监听函数时,会占用一定的内存。这时候可以把事件绑定其父元素上。 const div1 = document.getElementById('div'); div1.addEventL 阅读全文
posted @ 2021-06-23 15:02 baixinL 阅读(32) 评论(0) 推荐(0) 编辑
摘要:DOM操作非常"昂贵",避免频繁的DOM操作。 1.对DOM查询做缓存。 2.将频繁操作改为一次性操作。 可以使用文档片段节点处理完dom的片段变化,再添加到dom结构中: // 创建一个文档片段 const frag = document.createDocumentFragment(); // 阅读全文
posted @ 2021-06-23 14:38 baixinL 阅读(59) 评论(0) 推荐(0) 编辑
摘要:节点: div1, div1的所有子节点:div1.childNodes 阅读全文
posted @ 2021-06-23 14:37 baixinL 阅读(463) 评论(0) 推荐(0) 编辑
摘要:获取dom节点的父节点 节点:div1 div1的父节点:div1.parentNode 阅读全文
posted @ 2021-06-23 14:36 baixinL 阅读(345) 评论(0) 推荐(0) 编辑
摘要:写法一: //深拷贝 const deepCopy = (data) => { if (typeof data != 'object' || data == null) return data let result = null if (data instanceof Array) { //Arra 阅读全文
posted @ 2021-06-23 12:06 baixinL 阅读(47) 评论(0) 推荐(0) 编辑
摘要:注意Breadcrumb如果是Dropdown的上一份元素或下一个元素,会影响Dropdown下拉菜单的出现时方向。 基本属性: 参数说明类型默认值版本 disabled 菜单是否禁用 boolean - getPopupContainer 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚 阅读全文
posted @ 2021-06-22 16:40 baixinL 阅读(604) 评论(0) 推荐(0) 编辑
摘要:Breadcrumb.Item的属性: 参数参数类型默认值版本 href 链接的目的地 string - 3.17.0 overlay 下拉菜单的内容 Menu | () => Menu - 3.17.0 onClick 单击事件 (e:MouseEvent)=>void - 3.17.0 使用: 阅读全文
posted @ 2021-06-22 16:22 baixinL 阅读(498) 评论(0) 推荐(0) 编辑
摘要:表单 基本结构: import React, { Component } from "react"; class FormDemo extends Component { constructor(props) { super(props); this.state = { //... }; } ren 阅读全文
posted @ 2021-06-22 15:02 baixinL 阅读(401) 评论(0) 推荐(0) 编辑
摘要:成员说明类型默认值版本 offsetBottom 距离窗口底部达到指定偏移量后触发 number offsetTop 距离窗口顶部达到指定偏移量后触发 number target 设置 Affix 需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数 () => HTMLElement ( 阅读全文
posted @ 2021-06-22 15:00 baixinL 阅读(404) 评论(0) 推荐(0) 编辑
摘要:formatResult: (res) => { if (res.code != 200) { return } return { list: res.data.records || [], total: res.data.total || 0 } } //需要返回格式{list: 返回值,tota 阅读全文
posted @ 2021-06-22 14:12 baixinL 阅读(734) 评论(0) 推荐(0) 编辑
摘要:useEffect(() => { console.log('每次首次/重新进入时执行') return () => { console.log('每次离开时执行') } }, []) 阅读全文
posted @ 2021-06-22 14:04 baixinL 阅读(783) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示