vite和它衍生出来的一些问题

这篇文章只是小白答疑解惑记录,写得有点乱乱的,读者见谅
很多资料是自己查找前辈们的资料了解的,侵权的话请联系我删除!

小学生日志

上回搞懂了npm、yarn等包管理工具,在配置和前端工程化实现的过程就会更知悉一些,但一开始接触前端框架的时候,让我疑惑的不仅是包管理工具,还有vite,我的老师不会详细解释vite,只教我用vite创建项目,等我学的时间久一点之后,我会经常听到前辈们提到webpack,带着疑惑查找资料,我又认识了roollup和esbuild。这些都是什么?有什么用,为什么“包管理工具” create vite能创建项目?

前端构建工具简介

前言提到的vite、webpack、roollup和esbuild都是前端构建工具,也有的称为“打包工具”。


前辈箴言:

  1. 打包工具听起来就只是一个简单的打包功能,而构建工具有很多其他的功能,比如编译、测试、打包、优化、压缩等,所以还是称之为构建工具比较好。
  2. 学习一个新的工具,首选的学习资料就是该工具的官网。官网的教程,系统而详细,不要一遇到问题就去百度/博客上搜,得到的结果往往是乱七八糟的。[小白痛苦:倒也不是不乐意看官网,但有时候官网教程没有百度/博客上的白话和省时,比如我第一眼就被vite的官网简介干懵了,当然偷懒确实要付出代价,需要多长个心眼防止被坑]

代码写好之后,我们需要对代码进行压缩、合并、转换、分割、打包等操作,这些工作需要构建工具去完成。

构建工具主要分为两类:

  1. 基于任务的构建工具:grunt 和 gulp
  2. 基于模块的构建工具:webpack、vite、esbuild、roollup、parcel、browserify

本文内容重点不是前端构建工具的详解,重点还是在vite,就不花大篇幅一一介绍了,详细的内容指路前辈文章:

小白必看,总结前端所有主流的构建工具,webpack / vite / roollup / esbuild,包含源码,建议关注+收藏_前端构建工具-CSDN博客

vite是什么

Vite 是近几年前端业界热门的建构工具 (build tool),它大幅地简化了前端建构的流程与时间。


官网:开始 | Vite 官方中文文档

简介:Vite(法语意为 “快速的”,发音 /vit/,发音同 “veet”)由Vue作者尤雨溪开发,是一种新型前端构建工具,能够显著提升前端开发体验。

功能:Vue的核心理念是“快速开发,高效部署”:

  1. 开发服务器功能
  • 基于浏览器原生 ESM(ES Module),支持现代浏览器的开发环境。
  • 提供本地开发环境(localhost),便于开发者在本地进行快速迭代。
  • 支持热模块更新(HMR),当代码发生改动时,能够快速重新渲染页面,同时保留当前状态(state)。
  1. 生产环境打包
  • 使用 Rollup 进行高效打包,针对生产环境优化代码。
  • 打包结果高度优化,适合部署到生产环境。
  • 按需编译,只编译当前显示的资源,提升打包效率。

目前前端社群中的绝大部分框架,都采用了 Vite,包含 Astro,Nuxt,SvelteKit,Solid Start,Qwik City 都是;基本上除了 Next 与 Angular 之外,热门的框架都是选 Vite。

前辈箴言:

  1. vite仅支持vue3.0+的项目,也即是说我们无法在其中使用vue2.x

  2. 之所以是面向现代浏览器,而不顾之前的浏览器,是因为vite本身是一个web应用开发者工具,而对于开发者来说,一般都是使用比较先进的浏览器来进行开发,所以我们可以直接使用一些现代浏览器支持的特性,而不考虑去兼容一些老的浏览器;

    而现代浏览器支持的特性中,在vite中最为重要的一个,就是ES module。由于vite是面向现代浏览器的,所以它利用浏览器去解析imports,在服务器端按需编译返回,跳过打包过程。同时支持Vue文件和HMR(热更新),针对生产环境可以使用rollup打包。

为什么vite比webpack快

vite开发环境依赖esbuild进行预构建,生产环境则依赖rollup进行打包,并且充分利用了现代浏览器的特性,比如http2、ES module,vite是站在众多巨人肩膀上的一个产物, 类似webpack + webpack-dev-server的结合体。


运行原理

  1. webpack运行原理

vite和它衍生出来的一些问题_第1张图片

当我们使用webpack启动项目时,webpack会根据我们配置文件(webpack.config.js) 中的入口文件(entry),分析出项目项目所有依赖关系,然后打包成一个文件(bundle.js),交给浏览器去加载渲染。

这样就会带来一个问题,项目越大,需要打包的东西越多,启动时间越长。

  1. vite运行原理

vite和它衍生出来的一些问题_第2张图片

你可能感兴趣的:(前端,npm,webpack)