vuejs3.0 从入门到精通——基于 Vite 搭建 Vue3 项目

发布时间 2023-11-02 10:06:50作者: 左扬

基于 Vite 搭建 Vue3 项目

 一、为什么选 Vite

https://www.vitejs.net/

  在浏览器支持 ES 模块之前,JavaScript 并没有提供的原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因:使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。

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

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

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

  参考 Vite 官网给的回答:https://www.vitejs.net/guide/why.html,简单的来说见下图:

 

二、概览

https://www.vitejs.net/guide/

  Vite(法语意为 "快速的",发音/vit/,发音同 "veet")是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:

    • 一个开发服务器,它基于原生ES模块提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR)。

    • 一套构建指令,它使用Rollup打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。

  Vite 意在提供开箱即用的配置,同时它的插件API和JavaScriptAPI带来了高度的可扩展性,并有完整的类型支持。