vite笔记

一、vite组成

• 开发服务器：基于原生ES模块提供了 丰富的内建功能（如：HMR模块热更新）

• 构建指令：使用rollup打包代码，预配置构成

vite官方文档（vite框架文档、api等）

二、创建项目

打开powershell

找到项目存放的文件夹输入powershell

创建命令

npm create vite@latest

yarn create vite

项目名称

这里 要求输入项目名称

选择框架

这里我选的是vue

选择形式

这里我选的是vue-ts

创建完成

三、Vite特性

• 主打特点就是轻快冷启动服务(在开发预览中不进行打包，使用的是ES6的import导入)
• 可以实现热更新(只要保存，页面就会更新)
• 按需进行更新编译，不会刷新全部DOM节点

四、构建优化

CSS代码分割

vite 可以保证异步chunk会只在 CSS 加载完毕后再执行避免发生FOUC（页面先加载出来，样式后加载出来，导致出现闪屏的状况）

原理：vite会把一个 chunk 模块需要用到的css样式代码抽取出来放到一个单独的文件里面，当 chunk 模块渲染完成时会自动通过 link 标签载入

异步Chunk加载优化

在项目中，Rollup通常会生成 “共用”chunk与动态导入相结合，会很容易出现下面场景：

Rollup（js模块打包器，可以将小模块组合打包成一个大块的复杂代码）
“共用”chunk（被两个或以上的其他chunk共享的chunk）

无优化情况：

Entry —> A —> C

vite优化后：

Entry —> (A + C)

其两者区别是：

• 在未优化时，只有当A被导入时，浏览器必须请求和解析A才能找到C
• vite可以使用一个预加载步骤重写代码，来分割动态导入调用，以实现A被请求时C也同时被加载。可以减少额外的网络往返

依赖预构建

原因及目的

• vite的依赖预构建可以大大的提高性能。
  他会将有许多内部模块的ESM依赖关系转化为单个模块
• vite的开发服务器会将所有代码视为原生ES模块。因此，vit必须先将作为CommonJS或UMD发布的依赖项转换为ESM。

五、自动依赖搜寻

如果没有找到相应的依赖缓存或者遇到了一个新的依赖关系导入，vite会抓取源码，寻找引入的依赖项，并将这些以来项作为与预构建包的入口点。
预构建通过esbuild执行，所以非常快。

esbuild主要特性：

1. 极快的速度，无需缓存
2. 支持 ES6 和 CommonJS 模块
3. 支持对 ES6 模块进行 tree shaking
4. API 可同时用于 JavaScript 和 Go
5. 兼容 TypeScript 和 JSX 语法

六、SSR服务端渲染

源码解构

文章参考：
vite中文文档