跳到主要内容

性能优化

开发阶段的构建性能问题，Vite 内部已经做了相当多的优化，实现了项目秒级启动与毫秒级热更新，在生产环境中，我们一般更看重项目在的线上运行时性能，针对性的进行分析优化

通过分析打包体积结果，利用rollup-plugin-visualizer来分析包体积

  • 网络优化
    • 包括 HTTP2、DNS 预解析、Preload、Prefetch等手段。
  • 资源优化
    • 包括构建产物分析、资源压缩、产物拆包、按需加载等优化方式。
  • 预渲染优化
  • 预构建优化
  • CDN加速

预购建优化​

CDN加速​

  • 通过配置external
  • 可以减少bundle打包后的体积
  • 利用浏览器缓存

图片优化​

  • vite在生产环境，默认已经对图片进行了优化策略了
    • 小于4kb 【 limit为4096】, vite会自动转换为base64

注意的是，在开发环境中，仍然是图片的文件，在生产环境才是转换base64, 如果希望开发环境和生产环境保持一致，以下解决方法

  • 如果不希望小于4kb的图片转换为base64, 可以设置build.assetsInlineLimit为0表示禁用
    • 但是直接禁用的话，会把图片优化策略行为给干掉了，不推荐！
  • 或者自己写个plugin插件来处理

网络优化​

HTTP2​

开启了HTTP2,页面性能效果是比较明显的

  • 可以减少页面首屏绘制的时间(FCP)

设置HTTP2

  • 开发环境,可以通过vite-plugin-mkcert插件
  • 插件会帮你自动生成 TLS 证书，然后支持通过 HTTPS 的方式启动，而 Vite 会自动把 HTTPS 服务升级为 HTTP2
  • 生产环境，服务器配置HTTP2, 如在nginx设置http2

静态资源压缩​

JS压缩​

vite在生产环境构建中，对js会自动压缩

  • 默认的参数是build.target :modules
  • 注意可能Vite默认的target无法覆盖所有支持原生ESM的浏览器，经过压缩器的语法转换后，在某些低版本浏览器会出现语法不兼容问题
  • 因此为了线上的稳定性，需要兼容低版本浏览器，建议把target 参数设置为ECMA语法的最低版本 es2015 / es6

css压缩​

默认情况下 Vite 会使用 Esbuild 对 CSS 代码进行压缩，一般不需要我们对 cssTarget 进行配置

  • 不过在需要兼容安卓端微信的webview时，我们需要将build.cssTarget设置为chrome61，以防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式，出现样式问题

图片压缩​

图片资源是一般是产物体积的大头，如果能有效地压缩图片体积，那么对项目体积来说会得到不小的优化

  • 可以使用vite-plugin-imagemin来进行图片压缩

代码分割​

代码分割，也可以叫产物拆包。 如果不对产物进行拆分，全部打包到一个chunk中，会产生如下问题

  • 首屏加载的代码体积过大，即使是当前页面不需要的代码也会进行加载
  • 线上缓存复用率极低，改动一行代码即可导致整个 bundle 产物缓存失效

代码分割的好处：

  • 可减少单个js的体积，防止依赖重复打包
  • 提高页面加载速度
  • 更好的利用浏览器缓存

vite内置的代码分割:

  • CSS 代码分割，即实现一个chunk对应一个css文件
  • 默认有一套拆包策略，将应用的代码和第三方库的代码分别打包成两份产物，并对于动态import的模块单独打包成一个chunk