开发时的构建速度的优化：

-webpack在这方面需要做了很多：catch-loader、thread-loader….
-而vite是在第一构建完成后，之后的每一次修改都是按需加载，不需要太关注这方面

Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。 在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活[1]（大多数时候只是模块本身），使得无论应用大小如何，HMR 始终能保持快速更新。 Vite 同时利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求

页面性能指标

首屏渲染：fcp

懒加载：图片懒加载，路由懒加载，上拉加载

http优化：强缓存，协商缓存

页面中最大元素的渲染时长：lcp

js

防抖节流工具使用(lodash)

作用域

css

继承属性的利用

避免多级嵌套

vite打包优化

分包策略

将一些不会改变的，外部引入的第三方库单独打包目的就是为了利用浏览器对包的缓存，不会而此请求，直接使用缓存

gzip压缩

使用vite-plugin-compression

动态导入

CDN引入

使用vite-plugin-cdn-import==>将第三方库external不打包到dist中，并将cdn连接作为script标签src属性插入到html中