vite简介
vite预构建
-
将非
ESM规范的代码转换为符合ESM规范的代码，另外就是将第三方依赖内部的多个文件合并为一个，减少http请求数量 -
简单来说，
vite在一开始将应用中的模块区分为依赖和源码两类 -
「依赖部分」更多指的是代码中使用到的第三方模块，比如
vue、lodash、react等，vite将会使用esbuild在应用启动时对于依赖部分进行预构建依赖 -
「源码部分」 比如说平常我们书写的一个一个
js、jsx、vue等文件，这部分代码会在运行时被编译，并不会进行任何打包。vite以 原生ESM方式提供源码 -
在开发环境中
vite是让浏览器接管了打包程序的部分工作，vite只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理 -
在生产环境中，
Vite利用Rollup对代码进行打包处理，并配合着tree-shaking/懒加载和chunk分割的方式为浏览器提供最后的代码资源
esbuild
-
Vite是使用Esbuild来做预构建和内容转换的，同样规模的项目，使用Esbuild可以将打包速度提升10-100倍 -
Esbuild是一款基于Go语言开发的javascript打包工具，最大的一个特征就是快 -
Esbuild支持多种模块格式，包括CommonJS、ES6模块、AMD等，使得它适用于任何类型的JavaScript项目
缓存
-
在Vite中，缓存是一个重要的概念，因为它可以显著加快开发服务器的热重载速度
-
Vite使用了两级缓存：一级是内存中的模块缓存，二级是基于文件系统的缓存
-
内存中的模块缓存：Vite会将每个模块的转换结果保存在内存中，以便在开发过程中快速访问
-
基于文件系统的缓存：Vite会将经过转换的文件存储在
node_modules/.vite/文件夹中，并且会在文件系统中缓存这些文件的依赖和变化 -
package.json中的dependencies列表；包管理器的package-lock.json文件；vite.config.js相关字段中的配置；当以上三个地方发生变化时，vite均会进行重新预购构建 -
更改缓存文件的位置
// vite.config.js
export default defineConfig({
cacheDir: ‘./.cache’
})
模块热重载HMR
- HMR 的全称叫做
Hot Module Replacement，即模块热替换或者模块热更新 - HMR 的作用就是在页面模块更新的时候，直接把页面中发生变化的模块替换为新的模块，同时不会影响其它模块的正常运作
- Vite本身也实现了一套 HMR 系统，他是基于原生的 ESM 模块规范来实现，在文件发生改变时 Vite 会侦测到相应 ES 模块的变化，从而触发相应的 API，实现局部的更新
- Vite 通过
import.meta.hot对象暴露手动 HMR API
vite基础配置
配置文件
-
Vite 会自动解析项目根目录下名为
vite.config.js的配置文件（也支持其他 JS 和 TS 扩展名） -
最基础的配置，
vite.config.jsexport default {
// 配置选项
} -
显式地通过
--config命令行选项指定一个配置文件vite --config my-config.js
-
可以使用
defineConfig工具函数配合开发工具进行智能提示import { defineConfig } from ‘vite’
export default defineConfig({
})
vite-plugin-html
-
vite内置了非常多的插件，开发者无需关注过多的插件配置
-
vite-plugin-html 是一个基于ejs模板库动态控制整个html文件内容的一个插件
-
插件安装
npm install vite-plugin-html -D
-
vite.config.js添加配置
import { CreateHtmlPlugin } from ‘vite-plugin-html’
plugins: [
createHtmlPlugin({
minify: true, // 是否压缩代码
pages: [
{ // 进行多页面打包配置
filename: “index.html”, // 生成的文件名称
template: “./index.html”, // 模板文件
entry: “./src/main.js”, // 打包入口文件
injectOptions: { // 注入页面信息
data: {
title: “vite项目练习”,
}
}
}
]
}),
] -
在h
