前端构建vite入门

1.什么是vite

vite是前端尤大神开发的一种新型前端构建工具。它是一种基于ES模块的前端构建工具。能够充当一个开发服务器,也有一套完整的构建指令。随着浏览器支持es5-module开始,让浏览器自己接管打包程序的工作是必然趋势。而vite目前已经实现了让浏览器自己接管了打包程序的部分工作:Vite 只需要在浏览器请求源码时进行转换并按需提供源码。不得不说尤大神一直走在技术的前沿,我等还得多加努力啊。

2.vite的优势在哪里

它与其他前端构建工具有着相同的功能,但是确有着其他构建工具没有的特点:

1.快速冷启动

其他前端构建工具会基于打包器抓取和构建整个应用,而vite会把源码与依赖模块区分开,能改进服务器的启动时间。

其他前端构建与vite的区别如下图:

vite打包

vite打包

2.即时的模块热更新

一些打包器在在编辑文件会重新构建整个包,构建时间大大变长了。而Vite 只需要精确地使已编辑的模块本身失效,这样无能应用的大小都能很快的构建好。

3.真正的按需编译

vite利用浏览器去解析 imports,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用。vite做到了只会编译真正用到的模块与依赖,不会编译无关的模块,实现了真正的按需编译。

3.如何使用vite

vite提供了开箱即用的配置,要搭建一个vite的项目只需执行以下命令:

1
yarn create @vitejs/app

执行命令后会弹出选择模块,根据自己需求选择即可。
详细配置参考官网:https://vitejs.cn/