随笔分类 -  性能优化

webpack 依赖优化
摘要：noParse 提高构建速度 直接通知webpack忽略较大的库 被忽略的库，不能有import ,require, define的引入方式 配置方式： wepack.config.js中，module: {noParse: /lodash/} DllPlugin 避免打包时不变的库重复构建 提高构 阅读全文
posted @ 2021-06-28 10:39 baixinL 阅读(160) 评论(0) 推荐(0)
webpack 的优化设置
摘要：webpack4 tree sharking 基于es6的export inport 没使用到的代码，去掉 不想被tree sharking 的文件，在package,json中配置 sideEffects配置 注意Babel默认配置的影响， ’@babel/preset-env':{modules 阅读全文
posted @ 2021-06-28 08:24 baixinL 阅读(66) 评论(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 阅读(332) 评论(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 阅读(103) 评论(0) 推荐(0)
图片格式优化
摘要：合适格式，合适尺寸，智能大小，合理的压缩，懒加载，未显示的用低品质的 图片格式 jpg 有损压缩，色彩保存的比较好 缺点：压缩比比较大，纹理型的图不适合jpg压缩，有锯齿 使用场景：色彩型图片 工具:imagemin jpg压缩文件的工具（npm）, 参考：https://github.com/Kl 阅读全文
posted @ 2021-06-27 20:38 baixinL 阅读(167) 评论(0) 推荐(0)
渲染优化
摘要：性能检测工具 webpagetest：https://www.webpagetest.org/(测试功能需要fanqiang) lighthouse：npm全局安装，或直接使用chrome devtools的lighthouse performance: chrome devtools的perfor 阅读全文
posted @ 2021-06-27 09:47 baixinL 阅读(217) 评论(0) 推荐(0)