![](https://img-blog.csdnimg.cn/20190918140037908.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
什么是vite
文章平均质量分 89
Vite分享、原理介绍ppt。vite是一种新型前端构建工具,能够显著提升前端开发体验。
金乌Y
这个作者很懒,什么都没留下…
展开
-
(七)什么是Vite——vite优劣势、命令
尽管原生 ESM 现在得到了广泛支持,但由于嵌套导入会导致额外的网络往返,在生产环境中发布未打包的 ESM 仍然效率低下(即使使用 HTTP/2)。为了在生产环境中获得最佳的加载性能,最好还是将代码进行 tree-shaking、懒加载和 chunk 分割(以获得更好的缓存)。要确保开发服务器和生产环境构建之间的最优输出和行为一致并不容易。所以 Vite 附带了一套的,开箱即用。原创 2023-11-17 15:39:36 · 591 阅读 · 0 评论 -
(六)什么是Vite——热更新时vite、webpack做了什么
打包工具实现热更新的思路都大同小异:主要是通过WebSocket,创建浏览器和服务器的通信,监听文件的改变,当文件被修改时,服务端发送消息通知客户端修改相应的代码,客户端对应不同的文件进行不同的操作的更新。webpack的热更新就是,当我们对代码做修改并保存后,webpack会对修改的代码块进行重新打包,并将新的模块发送至浏览器端,浏览器用新的模块代替旧的模块,从而实现了在不刷新浏览器的前提下更新页面。相比起直接刷新页面的方案,HMR的优点是可以保存应用的状态。原创 2023-11-17 15:38:08 · 822 阅读 · 0 评论 -
(五)什么是Vite——冷启动时vite做了什么(依赖、预构建)
有时候默认的依赖启发式算法(discovery heuristics)可能并不总是理想的。如果您想要明确地包含或排除依赖项,可以使用optimizeDeps 配置项来进行设置。启发式算法,是一种常用于求解复杂优化问题的计算方法,其主要思想是模拟人类或自然界中蕴含的智慧和经验来寻找问题最优解。定义:一个基于直观或经验构造的算法,在可接受的花费(指计算时间和空间)下给出待解决组合优化问题每一个实例的一个可行解,该可行解与最优解的偏离程度一般不能被预计。原创 2023-11-16 09:47:36 · 593 阅读 · 0 评论 -
(四)什么是Vite——冷启动时vite做了什么(源码、middlewares)
这种裸模块的加载,浏览器是不支持的,所以 vite 会对其做一层裸模块重写的处理,例如将引入 vuex 的url改写为 /node_modules/.vite/deps/vuex.js?由于 import vue 这种模块引入方式,使用的是 Nodejs 特有的模块查找算法(到 node_modules 中取查找),浏览器无法使用,因此 Vite 会将 vue 替换成一个另一个路径,当浏览器解析到这行 import 语句时,会发送一个 /node_modules/.vite/deps/vuex.js?原创 2023-11-16 09:44:18 · 293 阅读 · 0 评论 -
(三)什么是Vite——Vite 主体流程(运行npm run dev后发生了什么?)
vite命令是在哪里注册的呢,在 node_modules/vite/package.json 中查看bin字段。vite启动的时候,会执行 bin 目录下的 vite.js 文件,在这个文件里面我们会看到获取了当前的电脑的 绝对路径 ,如果不包含 node_module 路径,就需要引入 source-map-support 这个包来处理,如果是相对路径则会进行路径补全,当然在 dev 环境下都会有 node_module 路径,在 prod 环境下, vite 会使用 rollup 来进行打包。原创 2023-11-15 15:16:48 · 1384 阅读 · 0 评论 -
(二)什么是Vite——Vite 和 Webpack 区别(冷启动)
Webpack在启动时,会先构建项目模块的依赖图,如果在项目中的某个地方改动了代码,Webpack则会对相关的依赖重新打包,随着项目的增大,其打包速度也会下降。Vite利用现代浏览器支持 ES Modules 的模块化的特性,省略了打包,对需要编译的组件,例如单文件组件,Vite采用了另一种模式,即时编译,请求某个文件的时候才会编译某个文件,及时编译的好处:按需编译,速度会很快。而 Vite 直接整合了 Rollup,为用户提供了完善、开箱即用的解决方案,并且由于这些集成,也方便扩展更多的高级功能。原创 2023-11-15 10:30:56 · 606 阅读 · 0 评论 -
(一)什么是Vite——vite介绍与使用
Vite(法语意为 "快速的",发音 /vit/,发音同 "veet")是一种新型前端构建工具,能够显著提升前端开发体验。Vite 是一种具有明确建议的工具,具备合理的默认设置。您可以在中了解 Vite 的各种可能性。通过,Vite 支持与其他框架或工具的集成。如有需要,您可以通过自定义适应你的项目。Vite 还提供了强大的扩展性,可通过其和进行扩展,并提供完整的类型支持。原创 2023-11-14 17:13:25 · 234 阅读 · 0 评论