vite与vue,vite2 vue3

　　本文主要详细介绍了关于Vue3和Vite的那些东西。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

1.创建一个vite项目

　　npm init vite-app项目名称

　　cd项目-名称

　　npm安装

　　npm运行开发

　　或者

　　yarn create vite-app项目名称

　　cd项目-名称

　　故事

　　纱线开发

2.vite简介

　　Vite是基于Vue3单文件组件的未打包开发服务器，可以快速启动本地开发：

　　冷启动快，无需等待包装操作；

　　即时热模块更新，替换性能和模块号的解耦让更新飞起来；

　　真正的按需编译，不再需要等待整个应用编译，这是一个巨大的变化。

　　而vite也成功改变了webpack的人生，让webpack开发者直接叫大哥：

　　你放弃网络背包。

　　那么vite是如何做到这一切的呢？

3.第一个疑问

　　通过运行npm run dev，您可以观察到这个项目在几秒钟内就打开了。当您打开调试器时，您可以看到：

　　模块请求

　　浏览器直接请求了。vue文件，后跟一些类型参数。单击这些请求，简要查看文件返回的内容：

　　//main.js

　　从“/@modules/vue.js”导入{ createApp }

　　从“/src/App . vue”//导入应用程序

　　导入/src/index.css？导入//

　　createApp(应用程序)。挂载(#app)

　　最直观地看到这里：

　　把vue引用变成/@ modules/vue.js。

　　转换。/App.vue到/src/app.vue。

　　转变。/index.css到/src/index.css？进口

　　//HelloWorld.vue？type=styleindex=0

　　从/vite/hmr 导入{ updateStyle }

　　const CSS= \ NP { color:red；}\n

　　updateStyle(62a9ebed-0 ，css)

　　导出默认css

　　这里编译Helloworld.vue中的样式，编译p { color:red }；

　　//index.css？进口

　　从/vite/hmr 导入{ updateStyle }

　　const CSS= # app { \ n font-family:Avenir，Helvetica，Arial，sans-serif；\n -webkit-font-smoothing:抗锯齿；\n -moz-osx-font-smoothing:灰度；\n文本对齐：居中；\n颜色：# 2c3e50\n上边距：60px\n}\n

　　updateStyle(\2418ba23\ ，css)

　　导出默认css

　　同时，更新和监控全局样式。

　　因为浏览器直接请求。vue文件，如何解析文件内容？项目是如何不使用webpack等打包工具直接运行vue文件。

3.1挖掘vite运行原理

　　从上面的代码片段可以看出，最明显的特点就是使用了ES模块。代码以模块的形式引入到文件中，可以按需加载。

　　它最大的特点是在浏览器端通过导出导入的方式导入导出模块，在脚本标签中设置type="module "，然后使用es模块。

　　正因如此，vite高度依赖模块脚本特性，也就意味着IE市场从这里被抛弃了。参见Javascript MDN。

　　在这种操作下，另一个伴随的效果是去掉了webpack打包步骤，不再需要将每个模块文件打包成一个bundle，从而支持浏览器的模块化加载。那么vite是如何处理这些模块的呢？

　　关键是vite使用的是Koa内置的服务器，相关功能主要通过中间件在createServer注册。

　　vite 对 import 都做了一层处理，其过程如下：

　　在koa中间件中获取请求。正文通过es-module-lexer解析资源ast得到导入内容，判断导入的资源是否为绝对路径，绝对视为npm模块返回的资源路径。比如“vue”=“/@ modules/vue”对模板、脚本、样式等被处理的依赖项，以http请求的形式区分并加载SFC文件各个模块的内容。通过查询参数的形式。

为什么这里需要@modules?

　　举个栗子：

　　从“vue”导入vue

　　vue模块安装在node_modules中，浏览器es模块无法直接获取项目下node_modules目录中的文件。所以vite在import上做了一层处理，用@modules重写前缀，让项目可以访问引用的资源；另一方面，所有的文件路径都写入同一个@modules中，类似于面向切片的编程，其他的操作都可以从其中进行，而不会影响其他的资源，比如alias等其他的配置可以在后面添加。

　　定期通过koa中间件将资源与@modules进行匹配，然后通过require (XXX )获取导出的资源并返回给浏览器。

3.2文件请求

　　单页文件的请求有一个特点，都是以*结尾的。vue作为请求路径。当服务器收到具有这种特性的http请求时，主要是对其进行处理。

　　根据ctx.path，确定请求的具体vue文件。

　　用parseSFC解析文件以获得描述符。描述符包含该组件的基本信息，包括模板、脚本和样式等属性。下面是处理Comp.vue文件得到的描述符。

　　然后根据描述符和ctx.query.type选择对应类型的方法，处理后返回给ctx.body。

　　当type为空时，表示处理脚本标签，使用compileSFCMain方法返回js内容。

　　Type template表示模板标签已处理，compileSFCTemplate方法用于返回render方法。

　　当类型为styles时，表示处理了style标签，使用compileSFCStyle方法返回css文件的内容。

　　在浏览器中使用ES模块是通过http请求获得的模块，所以vite必须提供一个web服务器来代理这些模块。上面提到的koa中间件就是负责这个的。vite劫持请求路径query.type以获取资源内容并将其返回给浏览器。然后通过单页文件分析后拼接不同的资源文件，Vite最终响应浏览器进行渲染。

　　另一方面，这也是一个很有意思的方法。webpack等打包工具会提前将各种模块打包成bundle，但打包结果是静态的。不管某个模块的代码能不能用，都得打包。明显的缺点是，随着项目越来越大，打包的文件也越来越大。vite的精妙之处在于需要的时候动态引入一个模块，而不是提前打包，自然提高了开发体验。

4.hmr热更新

　　vite的热更新主要有四步：

　　通过监视器监视文件变化；通过服务器编译资源，并向客户端推送新的资源信息；需要框架支持组件re render/reload；客户端接收资源信息并执行框架重新呈现器逻辑。在客户端，Websocket监听一些更新的消息类型，然后分别处理它们：

　　vue的更新-reload —— vue组件：通过import导入一个新的vue组件，然后执行hmrruntime。重装vue-rerender 3354vue模板更新：通过导入导入一个新模板，然后执行HMR运行时。renendervue-Style-update 3354 vue样式更新：直接插入新样式表style-update 3354CSS更新：文档插入新样式表style-remove 3354CSS move除：文档删除stylesheetjs-update —— js更新：直接执行full-Reload 3354页面roload:使用window.reload在服务器端刷新页面，通过watcher监控页面变化，根据文件类型判断是js重载还是vue重载。通过解析器获取当前文件内容，并与缓存中的上次解析结果进行比较。如果它改变了，执行相应的渲染。

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录