本节课主要介绍我们的课程目标,能够通过vite构建生产打包项目;另外就是帮我我们理解vite,讲述了什么是vite,如何定义的,他的出现带了了什么,有何优势,为什么我们要学习vite;
在学习vite之前我对他并不是很了解,虽然目前已经有很多公司项目开始使用它,但是具体它是一个什么样的构建工具呢,我开始产生疑问,通过本节课认识了vite是一种新型的前端构建工具,能够显著提升前端开发工具。通常有两部分组成:一个开发服务,服务于开发环境;一个构建指令,服务于生产环境。
1、webpack:比较常用
2、rollup比较少用
3、parcel 少见
4、glup webpack前期也是用的比较多的
都存在一些共同的缺点:缓慢的服务启动;缓慢的更新,因此出现了vite。
基于webpack等打包工具缓慢的服务启动及缓慢的更新等缺陷,延伸出了vite的设计思想:将模块区分为依赖和源码两类,提升启动速度;以原生ESM方式提供源码,把打包工作交给浏览器。以vscode的live serve安装启动一个本地服务查看esmvite加载js与浏览器加载js对比精简了很多请求,并且自动引入一些文件,提升了加载的速度。
经过对比可见无论是在初始化项目还是打包时间或者是打包体积上,vite比较与cra的优势都十分明显,也就是为什么现在很多项目选用vite的原因。
对比项 | vite | cra |
---|---|---|
初始化项目&启动时间 | 44s | 3m23s |
打包时间 | 2s | 6s |
打包体积大小 | 152kb | s6skb |
本节课了解了什么是vite以及vite产生的背景,老师同队vite相比于当前打包工具的优势加什么了度vite的理解,也了解了vite模块区分,打包方式的设计思想是他得以推广的一个重要因素,基于他的种种优势,我会继续往下学习掌握,以便后期有机会运用到自己的项目中。