【九月打卡】第13天 初识vite构建工具
2022/9/23 3:17:09
本文主要是介绍【九月打卡】第13天 初识vite构建工具,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
课程名称:Vite零基础快速入门
课程章节:Vite 概念和设计思想
课程讲师:Tomas
课程内容:
本节课主要介绍我们的课程目标,能够通过vite构建生产打包项目;另外就是帮我我们理解vite,讲述了什么是vite,如何定义的,他的出现带了了什么,有何优势,为什么我们要学习vite;
课程收获:
-
什么是vite?
在学习vite之前我对他并不是很了解,虽然目前已经有很多公司项目开始使用它,但是具体它是一个什么样的构建工具呢,我开始产生疑问,通过本节课认识了vite是一种新型的前端构建工具,能够显著提升前端开发工具。通常有两部分组成:一个开发服务,服务于开发环境;一个构建指令,服务于生产环境。
-
常用的前端打包工具
1、webpack:比较常用
2、rollup比较少用
3、parcel 少见
4、glup webpack前期也是用的比较多的
都存在一些共同的缺点:缓慢的服务启动;缓慢的更新,因此出现了vite。 -
vite概念以及设计思想
基于webpack等打包工具缓慢的服务启动及缓慢的更新等缺陷,延伸出了vite的设计思想:将模块区分为依赖和源码两类,提升启动速度;以原生ESM方式提供源码,把打包工作交给浏览器。以vscode的live serve安装启动一个本地服务查看esmvite加载js与浏览器加载js对比精简了很多请求,并且自动引入一些文件,提升了加载的速度。
-
vite和cra对比
经过对比可见无论是在初始化项目还是打包时间或者是打包体积上,vite比较与cra的优势都十分明显,也就是为什么现在很多项目选用vite的原因。
对比项 | vite | cra |
---|---|---|
初始化项目&启动时间 | 44s | 3m23s |
打包时间 | 2s | 6s |
打包体积大小 | 152kb | s6skb |
本节课了解了什么是vite以及vite产生的背景,老师同队vite相比于当前打包工具的优势加什么了度vite的理解,也了解了vite模块区分,打包方式的设计思想是他得以推广的一个重要因素,基于他的种种优势,我会继续往下学习掌握,以便后期有机会运用到自己的项目中。
这篇关于【九月打卡】第13天 初识vite构建工具的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-14企业协同软件:现代化管理的新选择
- 2024-11-14职场协作不再混乱:8个团队管理技巧提升你的项目效率
- 2024-11-14想让Excel表格设计更美观?试试这几款好用工具!
- 2024-11-14导航效果资料:初学者必备指南
- 2024-11-14制作右侧跟随效果资料的简单教程
- 2024-11-14职场效率倍增!学会这6个任务管理法则轻松完成工作
- 2024-11-14PS网页切图资料:新手入门教程
- 2024-11-14如何使用API查询虚拟货币的实时行情
- 2024-11-14低代码应用入门指南:轻松创建你的第一个应用
- 2024-11-14实物量法到底是什么?让项目管理更精准的秘密