Vite的使用及基础原理

1使用vite创建vue3项目

1.1工具要求

• node ：>=12
• @vue/cli ：>=4.3.1

1.2创建项目

npm init vite-app my-vue3

1.3启动

npm run dev

1.4使用vue工具

• vue-router：>=4
• vuex: >=4

2配置vite

• 根目录下，创建vite.config.js文件
• 参考地址：https://vitejs.cn/config/#optimizedeps-entries
• 基础配置展示：
  

3vite相比webpack的优点

3.1优点一：构建速度快

• vite 使用esbuild预构建依赖。esbuild使用go语言编写，操作级别是纳米级别的
• webapack构建使用node.js打包器构建，操作级别是毫米级别的。

故vite比用js编写的打包器快10-100倍。

3.2优点二： 开发启动快

3.2.1webpack开发启动过程

• 根据入口建立依赖图谱，生成ast，对ast进行处理转化，打包成浏览器可以识别的代码。在进行启动，有了一个打包的过程。当模块过多时，打包速度就会变慢，影响启动。
  -

3.2.2vite开发启动过程

• 直接启动服务，对请求的模块按需编译。根据你的加载在按需的去编译。主要原理是劫持浏览器的请求，进行整合和处理，在返回给浏览器。利用了现代浏览器识别es-module的原理。
  

3.3优点三：热更新速度更快

• webapack基于打包，每次更新就需要重新进行打包，更新速度明显较慢。
  webpack支持了hrm，允许一个模块 “热替换” 它自己，而对页面其余部分没有影响。这大大改进了开发体验 - 然而，在实践中我们发现，即使是 HMR 更新速度也会随着应用规模的增长而显著下降。

• vite 使用原生ems。当更新某个模块时，vite只需要重新加载该模块，重新编译该文件即可。

4vite基本原理

4.1EMS

vite是基于现代浏览器支持ES Module的原理。
在scrpit 标签上加上type=module后，浏览器对于此js文件内容中的关键字import有识别。
根据import关键词，浏览器会对此关键词导入的文件进行get请求，请求资源内容。

4.2基本架构

使用vite启动服务时，会启动一个koa服务器。服务器拦截浏览器esm的请求。服务器通过path找到对应目录下的文件进行一定处理以esm格式返回给客户端。

4.3 项目分析

• 对文件内容中路径进行处理，npm包路径加上/node_modules/便于处理。
  修改理由：浏览器只能识别./ …/ /这种开头的路径，对于直接使用模块名的路径如import vue from Vue.浏览器就会因为无法识别到路径报错。
  
• 讲每个vue文件拆分为多个请求，通过type来标识template 还是style 还是script
  

参考文章

1 https://www.jianshu.com/p/0d00a49adb20
2 https://blog.csdn.net/weixin_40906515/article/details/114313102
3 https://blog.csdn.net/weixin_42991716/article/details/115803348