前言 性能优化，一个掣肘用户体验的关键模块。它没有固定的标准定义或唯一的解决方案。但是我们从整个项目的开发-部署-用户体验的整个过程中，总能摸到很多有普适性的规范或者优化理念。 我们的目的是什么？优化

前言 最近接到一个需求，修改一个使用React编写的工单系统，具体就是在创建工单的时候能配置一些增强工单通用性的功能然后把配置传给后端进行存储，乍一听其实挺简单，但是由于数据结构没设计好，写的时候非常

功能： 背景图上加上一些自定义 div 信息，并且打包生成图片下载 js库： html2Canvas 坑： 1.导出的图片模糊 2.不同设备 清晰度不一致（比如说 windows 比 mac 模糊）

马上又是金三银四了，又要面对头疼的面试题了。经常容易被问到性能优化相关的问题，没准备的小伙伴进来看看吧，准备了的也可以考虑再熟悉熟悉呀，记忆更深刻一点。

说到webpack的性能优化，其实就是从时间层面与体积层面入手。对于时间层面主要就是优化webpack的构建速度（缩短构建时间）。对于体积层面主要就是优化webpack的构建结果（缩小构建结果）

本文介绍了前端性能优化的进阶实践，通过前端性能埋点&监控体系的建设，基于监控+发现+分析+解决+再监控的流程，对性能优化实现一个可持续性的良性循环。

这里说的不仅仅是我们常见的强缓存和协商缓存，还有浏览器自带的缓存机制，即使我们什么也没有配置也自带的隐式缓存（启发式缓存）。

webpack的构建速度是否可以再快一点。 构建的包的大小能否更小。 本文将介绍如何分析包体以及构建速度，并通过分析一步步将项目变小构建变快。

压缩项目打包后的体积大小、提升打包速度，是前端性能优化中非常重要的环节，笔者结合工作中的实践总结，梳理出一些常规且有效的性能优化建议