Vite知识体系

构建工具Vite

No_bundle开发服务，源文件无需打包
生产环境基于Rollup的Bundler
高性能，dev启动速度和热更新速度很快

其内置了一个快速的开发服务器，支持热模块替换（HMR），能够在开发过程中实时显示代码更改的结果，不需要每次手动刷新页面，非常有助于提高开发效率。且Vite的开发环境使用原生的 ES 模块进行开发，不需要将代码预先打包，避免了传统构建工具的繁琐配置和构建过程，加快了开发流程。 Vite支持动态导入，使得在需要时按需加载模块变得更加容易，提高了应用的性能和用户体验。

插件系统

简单的API： Vite的插件系统提供了简单且易于理解的API，使开发者能够轻松创建和集成插件。
针对性功能： 插件可以用于添加各种针对性的功能，如处理样式、压缩代码、自动化任务等，以满足项目的具体需求。
构建阶段： 插件可以在构建阶段执行，允许开发者在文件被编译、压缩和处理之前或之后进行自定义操作。
开发服务器： 插件也可以与Vite的开发服务器进行交互，添加额外的开发工具、中间件或其他功能。
自定义转换： 插件可以对特定类型的文件进行自定义转换，如处理CSS、JSX、TypeScript等文件，使开发者能够实现个性化的构建过程。
快速生态系统： 由于Vite在前端社区中广受欢迎，插件生态系统也在不断壮大，你可以找到许多现有的插件来满足不同的需求。
自定义配置： 插件系统允许开发者根据项目需求灵活地进行配置和使用，从而实现定制化的开发流程。
扩展前端框架： Vite的插件系统也可以用于扩展前端框架的功能，例如为Vue、React或其他框架添加一些额外的功能或工具。

个人理解：Vite的插件系统可以很灵活的去增强和定制构建的过程，让开发者能够更好地适应项目需求并优化开发体验。

Vite的使用

在项目中安装Vite

npm init
npm install vite --save-dev

创建一个项目

npx create-vite@latest demo_name
cd demo_name
npm install

进入项目目录后，运行以下命令启动开发服务器

npm run dev

当你准备将项目部署到生产环境时，运行以下命令生成优化的静态文件

npm run build

Vite是一个方便快捷的项目创建工具

与webpack的异同

webpack的优点：

强大的生态系统： Webpack拥有庞大的生态系统，有大量的插件和工具可以解决各种复杂的构建需求。
适用于大型项目： Webpack适用于复杂的大型项目，能够处理更多的复杂场景和需求。
完善的代码分割： Webpack支持灵活的代码分割，能够按需加载模块，优化应用的性能。

但webpack的缺点是：

较慢的构建速度： Webpack的打包过程相对较慢，特别是在大型项目中，构建时间可能会较长。
复杂的配置： Webpack的配置相对复杂，需要深入了解不同的loader和plugin的配置方式。

总结：Vite在开发体验、构建速度和小型项目方面具有优势，特别适合快速原型开发和现代浏览器环境。而Webpack在适用于大型项目和复杂构建需求方面更具优势，尤其是拥有更丰富的生态系统。选择使用哪个工具取决于项目的具体需求和技术栈。

总结

在本次对Vite的学习中，对这一项目构建工具有了清晰的认识，之前在利用VUE开发项目时使用到了Vite，但不是很清楚其与Webpack的区别是什么，今天也学习到了其与Webpack的区别，收获满满。