Vue3更高效的构建工具Vite使用指南

 更新时间:2023年10月16日 09:35:08   作者:柒小莫  
这篇文章主要给大家介绍了关于Vue3更高效的构建工具Vite使用的相关资料,Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端的开发体验,需要的朋友可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

前言

本文讲解了构建工具 Vite,目前只有vue3才可以使用Vite,如果本文对你有所帮助请三连支持博主。

下面案例可供参考

一、Vite简介

Vite 是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端的开发体验。除了Vite外,前端著名的构建工具还有Webpack和Gulp。目前,Vite已经发布了Vite2,Vite全新的插件架构、丝滑的开发体验,可以和Vue3的完美结合。

1. Vite组成

一个开发服务器,它基于原生 ES 模块提供了丰富的内建功能,如模块热更新(HMR)。一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可以输出用于生产环境的优化过的静态资源。总的来说,Vite希望提供开箱即用的配置,同时它的插件API和JavaScript API带来了高度的可扩展性。不过,相比Vue-cli配置来说,Vite构建的项目还是有很多的配置需要开发者自己进行处理。

2.为什么选 Vite?

时过境迁,我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验。

然而,当我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈:通常需要很长时间(甚至是几分钟!)才能启动开发服务器,即使使用模块热替换(HMR),文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite 旨在利用生态系统中的新进展解决上述问题:浏览器开始原生支持 ES 模块,且越来越多 JavaScript 工具使用编译型语言编写。

二、Vite的优缺点

Vite 的快,主要体现在两个方面: 快速的冷启动和快速的热更新。而 Vite 之所以能有如此优秀的表现,完全归功于 Vite 借助了浏览器对 ESM 规范的支持,采取了与 Webpack 完全不同的 unbundle 机制。

  1. 快速冷启动:Vite只启动一台静态页面的服务器,不会打包全部项目文件代码,服务器根据客户端的请求加载不同的模块处理,实现按需加载,而我们所熟知的webpack则是,一开始就将整个项目都打包一遍,再开启dev-server,如果项目规模庞大,打包时间必然很长。
  2. 打包编译速度:当需要打包到?产环境时,vite使?传统的rollup进?打包,所以,vite的优势是体现在开发阶段,另外,由于vite使?的是ES Module,所以代码中不可以使?CommonJs;
  3. 热模块更新:在HRM热更新??,当某个模块内容改变时,让浏览器去重新请求该模块即可,?不是像webpack重新将该模块的所有依赖重新编译;

vite优点

  • -unbundle 机制的核心:
  • 模块之间的依赖关系的解析由浏览器实现;
  • 文件的转换由 dev server 的 middlewares 实现并做缓存;
  • 不对源文件做合并捆绑操作;

vite缺点

由于 unbundle 机制,首屏期间、懒加载方面需要额外做以下工作:和 Webpack 对比,Vite 把需要在 dev server 启动过程中完成的工作,转移到了 dev server 响应浏览器请求的过程中,不可避免的导致首屏性能下降。不过首屏性能差只发生在 dev server 启动以后第一次加载页面时发生。之后再 reload 页面时,首屏性能会好很多。原因是 dev server 会将之前已经完成转换的内容缓存起来。

不对源文件做合并捆绑操作,导致大量的 http 请求;dev server 运行期间对源文件做 resolve、load、transform、parse 操作;预构建、二次预构建操作也会阻塞首屏请求,直到预构建完成为止。

三、使用Vite创建Vue3项目

1. 创建 vite 的项目

按照顺序执行如下的命令,即可基于vite 创建vue 3.x 的工程化项目:

  • npm init vite-app 项目名称
  • cd 项目名称
  • npm install
  • npm run dev

2.项目的结构

  • node_modules 目录用来存放第三方依赖包
  • public 是公共的静态资源目录
  • src 是项目的源代码目录(程序员写的所有代码都要放在此目录下)
  • .gitignore 是 Git 的忽略文件
  • index.html 是 SPA 单页面应用程序中唯一的HTML 页面
  • package.json 是项目的包管理配置文件

assets 目录用来存放项目中所有的静态资源文件(css、fonts等)

components 目录用来存放项目中所有的自定义组件

App.vue 是项目的根组件

index.css 是项目的全局样式表文件

main.js 是整个项目的打包入口文件

总结

到此这篇关于Vue3更高效的构建工具Vite使用的文章就介绍到这了,更多相关Vue3构建工具Vite内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/weixin_71170351/article/details/128968174

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • Vue使用pdfobject实现预览pdf的示例详解

    Vue使用pdfobject实现预览pdf的示例详解

    PDFObject 是一个 JavaScript 库用来在HTML中动态嵌入 PDF 文档。这篇文章主要为大家详细介绍了使用pdfobject实现预览pdf的功能,需要的可以了解一下
    2023-03-03
  • Avue自定义formslot调用rules自定义规则方式

    Avue自定义formslot调用rules自定义规则方式

    在Avue框架中,使用formslot自定义表格列时可能会遇到无法调用Avue的自定义校验规则的问题,这通常发生在尝试通过formslot自定义设置列的场景中,解决这一问题的一个有效方法是将自定义列与Avue的校验规则通过特定方式连接起来
    2024-10-10
  • Vue数组中出现__ob__:Observer无法取值问题的解决方法

    Vue数组中出现__ob__:Observer无法取值问题的解决方法

    __ob__: Observer这个属性其实是Vue监控变量产生的,下面这篇文章主要给大家介绍了关于Vue数组中出现__ob__: Observer无法取值问题的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • vue里面如何使用图片的懒加载

    vue里面如何使用图片的懒加载

    这篇文章主要介绍了vue里面如何使用图片的懒加载,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 使用Vite处理css less及postcss示例详解

    使用Vite处理css less及postcss示例详解

    这篇文章主要为大家介绍了使用Vite处理css less及postcss的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue修改vue项目运行端口号的方法

    vue修改vue项目运行端口号的方法

    本篇文章主要介绍了vue修改vue项目运行端口号的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue 路由嵌套高亮问题的解决方法

    vue 路由嵌套高亮问题的解决方法

    这篇文章主要介绍了vue 路由嵌套高亮问题的解决方法,主路由通过v-for循环出来,次路由通过url拼接的方式导航到子路由页面,具体实现代码大家参考下本文
    2018-05-05
  • vue实现登陆页面开发实践

    vue实现登陆页面开发实践

    本文主要介绍了vue实现登陆页面开发实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • vue实现翻牌动画

    vue实现翻牌动画

    这篇文章主要为大家详细介绍了vue实现翻牌动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue中实现高德定位功能

    vue中实现高德定位功能

    这篇文章主要介绍了vue中实现高德定位功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12

最新评论