抛弃Webpack!Vite使用初体验~
什么是Vite?
Vite,官方称其为”下一代前端开发与构建工具”。GitHub地址:https://github.com/vitejs/vite
起因
寒假学习Webpack的时候,基本配置就研究了一天。乱七八糟的配置文件一堆,抽离之后虽然好了一点,但还是觉得很乱。尤其是Babel的配置尤为复杂,正可谓:天下苦webpack久矣(其实还是自己太菜
前几天逛某乎的时候偶然发现的新框架,去GitHub一看原来已经出很长时间了,甚至刚发布了2.0版本。作为一个紧跟时事的bug写手,我决定体验一下这款号称极其出色的构建工具
如果里学过Vue,那你一定会知道它的开发者尤雨溪(Evan You),没错,这款工具正是尤雨溪本人编写,所以第一个支持的肯定是Vue,甚至他还表示可能会取代Webpack。
开始创建项目
使用Vite创建项目要比webpack简单许多,简单几步搞定,没有特别复杂的配置。
1 | npm init vite-app <project-name> |
一个demo项目就跑起来啦~
不过光玩demo怎么行?于是我决定用我那Vue的二半吊子水平写一个简单的页面看看,正好最近喜提新域名renex.me,就那vue为它写一个主页吧~
简单加两行文本:
1 | <template> |
居中显示:
1 | .central{ |
加上淡入动画和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的可能,但还需要很长一段路要走。