WebP实战
在搭建 blog 过程中,使用 lighthouse 审查站点。在性能项上提示Serve images in next-gen formats
优化建议。
Image formats like JPEG 2000, JPEG XR, and webp often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.Learn more
JPEG 2000, JPEG XR, 和 WebP 与传统的 JPEG、PNG 相比具有高压缩比、高质量的特点。这让图片加载更快,带宽消耗更少。当前浏览器对 JPEG 2000, JPEG XR, 和 WebP 的支持情况:
virtual list(虚拟化列表)
第一次了解这项技术是通过 react-virtualized 组件。当时就大概了解了一下,没有深入研究。近期刚好有时间折腾了一下,想将其技术对现有项目进行优化,就对其技术研究了一番。有点收获,就整理一了一下,与大家分享分享。
singsong: react-virtualized 的作者已对 react-virtualized 进行重写。并重新构建为 react-window。
背景
该技术算是对无限滚动加载的一种优化。无限滚动加载随着加载数量的增多,对性能的影响就越来越大。因为每次浏览器需要重绘的 DOM 节点数越来越多,耗时越长。这对用户体验造成的影响也是不容忽略的。为了减少 DOM 节点数量,virtual list 技术应运而生。
monorepos by lerna
最近在开发一个类似 create-react-app 工具。但面临一个问题,需要同时维护两个 packages,开发起来不是很方便,后期维护成本也高(如版本号维护)。于是查看了 create-react-app 源码,发现在其源码中有个 lerna.json
文件。好奇这个文件是做什么的,就了解一番。经查阅了解到 Lerna 可以用来管理项目中多个 packages。这正是自己所需要的,于是就有了这篇文章。本文主要对 Lerna 的使用做个简单介绍。
Lerna
Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.
Lerna 是一个基于 git 和 npm 管理多个 packages 来简化工作流程的工具。
代码规范化工具 ESLint
在将 ESLint 集成到自己的开发环境中时,发现对 ESLint 的了解有点模糊。于是就写了这篇文章,记录一下 ESLint 一般使用。
ESLint
ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs —— ESLint official website
ESLint 是一个基于 ECMAScript/JavaScript 代码模式识别和报告的工具,用于确保代码的一致性和正确性。