vite+vue3+ts体验与webpack的不同

Vite的基本使用

首先，安装vite创建项目的工具@vitejs/create-app 此次版本为2.4.3

node 版本14.17.1 （vite需要node版本12.0以上） —Vite requires Node.js version >=12.0.0.

//环境准备完毕后 执行创建命令生成项目目录 
npm init @vitejs/app my-vue-app -- --template vue

选择vue回车 然后选择vue-ts生成vue+ts项目 (可以选择react等技术框架)

需要注意的是 ， @vitejs/create-app生成项目目录特别快但不包含node_modules模块
vue-cli与其不同的是下载好所需node_modules再生成目录

//进入到项目目录然后安装node_modules   
cd my-vue-app
npm install
//执行命令 启动项目
npm run dev

观看其根目录文件vite.config.ts
仅仅只用了一个@vitejs/plugin-vue插件便支持我们的项目运行.vue文件
当然只是支持并不是解析.vue文件 ， 解析文件另有其插件哦

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

同样的是 ， 在创建的react项目中也只是使用了@vitejs/plugin-react-refresh来支持我们运行react
如果你的编辑器有关于ts的项目报错 ， 记得安装@types/node来支持node使用ts

与webpack的不同

也许你会说vue-cli根本不需要vue.config.js就可以run起vue的项目了 ， 而vite还需要vite.config.js去配置才能支持运行呢 ， 那下面我们就讲一下vite的强大功能

• Vite是一个类似于webpack的自动化工具，但是并不需要像webpack一样繁琐的配置各种loaders ，plugins，例如加载解析我们的less预编译工具只需要安装less以及less-loader不要添加配置，若是全局添加变量则依旧需要添加配置 ， 对于jsx，vue等特殊文件的支持，还是需要向上文所述一样添加对应文件的支持
• 启动速度：一个安装了element-plus, vant, lodash等的vue项目运行只需要1004ms
  然而一个只安装了element-plus的vue-cli创建的项目运行起来需要5145ms ， 这可以理解为vite的启动速度比vue-cli或者是webpack快上了几倍的速度

关于vite启动以及热更新比webpack快速的原因如下

webpack会先打包然后启动开发服务器，请求服务器时直接给予打包结果。
vite则是直接启动开发服务器，请求哪个模块对该模块进行实时编译。
由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。
由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。
当需要打包到生产环境时，vite使用传统的rollup进行打包，因此，vite的主要优势在开发阶段。另外，由于vite利用的是ES Module，因此在代码中（除了vite.config.js里面，这里是node的执行环境）不可以使用CommonJS

vite+vue3使用过程中遇到的一些问题

• hmr热更新的时候有时候会卡顿表现不出来更新内容 ， 需要reload达到更新
• vite只是针对web以及native应用 ， 并没有webpack全能使用
• 使用@vitejs/create-app创建出来的vue项目默认vue-tsc打包命令"build": "vue-tsc --noEmit && vite build",，
  element-plus对ts的支持不太友好 ，打包时vue-tsc会抛错打包失败
  解决方案：命令修改为vite build使用vite进行打包或项目之初修改项目不使用ts或不使用element-plus组件