关于Vite的小小笔记

Posted 2021-09-29 Cyyyiyi

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发生更改。应用还是会进行全部重载。