前言 最近做的需求是海外的项目，使用的 vite2.x 和 vue3 来开发，在第一版提测的时候，发现打包之后，总包大小有 4M 多，有很大的优化的空间。 下面我将从以下几个维度给大家讲下如何优化一个

图片懒加载是前端开发中一项重要的性能优化策略，它能够明显缩短页面加载时间，提升用户的浏览体验。在本文中，我们将深入探讨在Vue开发时候如何实现图片懒加载，同时探讨多种实现途径。这些方法包括自定义指令、

身为一个程序员 🧑‍💻 ，不会还有人手动一张张上传图片压缩吧 🌝 ？通过封装好的工具，就能实现自动压缩项目内的图片，彻底释放双手 🤲 ！

用vue开发项目上线以后，发现首页加载速度非常慢，如果项目比较大，甚至可能出现10s以上的等待。用户体验非常差，试想如果你准备买一双AJ，登录某宝首页等了足足5s，那肯定果断选择某多多了。

上面代码是常用prerender-spa-plugin的配置，staticDir预渲染输出的文件地址，routes要做预渲染的路由，minify压缩相关的配置，renderer渲染引擎相关的配置，可以传入自定以的渲染引擎或者直接使用默认的PuppeteerRenderer，re…

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

所有的性能优化都围绕着两大层面两小层面实现，核心层面是网络层面和渲染层面，辅助层面是时间层面和体积层面，而辅助层面则充满在核心层面里，笔者通过本文整理出关于前端性能优化的九大策略和六大指标

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

当项目代码量达到一定级别，我们就会发现我们首次进入项目的时间特别长，其原因就是打包过后的app.js大小过大，加载需要一定的时间。 那我们有什么方法可以进行性能优化呢？