关于Vite的小小笔记

Vite是什么

两大部分组成:

  • Native-ES-modules-based server for development

开发环境原生ES模块构建。

  • Rollup-based build for production

打包构建基于Rollup。

传统构建工具的问题

  1. 传统打包工具会在dev server显示页面前打包引入的所有依赖。
  • 包括对每一个文件的import/export关系完整分析
  • 排序,复写,串联所有模块。

2 应用越大,打包越慢。
3 代码拆分利于生产环境性能,但是对开发环境没帮助。

基于 JavaScript 的工具有性能瓶颈,启动开发服务器较慢,影响开发效率。

Vite的优化办法:

Vite在浏览器请求源代码时进行转换并按需提供源代码,只在当前实际使用时才会被处理。减少了页面画面加载出来前的打包时间。
但在请求较大模块的时候,页面的加载会变慢。而同时请求的模块过多的时候,也会造成浏览器请求堵塞。所以Vite还有以下优化:

  1. 依赖预构建。

    • CommonJS 和 UMD 兼容性。

    Vite 必须先将作为 CommonJS 或 UMD 发布的依赖项转换为 ESM,当转换 CommonJS 依赖时,Vite 会执行智能导入分析。

    * 保证一个模块只请求一次预构建。
    Vite 将有许多内部模块的 ESM 依赖关系转换为单个模块,以提高后续页面加载性能。
  2. etag 与 304 Not Modified。

源代码模块的请求会根据 304 Not Modified 进行协商缓存,而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存,因此一旦被缓存它们将不需要再次请求。

  1. 代码拆分

在原生ESM构建模式下,精确地使已编辑的模块与其最近的 HMR 边界之间的链失效,只更新修改的模块本身。这意味着代码拆分对开发环境和生产环境都起到性能优化的作用。

  1. 原生ESM不支持以下写法:

import { someMethod } from ‘my-dep’
Vite会检测这种裸模块导入,并进行预构建,转换为ESM模式。重写导入为合法
URL,以便浏览器正确导入。
import {createApp } from 'vue'
//转换为
import { createApp } from '/@modules/vue'

原生ESM下的HMR

在 Vite 中,HMR 是在原生 ESM 上执行的。当编辑一个文件时,Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失效(大多数时候只需要模块本身),使 HMR 更新始终快速,无论应用程序的大小。

  1. 重写引入模块时记录模块引用关系。
  2. import.meta.hot标识修改的模块的HMR边界。
  3. 当一个模块发生改变,会追溯其引入者,并寻找HMR边界。
  4. HMR边界重新请求修改的模块,并进行更新。
  5. 如果引用链追溯到尽头,例如Vue应用中引入的index.js,main.js发生更改。应用还是会进行全部重载。

你可能感兴趣的