申请自己的网站空间,域名优化在线,网页制作工作前景,行业网站模板文章目录前言一、Vite简介1. Vite组成2.为什么选 Vite?二、Vite的优缺点vite优点vite缺点三、使用Vite创建Vue3项目1. 创建 vite 的项目2.项目的结构前言
本文讲解了构建工具 Vite#xff0c;目前只有vue3才可以使用Vite#xff0c;如果本文对你有所帮助请三连支持博主。 下…
文章目录前言一、Vite简介1. Vite组成2.为什么选 Vite?二、Vite的优缺点vite优点vite缺点三、使用Vite创建Vue3项目1. 创建 vite 的项目2.项目的结构前言
本文讲解了构建工具 Vite目前只有vue3才可以使用Vite如果本文对你有所帮助请三连支持博主。 下面案例可供参考
一、Vite简介
Vite 是一种面向现代浏览器的一个更轻、更快的前端构建工具能够显著提升前端的开发体验。除了Vite外前端著名的构建工具还有Webpack和Gulp。目前Vite已经发布了Vite2Vite全新的插件架构、丝滑的开发体验可以和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 机制。 快速冷启动Vite只启动一台静态页面的服务器不会打包全部项目文件代码服务器根据客户端的请求加载不同的模块处理实现按需加载而我们所熟知的webpack则是一开始就将整个项目都打包一遍再开启dev-server如果项目规模庞大打包时间必然很长。 打包编译速度当需要打包到⽣产环境时vite使⽤传统的rollup进⾏打包所以vite的优势是体现在开发阶段另外由于vite使⽤的是ES Module所以代码中不可以使⽤CommonJs 热模块更新在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 installnpm 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 是整个项目的打包入口文件
