软件工程

【九月打卡】第13天 初识vite构建工具

本文主要是介绍【九月打卡】第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构建工具的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!