背景 在做一键webpack转vite的工具中rollup打包升级时，发现在某个项目中，使用vite后本地冷启动很快了，但是使用rollup打包，在公司构建工具上打包部署需要180s左右，M1本地打包

前端项目性能优化和开发体验优化是无法避免的一个话题，在之前使用webpack做应用构建的时候，我们有许多手段和插件来做优化。当我们使用vite构建应用时也有许多插件来做优化，本文对vite的优化插件或

前言 当我们进行前端开发项目的时候都需要一些构建工具，像 Webpack、Rollup、Snowpack、Vite 等构建工具，而在 Vue3 的官方文档中的创建应用例子使用了 Vite，那么问题来了

@TOC 写在前面 vue项目在线下环境开发完成后，我们就需要项目的打包上线了，除了要知道打包命令npm run build 之外，我们还要知道项目整体文件依赖情况，web访问加载速度等概念，包括首屏

vite 令人眼前一亮的莫过于开发阶段的预构建与快速响应开发体验了。 但是可能在自己项目中使用 vite 的时候会出现水土不服， 很重要的一个问题发现优化并没有效果， 主要是因为我们项目首屏也就是 i

在vite项目中我们可能会遇到这样一种情况。 在我们本地开发，第一次进入页面的时候，页面会卡顿很长时间。越是复杂的卡顿时间越久。