初识Vite

vite是什么？

作者尤大: Vite，一个基于浏览器原生 ES Modules 的开发服务器。利用浏览器去解析模块，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。

有以下特点：
1、闪电般冷服务启动（就是输入启动command，如npm run dev 启动会很快）
2、即时热更新HRM （如webpack-dev-server 实现的模块热更新）
3、真正的按需编译

vite与webpack 有什么不同？

webpack

Webpack会把所有资源（包括Javascript，图像，字体和CSS等）打包后置于依赖关系中，如：
在main.js中引入 a.js和b.js

// a.js
const a = () => { return 10 }
export { a }

// b.js
const b = () => { return 20 }
export { b }
// c.js
import { a } from './a'
import { b } from './b'

const c = return a() + b()
export { c }

经过webpack处理后打包生成bundle.js

// bundle.js
const a = 10;
const b = 20;
const c = return a + b;
export { c };

可以看到bundle.js里面的c模块依赖a和b模块的返回值来计算正确结果，因此如若a模块代码进行了更改，比如a = 30 那么webpack会对bundle.js所有依赖的模块重新打包生成新的bundle.js

//更改a模块后 生成新的bundle.js
// bundle.js
const a = 30;
const b = 20;
const c = return a + b;
export { c };

**总结：**修改了 bundle 模块中的一个子模块， 整个 bundle 文件都会重新打包然后输出，随着项目的扩大，整个项目依赖的子模块会越来越多，则需要打包的资源也增多了，打包的时间也会变得越来越长。

vite

重点：不需要打包，省去打包时间
vite利用浏览器支持的ES Moudle，遇到代码里的import xx from "xxxxxxx",就直接去找对应的资源，找到直接引入就完事了。例如，代码里有

// a.js
const a = () => { return 10 }
export { a }

// b.js
const b = () => { return 20 }
export { b }
// c.js
import { a } from './a'
import { b } from './b'

const c = return a() + b()
export { c }

使用：

打开控制台可以看到，模块 a b c 三个模块都被请求并加载了！
接下来看看 更改代码的时候，热更新怎样的。
以下只更改a模块里面的代码

可以看到b模块不会更新，只更新了与a依赖的模块c以及vue文件（注意，若是c模块未在代码里使用，尽管更改了模块 a b的代码都是不会在控制台看到加载的，这就是按需引入）

vite热更新原理是什么？

ES Moudle原理请戳
ES Modules 是用于处理模块的 ECMAScript 标准。 用法：

//script导入
<script type="module" src="index.js"></script>

// import导入
import Vue from 'vue'

// export导出
export default str => str.toUpperCase()
export {a, b, c}

如在vite项目中：
当服务启动时，vite便对当前import的文件进行了监听，热更新其实就是当文件有更改时，vite会判断更改的是什么文件，而采用对应的plugin对文件进行重新编译处理，而后返回给浏览器。并且会在文件加上时间戳，避免浏览器因为缓存而不更新文件。如更改helloworld.vue里面的代码，websocker会发送一个指令给vite，根据指令来执行不同的更新操作。

vite更新了什么？

官方中文文档： https://vitejs.dev/
从V1迁移到新版本，最明显的是vue被当成插件plugin抽离出来了，而vite就真真切切成为了一个编译打包工具，新建的时候可以选择需要支持的框架或者单文件

// 新建一个project
npm init @vitejs/app

选择一个vue项目，发现根目录下多了个vite.config.js文件，这也是此次更新的一大块内容，比如对于打包，sourceMap，server都变得易配置。详情