Vite 学习（一） - 介绍

vite 是一个基于浏览器原生 ES-Module 的前端构建工具。官网描述为 下一代前端开发与构建工具。

有下一代的概念，我们就先了解下什么是上一代工具。

原理：利用 ES6 的 import 会发送请求去加载文件的特性，服务端对这些请求进行拦截，做一些预编译（浏览器不能识别 .vue 文件等），省去 webpack 冗长的打包时间。

类似 webpack 的前端构建工具，但是是使用 go 语言编写的，多线程并行执行

前端目前常用的构建工具 webpack，包括我们使用的常见脚手架也都是基于它的。接下来对这两个工具做个大概对比：

webpack 可以实现开发、构建、打包；vite 只是应用于开发、构建、阶段，打包依赖于 rollup 工具。
vite 原理
- 声明 script 标签类型要为 module
- 浏览器发起一个 get 请求找到该文件
- 如果文件中还有 import 的包，会继续发起请求
- vite 的功能就是拦截浏览器发起的请求，在服务端对文件进行处理，在返回给浏览器，整个过程没有打包编译，所以速度快很多
vite 解析实现过程如下:
- 开发服务器使用 http connect 构建服务
- 通过多种中间件处理请求资源；也会遍历 html 节点，将元素的 src 属性添加上 base 前缀，将内联脚本转换为网络请求
- 会通过 es-module-lexer 这个库分析出所有 import 语句
- vite 会在请求后添加 query 参数的方式，用来标识当前请求的处理逻辑
webpack 打包过程
- 识别入口文件
- 通过逐层模块依赖进行识别（对 require、import 进行分析获取依赖）
- 针对不同的文件类型使用 loader 处理
- 转换、编译、输出最终代码
webpack 打包原理
- 逐级递归识别依赖，构建依赖图谱
- 将代码转为 AST 语法树
- 在 AST 阶段处理代码
- 把 AST 构建的语法树转为浏览器可识别的代码，输出最后输出的文件可知，webpack 自己实现了 require 函数，进行文件依赖导入；赖加载的文件使用 jsonp 方式实现

webpack 中使用 nodejs 编写的打包器构建；vite 使用 esbuild（go） 构建依赖，比 javascript 编写的工具快
webpack 编辑文件后将重新热替换文件（模块）本身，热更新效率随着项目体积增大变慢；vite 中，HMR 是在原生 ESM 上执行的，无论应用体积大小，都能更精准的更新模块本身。同时也利用了强缓存和协商缓存避免不需要的请求。
webpack 已经更新到的第五代，loader 和 plugin 丰富，生态优于 vite。但是 vite 发展势头正猛，相信社区发展也只是时间问题
vite 的打包目前还依赖于 rollup
vite 针对 vue，react， svelte 都有提供基础模板

代码语言：txt复制

    vanilla  无模板原生模式
>   vue      vue3
    react 
    preact
    lit
    svelte

大家可以根据自己的选择去安装了

vite.config.js 配置文件，vue 默认是 setup 开发模式，如果想用 jsx 开发，需要单独安装插件

想使用 jsx 开发import { defineComponent } from "vue"; export default defineComponent({ setup() { return () => { return <h3>我是jsx</h3> } } })修改 main.jsimport { createApp } from 'vue' import App from './App' ////////// createApp(App).mount('#app')
npm i @vitejs/plugin-vue-jsx -D
新建 App.jsx 文件

我们用 vite 创建项目时知道，没有 vue2 模板的选项，那对于熟悉 vue2 技术栈的同学该怎么办呢？

我们重新创建项目选择 vanilla 模板，一个最简单的形式。

创建 vite.config.jsimport { createVuePlugin } from 'vite-plugin-vue2' export default { plugins: [createVuePlugin()] }
安装 vue2、npm i vue -S
目录结构如下

书写测试代码编辑 main.js 文件import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) }).$mount()编辑 App.vue 文件<template> <div> vue2 </div> </template>