前端工程化

阅读本文你将了解到：1.什么是WebP格式的图片？2.相比PNG或者JPG图片它具有什么优势？3.如何使用现有的JPG或者PNG图片生成WebP图片？4.页面中如何使用WebP格式的图片？

最近项目需要使用到微前端，在经过对乾坤和无界的初步调研后，决定用无界。遇到了左一个右一个的问题，本文主要记录了如何解决这些问题，欢迎阅读。

一个vue3项目中需要使用图片裁剪的功能，于是使用vue-cropper，本地开发没有问题，打包的时候报错。最终使用打补丁的方式解决了问题~

通过学习本文，你将有如下收获：1.了解Lighthouse的使用方式 2.了解前端性能优化的相关指标 3.了解一些具体的性能优化方法

因为项目中要用到即时通讯（IM ，以下均称为IM）的功能，大概类似下图的客服功能： 客服可以给客户发送文字、图片、以及视频。项目中已经有类似的功能，但使用的技术是websocket，本想继续用它，但是

设置或者切换npm镜像是我们经常遇到的场景，你是怎么做的呢？笔者之前是去找到.npmrc文件然后注释掉原来的镜像，再添加新的镜像。后来笔者了解到nrm可以使用命令行的方式来切换或者添加npm镜像，于是

如何保证自己写的代码或者工具函数能够经得起考验呢？边界、空值、溢出都能hold住？一个提高代码质量的方法就是进行测试，更具体地说是单元测试。本文将介绍单元测试的概念，前端单元测试框架，前端流行单元测试

聪明的你做了几个项目之后，有没有发现发现某些工具方法或者组件的使用频率很高，好多项目都在用。如何做到这些工具方法或者组件的更优雅地复用而不是用到了就复制粘贴呢？封装为一个npm包是一个不错的选择。本文

使用git提交代码时会要求填写commit message。好的commit message 可以帮助我们了解提交历史从而帮助我们快速分析问题，了解bug产生原因等。