Vite 基础笔记 01

什么是Vite

Vite 是一种新型的前端构建工具，能够显著的提升前端开发者的体验。主要由两部分组成：开发服务器：基于原生的ES模块，提供了丰富的内建功能，如速度快到惊人的热更新HMR。构建指令：使用Rollup打包你的代码，并且是预构建的，可输出用于生产环境的高度优化过的静态资源。Vite旨在提供开箱即用的配置，但同时也提供插件API和JavaScript API带了高度的可扩展性，并且有完整的类型支持。

为什么选用 vite

一个开发服务器：它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。
一套构建指令：它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活（大多数时候只是模块本身），使得无论应用大小如何，HMR 始终能保持快速更新。

Vite 同时利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。

搭建第一个 Vite 项目

$ npm init vite@latest

项目结构

├── node_modules           # 安装的依赖
├── public
├── src
|    ├── assets            # 静态文件
|    ├── components        # 组件
|    ├── App.vue           
|    └── main.js           # js入口文件
├── .gitignore             # git 忽略文件
├── index.html             # html入口文件
├── package-lock.json      # 记录当前状态下实际安装的各个 npm package 的具体来源和版本号
├── package.json           # 对项目或者模块包的描述,里面包含许多元信息*
├── README.md              # 项目帮助文档
└── vite.config.js         # vite项目的配置文档

@Title: Vite 基础笔记 01
@Content: Vite
@Autor: ling.wang
@StudyDate: 2022-07-12、2022-07-14
@WritingDate: 2022-07-14