[前端与HTML]--Vite基本概要

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

---

1.为什么需要构建工具？

1.1前端构建工具的意义

graph TD
模块化方案 --> 提供模块加载方案
模块化方案 --> 兼容不同模块规范

语法转译-->高级语法转译
语法转译-->资源加载

graph TD
产物质量 --> 产物压缩无用代码删除语法降级

开发效率-->热更新

2.Vite是什么

定位：新一代前端构建工具

两大组成部分：

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

核心特征：

1. 高性能，dev启动速度和热更新速度非常快
2. 简单易用，开发者体验好

2.1浏览器原生ESM支持

两大要素：

• script标签增加type='module'属性
• 使用ESM模块导入导出语法

2.2基于原生ESM的开发服务优势

• 无需打包项目源代码
• 天然的按需加载
• 可以利用文件级的浏览器缓

3.Vite上手使用

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

//输入初始化参数
√Project name： vite-project
 √Select a framework： react
 ？Select a variant： -Use arrow-keys. Return to submit
     react
     )react-ts

    //启动截图
    VITE v3.0.4 ready in 516 ms
    -> Local: http://127.0.0.1:5173/
    -> Network: use --host to expose

3.Vite进阶路线

3.1Vite插件开发

为什么需要插件机制？

• 抽离核心逻辑
• 易于扩展

3.2Vite插件开发

1.服务启动阶段

graph TD
config --> configResolved
configResolved-->options
options-->configureServer
configureServer-->buildStart

2.请求响应阶段

graph TD
请求响应阶段 --> transformIndexHtml
请求响应阶段-->resolveId
resolveId-->load
load-->transfrom

3.热更新阶段

graph TD
handleHotUpdate

4.服务关闭阶段

graph TD
buildEnd --> closeBundle

3.3JS编译工具

出现的原因

1. JavaScript语法标准繁多，浏览器支持程度不一
2. 开发者需要用到高级语法

3.4服务器渲染

graph TD
项目源码 --> 构建流程
构建流程-->客户端产物
构建流程-->SSR产物
客户端产物-->运行在浏览器
SSR产物-->运行在服务端

graph TD
加载SSR入口 --> 数据预取
数据预取-->组件渲染
组件渲染-->HTML拼接