Vue3 更高效的构建工具——Vite

这篇具有很好参考价值的文章主要介绍了Vue3 更高效的构建工具——Vite。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

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


vue3 vite,javascript,前端,Vite,vue3

下面案例可供参考

一、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 的工程化项目:

  1. npm init vite-app 项目名称
  2. cd 项目名称
  3. npm install
  4. 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,javascript,前端,Vite,vue3


vue3 vite,javascript,前端,Vite,vue3文章来源地址https://www.toymoban.com/news/detail-631534.html

到了这里,关于Vue3 更高效的构建工具——Vite的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vite构建Vue3项目

    vue3-ts cd vue3-ts npm install npm run dev 或者 yarn dev 访问 http://localhost:5173/ yarn add vue-router -S yarn add element-plus -S yarn add unplugin-vue-components -D yarn add unplugin-auto-import -D 下载@types/node依赖 vite.config.ts tsconfig.json yarn add pinia -S

    2023年04月12日
    浏览(41)
  • Electron + Vue3 + Vite + TS 构建桌面应用

    之前是使用React、Electron、TS和webpack来构建桌面应用的。虽然功能齐全,但是打包等等开发的体验不太理想,总感觉太慢了。作为一个开发者,我们总是希望,执行构建命令后,可以快速打包或者启动本地应用,且通过更少的配置,来完成开发体验。 现在的vite已经得到广泛的

    2024年02月14日
    浏览(63)
  • Vue3通透教程【十七】Vite构建TS版本Vue项目

    专栏介绍: 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其

    2024年02月13日
    浏览(56)
  • vite+vue3+ts项目构建详细步骤(配置多语言版本)

    时过境迁,我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验。 然而,当我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇

    2024年02月05日
    浏览(48)
  • Threejs进阶之一:基于vite+vue3+threejs构建三维场景

    前面的章节我们都是通过HTML+JS的方式创建三维场景,从这一章节开始,我们后面将使用vite+vue3+threejs来构建三维场景。 打开vscode的终端管理器,输入如下命令 在弹出的选择框架提醒中,按上下键盘键,选择Vue,然后回车 选择JavaScript,回车 提示项目创建完成, 输入cd vue3-t

    2024年02月12日
    浏览(46)
  • 使用vue3+vite+elctron构建小项目介绍Electron进程间通信

    进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分之一。 由于主进程和渲染器进程在 Electron 的进程模型具有不同的职责,因此 IPC 是执行许多常见任务的唯一方法,例如从 UI 调用原生 API 或从原生菜单触发 Web 内容的更改。 在 Electron 中,进程使用 ipcM

    2024年02月06日
    浏览(62)
  • vite + vue3 + vue-router4 + ts + element plus + pinia + axios构建项目

    最后是完整的vite.config.ts、main.ts配置 1、先用vite创建一个项目 2、安装element plus vite.config.ts配置组件按需导入,图标自动导入   main.ts配置 页面文件使用 3、安装axios main.ts 4、安装pinia /stores/index.ts /stores/counter.ts main.ts 页面使用 5、安装router4 /router/index main.ts   6、vite.config.ts常

    2023年04月25日
    浏览(55)
  • vue3.x + vite4.3构建属于自己的组件库并发布npm包

    欢迎点击领取 -《前端开发面试题进阶秘籍》:前端登顶之巅-最全面的前端知识点梳理总结 *分享一个使用比较久的🪜 在国内的项目研发过程中,使用vue框架的项目占比很大,同样延伸出了很多非常优秀的UI组件库,比如element-plus、ant-design等;优势:资源较少,快速开发,丰

    2024年02月02日
    浏览(74)
  • vue3+vite项目构建时报错npm ERR! code EPERMnpm ERR! syscall mkdir...

    vscode终端中输入npm create vite@latest vueviteproject1 -- --vue命令后报错 具体报错如下:   PS D:project npm create vite@latest vueviteproject1 -- --vue   npm ERR! code EPERM npm ERR! syscall mkdir npm ERR! path D:nodenode_cache_cacache npm ERR! errno -4048 npm ERR! Error: EPERM: operation not permitted, mkdir \\\'D:nodenode_cache_cacac

    2024年01月16日
    浏览(45)
  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包