vite复习整理

「这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战」

定义:

Vite（法语单词，“快” 的意思）是一种新型的前端构建工具, 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个基于原生 ES-Module 的前端构建工具。

尤雨溪本人也在微博上说道:

利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题

特点:

1. 快速的冷启动
2. 即时的模块热更新
3. 开箱即用
4. 真正的按需编译

解决问题：

1. ES-Module 的浏览器兼容性问题
2. 资源文件模块化问题
3. 模块文件过多导致频繁发送网络请求的问题

和webpack等打包工具的区别:

1. Vite 的构建指令就是通过 rollup 来打包你的代码
2. Vite 只启动一台静态页面的服务器，对文件代码不打包，服务器会根据客户端的请求加载不同的模块处理，实现真正的按需加载
3. 利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去 webpack 冗长的打包时间

Vite的安装和使用：

Vite要求Node版本大于12

安装: npm install -g vite

初始化项目: npm init -y

下载最新vue:npm install -S vue@next

下载vue3的compiler: npm isntall -D @vue/compiler-sfc

通过vite来启动项目： npx vite

vite打包项目:

1.可以直接通过vite build来完成对当前项目的打包工具:npm vite build

2.也可以直接通过preview的方式，开启一个本地服务来预览打包后的效果:npx vite preview

可以设置pakeage.json中的script:

"scripts":{
    "serve":"vite",
    "build":"vite build",
    "preview":"vite preview"
}

不足:

1. 浏览器兼容性问题（只支持ES2015以上版本）
2. 仍处于测试阶段，仅支持 Vue 3 版本
3. 和 CommonJS 模块不完全兼容
4. 脚手架不包括路由器、 Vuex等
5. 开发服务器与构建工具不同