目录概览 后续章节周末加紧更新中。为了更好的阅读体验强烈建议跳转到该地址进行阅读。如果觉得对你有帮助麻烦点个Star ✨https://github.com/zhangyuang/vite-designhttps://vite-design.surge.sh/guide/module-resolve.html模块解析本章介绍 Vite 的核心模块加载解析机制启动 Koa 服务 //
转载
2024-07-31 23:02:14
380阅读
Vite 的特性 Vite 的主要特性就是 Bundleless。基于浏览器开始原生的支持 JavaScript 模块功能，JavaScript 模块依赖于 import 和 export 的特性，目前主流浏览器基本都支持； 那这有什么优势呢？ 去掉打包步骤 打包是开发者利用打包工具将应用各个模块集
原创
2021-07-25 10:17:52
493阅读
Vite 的特性 Vite 的主要特性就是 Bundleless。基于浏览器开始原生的支持 JavaScript 模块功能，JavaScript 模块依赖于 import 和 export 的特性，目前主流浏览器基本都支持； 那这有什么优势呢？ 去掉打包步骤 打包是开发者利用打包工具将应用各个模块集
原创
2021-07-25 10:17:58
202阅读
Vite 的特性 Vite 的主要特性就是 Bundleless。基于浏览器开始原生的支持 JavaScript 模块功能，JavaScript 模块依赖于 import 和 export 的特性，目前主流浏览器基本都支持； 想要查看具体支...
转载
2021-07-07 10:30:00
200阅读
2评论
theme: cyanosishighlight: monokai前置经过前面几篇铺垫之后，接下来看下 Vite 的热更新原理，先看下前置流程图接下来会详细分析下上图的过程demo假设main.ts文件如下typescript import a from './a' console.log(a) if(import.meta.hot){ import.meta.hot.accept('./a',
转载
2023-07-19 13:55:49
43阅读
背景： 首先声明一下，我只是个菜鸡，为了解决问题才去看的源码，解决完问题之后也就没有兴趣看其他部分代码了，所以这篇文章是一次很低层次的解读，角度也相当片面，想必会有很多喷点吧。 事情的经过是这样，今年十月底的时候对公司前端产品的构建工具做了一次升级，从webpack1升级到了webpack4，现在已经投入正式环境，写这篇文章的时候我在外边出差，忙的时候997，闲的时候也997，这会儿就有点闲得
Vite 的特性 Vite 的主要特性就是 Bundleless。基于浏览器开始原生的支持 JavaScript 模块功能，JavaScript 模块依赖于 import 和 export 的特性，目前主流浏览器基本都支持； 那这有什么优势呢？ 去掉打包步骤 打包是开发者利用打包工具将应用各个模块集
原创
2021-07-13 14:13:32
473阅读
为了更加完整舒适的阅读体验强烈建议跳转到以下地址进行阅读。包含源码解析章节的完整目录vite-design.surge.sh/guide/如果觉得该文章对你有帮助，可以到原仓库点个 Star ✨github.com/zhangyuang/…完整章节地址vite源码分析之模块解析篇vite源码解析之热更新篇vite源码解析之预优化篇vite源码解析之组件渲染篇预优化借用 Vite 作者的原话大家可以
转载
2021-01-30 21:29:09
612阅读
为了更加完整舒适的阅读体验强烈建议跳转到以下地址进行阅读。包含源码解析章节的完整目录vite-design.surge.sh/guide/如果觉得该文章对你有帮助，可以到原仓库点个 Star ✨github.com/zhangyuang/…完整章节地址vite源码分析之模块解析篇vite源码解析之热更新篇vite源码解析之预优化篇vite源码解析之组件渲染篇预优化借用 Vite 作者的原话大家可以
转载
2021-01-30 21:33:54
815阅读
2评论
【vue源码工程学习2：入口文件跟踪】找到Vue对象 平时读源码，但没有系统总结过，所以趁此机会再整理一下；不光是源码技术细节；从下载代码到运行源码过程中每一步都会有我们未涉及或者不熟悉的知识点和技术，所以尽可能触类旁通；这样便于逐渐形成一个技术体系。1 源码下载首先去github官网下载vu
什么是Virtio？Virtio 是一种 I/O半虚拟化解决方案，是一套通用 I/O 设备虚拟化的程序，是对半虚拟化 Hypervisor 中的一组通用 I/O 设备的抽象。其实现了一套guest VM中的上层应用与各Hypervisor (KVM，QEMU，Xen，VMware等)提供的虚拟化设备之间的通信框架和编程
转载
2024-09-29 17:54:32
100阅读
组件渲染前面的章节我们说到了本地文件在发送给浏览器之前是会根据文件类型做不同的 transfrom 代码转换的。观察一下我们实际在浏览器中加载的文件内容。可以看到表面我们加载的是一个 .vue 组件。但是文件的实际内容还是传统的 .js 文件，并且 Content-Type 也是 application/javascript; charset=utf-8 所以浏览器才能够直接运行该文件。并且我们可
转载
2021-01-30 21:26:53
841阅读
2评论
简介Vite以原生ESM方式提供源码，实际上是让浏览器接管了打包程序的部分工作：Vite只需在浏览器请求源码时进行转换并按需提供源码配置即使没有在package.json中开启 type: "module"，Vite也会在配置文件中使用ESM语法可以显示执行一个配置文件vite --config my-config.js配置智能提示：通过IDE和jsdoc配合实现/** @type {import
原创
2023-07-31 20:53:29
0阅读
一起养成写作习惯！这是我参与「日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。 Vite 下一代前端构建编译工具
原创
2022-04-12 10:03:07
292阅读
一、babel作用: (我偷懒了,直接用官网介绍) Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。据我所知, 无论是webpack项目还是vite项目都需要使用到babel来编译(.vue)文件。=> vite3支持jsx语法了 也要用到babel这里给个官网链接
转载
2023-09-08 16:04:42
1055阅读
vitevite由两部分组成开发服务器，基于原生ES模块提供了丰富的内建功能，HRM的速度非常快。一套构建指令，使用rollup打开我们的代码，并且预配置，可以输出生成环境的优化过的j静态资源。浏览器已经支持原生的esmodule 启动在live-server。 但是有缺陷，比如vue文件等等·，而且假如我们引入了loadsh-es这个库，使用的时候，浏览器会对第三方库的加载加载很多很多文件。 而
转载
2024-08-05 18:08:55
191阅读
文章目录依赖预构建的目的需要预构建的模块预构建的产物依赖扫描方式树的深度遍历子节点的处理遍历的具体实现开发阶段拦截并重写依赖请求通过 esbuild 对依赖进行再次打包esbuild插件编写源码解析依赖扫描的入口js模块非js模块bare importhtml、vue 类型模块虚拟模块加载对应的 script 代码扫描结果 依赖预构建的目的目的是为了兼容 CommonJS 和 UMD，以及提升性
背景这里的背景介绍会从与Vite紧密相关的两个概念的发展史说起，一个是JavaScript的模块化标准，另一个是前端构建工具。共存的模块化标准为什么JavaScript会有多种共存的模块化标准？因为js在设计之初并没有模块化的概念，随着前端业务复杂度不断提高，模块化越来越受到开发者的重视，社区开始涌现多种模块化解决方案，它们相互借鉴，也争议不断，形成多个派系，从CommonJS开始，到ES6正式推
转载
2024-08-22 14:40:31
118阅读
1. 发展历程> ##### 注意多个script使用时 lang的值要一致
- **方法二：**unplugin-vue-define-options插件
第一步：安装，安装的方式很常规，就是npm的安装
```javascript
npm install unplugin-vue-define-options -D第二步：集成，找到vite.config.ts文件，加入插件unpl
转载
2024-06-29 10:21:16
139阅读
? 个人主页：不爱吃糖的程序媛 ?♂️ 作者简介：前端领域新星创作者、专注于前端各领域技术，成长的路上共同学习共同进步，一起加油呀！ ✨系列专栏：前端面试宝典、JavaScript进阶、vue实战 最近做项目要求将webpack打包方式换成vite，下面将详细讲解一下配置vite需要修改哪些文件，以及过程中踩到的奇葩坑。vite官网文档网址：https://vitejs.cn1.新建vitecon
转载
2024-04-01 18:56:57
1470阅读
