携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情
前言
大家好呀，我是L同学。在上篇文章react笔记（二十一）—— 非组件获取路由信息中，我们学习了项目中经常用到的知识点，包括非组件获取路由信息、路由鉴权等等相关知识点。在本篇文章中，我们将学习到vite的相关知识点相关知识点。
vite介绍
vite是一种新型前端构建工具。那么什么是前端构建工具呢以及我们为什么需要构建工具呢？在 ES6 之前，JS 代码的模块化都是社区规范，更早之前根本也不需要更是没有规范，但是随着JS应用越来越广泛，项目代码量的增大，Node 服务端使用 CommonJS 规范，浏览器客户端出现了 AMD 规范。为什么需要模块化的规范呢？项目代码量太大，导致项目代码难以管理；一个项目的不同代码文件之间，需要统一的编码方式和规则。因此，出现了我们刚刚说的 CommonJS 规范和 AMD 规范等众多的社区规范，后来在 ES6 中有了语言层面的标准规范 ES Moudle （ ES 模块化规范），模块化可以帮助我们更好地解决复杂应用开发过程中的代码组织问题，但是随着模块化思想的引入，前端应用又会产生了一些新的问题，比如：
-
模块系统本身就存在环境兼容问题
-
模块化的方式划分出来的模块文件过多，而前端应用又运行在浏览器中，每一个文件都需要单独从服务器请求回来。零散的模块文件必然会导致浏览器的频繁发送网络请求，影响应用的工作效率。
-
在前端应用开发过程中不仅仅只有 JavaScript 代码需要模块化，HTML 和 CSS 这些资源文件也会面临需要被模块化的问题。
打包工具就是用来解决上面这些问题的，常见的打包工具有webpack、Rollup和Parcel 等。打包的本质就是将开发项目时产生的多个代码文件合并为一个代码文件或者几个不同类别的文件，同时保证代码的可执行。
