什么是Vite?

Vite,官方称其为”下一代前端开发与构建工具”。GitHub地址:https://github.com/vitejs/vite

起因

寒假学习Webpack的时候,基本配置就研究了一天。乱七八糟的配置文件一堆,抽离之后虽然好了一点,但还是觉得很乱。尤其是Babel的配置尤为复杂,正可谓:天下苦webpack久矣(其实还是自己太菜

前几天逛某乎的时候偶然发现的新框架,去GitHub一看原来已经出很长时间了,甚至刚发布了2.0版本。作为一个紧跟时事的bug写手,我决定体验一下这款号称极其出色的构建工具

如果里学过Vue,那你一定会知道它的开发者尤雨溪(Evan You),没错,这款工具正是尤雨溪本人编写,所以第一个支持的肯定是Vue,甚至他还表示可能会取代Webpack。

开始创建项目

使用Vite创建项目要比webpack简单许多,简单几步搞定,没有特别复杂的配置。

1
2
3
4
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

一个demo项目就跑起来啦~

不过光玩demo怎么行?于是我决定用我那Vue的二半吊子水平写一个简单的页面看看,正好最近喜提新域名renex.me,就那vue为它写一个主页吧~

简单加两行文本:

1
2
3
4
5
6
<template>
<div class="central fade-in-slide-top">
<p>renex.me</p>
<p>The Next Revincx Site</p>
</div>
</template>

居中显示:

1
2
3
4
5
6
7
8
9
10
11
12
.central{
display: inline-block;
margin-top: 50vh;
transform: translateY(-50%);
}

p{
color: #FA8072;
font-size: 32px;
font-weight: bold;
letter-spacing: 3px;
font-

加上淡入动画和GitHub的角标然后封装个组件,一个简洁的页面页面就这么完成啦~

(这么简单的页面有用Vue的必要嘛)

不过这么简单的页面我仍然写了半个多小时,看来还是太菜

页面地址:https://renex.me

源码:https://github.com/Revincx/renex-home

后记

咕咕咕,就这么结束感觉也太水了,就来加一点总结吧~

Vite对比Webpack的优势

  • 热更新(HMR)效率高

    之前用webpack的dev-server写vue时,每次保存一下,浏览器那里要经过好几秒才能自动刷新,而Vite在我保存的一瞬间就完成了浏览器页面的实时刷新,效率非常高。原因:

    webpack会先打包,然后启动开发服务器,请求服务器时直接给予打包结果。
    而vite是直接启动开发服务器,请求哪个模块再对该模块进行实时编译。

  • 实现了真正的按需编译

    上面提到,vite是利用原生的 <script module> 语法进行引入,当浏览器识别type="module"引入js文件的时候,内部的import 就会发起一个网络请求,尝试去获取这个文件。这样一来既实现了异步加载,又实现了按需加载。

Vite会取代Webpack吗

来自知乎:vite是要替代webpack吗?

目前来看,虽然Vite虽然效率比webpack高出一大截,但仍处于开发阶段,生态极其不成熟,很多webpack插件还要需要时间来适配Vite,而且Vite的SSR(服务端渲染)还仍处于实验阶段。所以Vite有取代webpack的可能,但还需要很长一段路要走。