人生苦短我用Vite:基本原理及使用方式

大家不要做比Vite还快的男人

尤雨溪说Vite很快，我一开始是不相信的。直到我亲自使用过后，我被Vite的速度震惊到了。

Vite之所以这么快是因为使用了浏览器支持的ESM的方式，避免开发环境打包代码，从而提升了开发速度。

Vite在开发模式下会开启一个服务器，它会拦截浏览器发送的请求，浏览器会向该服务器发送请求，获取相应的模块。 Vite会对浏览器不识别的模块进行处理，比如导入一个单文件组件的时候，也就是后缀为.vue的文件会在服务器上对.vue文件进行编译，并且把编译的结果返回给浏览器。

新老打包工具大PK

让我们来对比一下Vite和Vue-cli的区别

1.Vite在开发模式下不需要打包可以直接运行

文件的解析都交给了服务器
复制代码

2.Vue-cli开发模式下必须对项目打包才可以运行

因为要对sfc进行编译
复制代码

3.Vite在生产环境下使用rollup打包，而Rollup是基于esm的方式打包，Vue-cli使用Webpack打包

简单粗暴点来说，webpack就是用js来打包js！！！
esbuild都是用go语言开发的了！！！
rollup的打包方式我感觉更科学，学起来负担也没那么大，webpack太难懂啦！！！
复制代码

总的来说，Vite有以下几个优点：

• 快速冷启动 （因为不需要打包）
• 按需编译 （代码需要加载的时候才会编译）
• 模块热更新

Vite使用方式

前端肯定离不开npm或者yarn，项目的安装我们不过多赘述，跟着步骤来就可以咯。

使用 NPM:

    npm init vite@latest
复制代码

使用 Yarn:

    yarn create vite
复制代码

然后按照提示操作即可，也可以在命令行选项直接指定项目名称和想要使用的模板，例如创建vite+vue项目：

//npm 6.x
npm init vite[@latest ](</latest >)my-vue-app --template vue

//npm 7+, 需要额外的双横线：
npm init vite[@latest ](</latest >)my-vue-app -- --template vue

//yarn
yarn create vite my-vue-app --template vue
复制代码

这里我们创建一个Vue项目，项目结构如下：

项目结构很简单，只有一个html文件和main.js 文件

而package.json也是非常的简单：

Vite的启动以及打包指令我们只需要npm run dev或者npm run build 即可。

这时候我们运行一下npm run dev命令来启动项目。

可能我们项目只是一个初始化项目，大家会说代码量并不是很多，所以对于启动速度可能没太大的感觉，但是对比了vuecli版本的启动时间，还是有比较明显的差异的。

打开开发人员工具，切换到Network的标签页，并且刷新一下浏览器：

我们可以看到请求中有.vue结尾的文件

vite开启的这个web服务器，他会劫持以.vue结尾的文件请求， 他会把.vue文件解析成js文件，并且把响应头中的content-type设置为application/javascript,目的是为了告诉浏览器，我现在给你发送的是一个js脚本。

再来看看响应体，这是服务器解析的js模块，这里导入了helloworld这个单文件组件，并且下方又导入了 app.vue模块，值得注意的是后面又加了个参数type=template。

这里导入了app.vue 的render函数，但是app.vue是我们编写的单文件组件，我们在编写的时候根本没有写render函数，这里之所以能导入render函数是因为服务器对他做了特殊的处理。在这里只要加载了模块，就会向服务器发起请求。

我们接着往下看helloworld.vue的响应体，他的处理方式其实是和上面的.vue文件一样的。

再往下看的话请求了App.vue文件，并且这次请求带了参数，这次请求到服务器之后 服务器会把app.vue这个单文件组件 通过vue中的模块compiler-sfc 把它编译成render函数

并且我们可以看到在红框当中，组件中的静态节点提升了。

这就是Vite的开发模式的工作原理，它使用了浏览器支持的esm的方式来加载模块，在开发模式下它不会打包所有的代码，把所有模块的请求都交给服务器来处理。

在服务器处理浏览器不能识别的模块,你可以使用npm run build命令来看看vite打包的结果，这里我们就不再多做拓展，这就是vite的基本的原理以及使用方式，后续我会出一个专栏针对vite的实现原理。

对Vite理解尚为浅薄，如有不足之处请指正