vite、vue3有多火就不多介绍了，咱们直接上手尝试一下！ 内容篇幅可能偏长，都是手把手的硬干货，敲完会有意外的收货！ 环境准备 Node.js版本 >= 12 建议将Node.js升级到最新的稳定

性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。 本文相关的优化建议的引用资料出处均会在建议后面给出，或者放在文末。 1. …

Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue …

本文正在参与 “性能优化实战记录”话题征文活动 我们把性能优化的方向分为以下两个方面，有助于结构化的思考与系统分析。 加载性能。如何更快地把资源从服务器中拉到浏览器，如 http 与资源体积的各种优化

缓存，这是一个老生常谈的话题，也常被作为前端面试的一个知识点。 本文，重点在与探讨在实际项目中，如何进行缓存的设置，并给出一个较为合理的方案。 在介绍缓存的时候，我们习惯将缓存分为强缓存和协商缓存两种。两者的主要区别是使用本地缓存的时候，是否需要向服务器验证本地缓存是否依旧有效…

美团金融的业务在过去的一段时间里发展非常快速。在业务增长的同时，我们也注意到，很多用户的支付环境，其实是在弱网环境中的。 大家知道，前端能够服务用户的前提是 JavaScript 和 CSS 等静态资源能够正确加载。如果网络环境恶劣，那么我们的静态资源尺寸越大，用户下载失败的概…

前段时间有朋友问我一个他们公司遇到的问题, 说是后端由于某种原因没有实现分页功能, 所以一次性返回了2万条数据,让前端用select组件展示到用户界面里. 我听完之后立马明白了他的困惑, 如果通过硬编码的方式去直接渲染这两万条数据到select中,肯定会卡死. 后面他还说需要支…

10年前，亚马逊分享一个例子，每100毫秒的延迟都会是他们损失1%的销售收入，即在全年中，每增加1秒钟的加载时间将使该公司损失约16亿美元。同样，谷歌发现搜索页面的生成时间增加500毫秒，访问量将减少20%，潜在的广告收入也将减少五分之一。 我们中很少人可以像谷歌和亚马逊一样去…