这是我参与「第五届青训营」伴学笔记创作活动的第 12 天

前言

Vite是新一代的前端构建工具

组成部分：

No-bundle开发服务，源文件无需打包
生产环境基于Rollup 的 Bundler

核心特征：

高性能，dev启动速度和热更新速度快
简单易用，开发体验好

详细知识点介绍

前端构建工具的意义

模板化方案：
语法转译：

使用Vite

vite项目初始化：

nmp i -g pnpm      //安装pnpm
pnpm create vite   //初始化命令
pnpm i             //安装依赖
npm run dev        //启动项目

vite的预加载

vite在处理的过程中如果说看到了有非绝对路径和相对路径的引用，vite会尝试开启路径补全

比如说现在导入了一个lodash

import _ from "lodash";

lodash可能也import了其他的东西

import _ from "/node_modules/.vite/lodash"

找寻依赖的过程是自当前目录依次向上查找的过程，直到寻到根目录或者搜寻到对应依赖为止

依赖预构建：

首先vite会找到对应的依赖，然后通过esbuild，将其他规范的代码转换成esmodule规范，然后放在当前目录下的node_modules/.vite/deps。解决了第三方包会有不同的导出格式，这是vite没约束的事情，而且在路径的处理上可以直接使用vite./deps,方便路径重写，在网络多宝的传输上得到了性能优化。

搭建vite项目

使用 NPM:

$ npm create vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

vite处理css

vite天生就支持对css文件的直接处理，vite在读取到main.js中引用了index.css，直接去使用fs模块去读取index.css中的文件内容，直接创建一个style标签，将index.css文件内容copy到style中，将css中的内容直接替换为js脚本

在main.js中import "./index.css"

index.css:

html, body {
            width: 100%;
            height: 100%;
            background-color: red;
        }

总结

极速的服务启动，使用原生 ESM 文件，无需打包。
轻量快速的热重载，无论应用程序大小如何，都始终极快的模块热重载

引用参考

vitejs.cn/vite3-cn/gu…

Vite的学习 | 青训营笔记

前言