vue3.0新的打包工具vite

vite
vite是基于esbuild预构建的，esbuild是用GO语言编写的，比js编写的打包器预构建快10-100倍，js跟go语言相比太慢了。

与webpack相比：

vite服务器启动速度比webpack快，由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发时优势越明显。vite热更新比webpack快，vite在HRM方面，当某个模块内容改变时，让浏览器去重新请求该模块即可，而不是像webpack重新将该模块的所有依赖重新编译。

Vite的使用简单，只需执行初始化命令，就可以得到一个预设好的开发环境，开箱即获得一堆功能，包括：CSS预处理、html预处理、异步加载、分包、压缩、HMR等。使用复杂度介于Parcel和Webpack的中间，只是暴露了极少数的配置项和plugin接口，既不会像Parcel一样配置不灵活，又不会像Webpack一样需要了解庞大的loader、plugin生态，灵活适中、复杂度适中。

因此vite被称为下一代前端开发与构建工具。

 

1. 构建vite为基础的项目

创建项目时，我们只需要 npm create vite@latest "项目名"

2.输入vite-demo作为项目名称，选择 vue 和 vue-ts，按照提示执行

cd vite-demo

npm intall

npm run dev

 

 3.IDE推荐使用

VS Code + Volar

4.Visual Studio Code 打开项目，查看项目结构