不得不说一下vite

最新推荐文章于 2025-06-20 13:39:24 发布
原创 最新推荐文章于 2025-06-20 13:39:24 发布 · 485 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript

本文介绍了Vite，一个基于ESM的Web开发工具，其特点包括快速冷启动、热模块更新和按需编译。讲解了Vite的运行原理、功能实现，以及与Webpack的关系。重点展示了Vite如何利用浏览器原生模块和Koa搭建服务。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vite简介

  • Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。

vite作用

  • 快速的冷启动：不需要等待打包操作；
  • 即时的热模块更新：替换性能和模块数量的解耦让更新飞起；
  • 真正的按需编译：不再等待整个应用编译完成，这是一个巨大的改变。

vite运行原理

  • 在浏览器端使用 export、import 的方式导入和导出模块，在 script 标签里设置 type=“module” （ ES Modules 目前主流的浏览器都已经支持）。

vite功能实现

  • 提供 web server：借用了 koa 来启动服务
  • 模块解析：核心是拦截浏览器对模块的请求
  • 支持 /@module/ ：判断路径是否以 /@module/ 开头，如果是取出包名，去 node_module 里找到这个库，基于 package.json 返回对应的内容
  • 文件编译：拦截了对模块的请求并执行实时编译

相关资料

Vite 2.0版本发布，都有哪些新特性
xiangzhihong8的专栏
02-20 1462
新年还没过完，Vite就发布了2.0版本，不得不佩服尤大大。 Vite是什么 Vite（法语意思是 “快”，发音为 /vit/，类似 veet）是一种全新的前端构建工具，你可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，但是更轻更快。Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具（如 esbuild）来提供一个快速且现代的开发体验。 Vite由两个主要部分组成： 一个通过本机 ES 模块提供源文件的开发服务器，具有丰富的内置特性和快得惊人的热模块替换(HMR)。 一
如何搭建 Vue + Vite 入门项目
paofuluolijiang的博客
08-04 1760
虽然市面上有很多的打包工具，例如webpackRollup以及Parcel等。毫无疑问，通过使用这些工具，在很大程度上改善了前端开发者的游戏体验。但随着业务变得越来越复杂，我们不得构建比之前更大型的应用。此时，所需要处理的代码量也越来越大。这时候，上面提到的打包工具就开始遇到性能瓶颈，我们可能需要很长的时间才能启动开发服务器，这样一来，开发效率就变得越来越低。针对这一现状，大佬们又构建了一个打包工具 ，也就是今天文章的主角 -Vite。Vite。
聊聊vite的是干嘛的
weixin_45705239的博客
07-18 781
Vite（法语中的"快速"）是一个现代化的前端构建工具，由Evan You（Vue.js框架的创作者）开发并得到社区的广泛支持。Vite旨在提供更快的开发体验和简化的构建流程。它通过利用现代浏览器原生支持的ES模块（ESM）特性和其他先进技术来实现这些目标。
vite
12-29 327
vite概念 vite是一个面向现代浏览器的一个更轻、更快的Web应用开发工具 它基于ECMAScript标准原生模块系统（ES Modules）实现 vite项目依赖 vite @vue/compiler-sfc 基础使用 vite serve 是一个用于启动web开发的服务器，启动服务器的时候不需要编译所有的代码文件，启动非常快 Vite build Rollup Dynamic import
Vite 打包 vscode 扩展遇到的模块问题
最新发布
杨波的专栏
06-20 1019
摘要：在开发VSCode扩展"小塔"时，使用Vite打包的webview页面出现Uncaught SyntaxError: Unexpected token 'export'错误。原因是webview加载JS时未指定type="module"参数，而Vite生成的代码使用ES模块语法。解决方法是在webview的脚本标签中添加type="module"属性。该参数的作用包括：1)启用ES模块语法解析；2)默认延迟执行；3)启用严格模式；4)创建模块
Vite简单上手
热门推荐
干巴爹兔的博客
04-26 1万+
Vite介绍 Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。 官网网址：Vite 简单上手 新建一个index.html，复制GitHub的代...
了解vite
weixin_73416102的博客
02-15 416
下一代前端的打包与构建工具打包工具,浏览器只认识html,css,js
什么是 Vite
qq_42941302的博客
04-19 1万+
Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具。其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口，并表示自己 ”再也回不去 webpack 了“ 。那么 Vite 究竟有什么魅力？ 这里引用一下 vite 官网首页的描述：下一代前端开发与构建工具 为什么是下一代呢？ 现有的前端构建工具不够我们用吗？ Vite 是不是在重复造轮子？ 下面我就用简单的逻辑解释一下 Vite 的优越性。 为什么是下一代 为了解释“下一
Vite: 毫秒级局部更新之HMR
Wang的专栏
06-28 1173
在代码变更之后，如何实时看到更新后的页面效果呢？在很久之前的方案是通过 live reload也就是自动刷新页面的方式来解决的。不过随着前端工程的日益庞大，开发场景也越来越复杂，这种 live reload 的方式在诸多的场景下却显得十分鸡肋，简单来说就是 模块局部更新 + 状态保存 的需求在 live reload 的方案没有得到满足，从而导致开发体验欠佳。
Vite: 模块联邦实现跨应用代码共享
Wang的专栏
06-30 933
在 2020 年上半年，Webpack 提出了一项非常激动人心的特性—— Module Federation (译为 模块联邦 )，这个特性一经推出就获得了业界的广泛关注，甚至被称为前端构建领域的 Game Changer。实际上，这项技术确实很好地解决了多应用模块复用的问题，相比之前的各种解决方案，它的解决方式更加优雅和灵活。
vite+vue3降级到vite+vue2.7来适配IE
henudxk的博客
03-23 2461
因为我的项目中用到了web worker，web worker会打包成单独的文件，我已经装了web worker插件rollup-plugin-web-worker-loader，感觉应该好使，但是在IE中报错，开始以为是IE不认识web worker，折腾好久找loader，后来发现不是，因为我在webworker中使用的async await的原因，不知道为什么web worker中的async await IE不识别，而主线程代码的中就可以，这里的需要改成传统的回调函数。这是新的vue2.7写法。
Vite 介绍
qq_41005300的博客
12-09 1541
具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。标签中，同时也带有 HMR 支持。也能够以字符串的形式检索处理后的、作为其模块默认导出的 CSS。并假设类型检查已经被你的 IDE 或构建过程接管了（你可以在构建脚本中运行。Vite 通过原生 ESM 导入提供了许多主要用于打包场景的增强功能。Vite 默认的类型定义是写给它的 Node.js API 的。Vite 提供了一套原生 ESM 的。对 Preact 实现了官方集成。Vite 天然支持引入。
vite介绍
qq_44331582的博客
07-05 2228
webpack —》市场份额大,生态相对来说非常成熟vite: 是vue团队的官方出品，同时vue-cli会在后面的版本中将vite作为预设构建工具。作为一个思维比较前卫而且先进的构建工具,解决了一些webpack解决不了的问题，已经有一些大厂在使用vite去构建项目。未来使用vue-cli去构建vue项目的时候你要写的vue.config.js不再是webpack的配置而是vite的配置(目前只基于浏览器项目)Vite也支持直接构建react，angular，svelte项目。
vite是什么？
qq_43651168的博客
05-22 1649
与传统的打包工具不同，Vite在开发环境中不需要将所有的代码打包成一个或多个bundle，而是根据需要即时编译并按需提供模块，这使得启动时间更快，并且在开发过程中的热重载也更加快速和准确。总结起来，Vite是一种基于ES模块的开发服务器和构建工具，旨在提供更快的开发体验。热重载：在开发过程中，Vite还支持热模块替换（HMR），使您可以在不刷新整个页面的情况下实时查看和应用代码的更改。一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
Vite 入门
NolanKy 的 技术博客
02-04 585
文章目录一，简介二，使用 一，简介 项目构建打包工具 一个由 vue 作者尤雨溪开发的 web 开发工具 注意：Vite的生产环境下打包是通过Rollup来完成的 Rollup是JavaScript的模块bundler(打包器)，可以将一小段代码编译为更大或更复杂的内容，例如库或应用程序。 也就是说Vite提供的是开发环境中的编译，打包工作是依靠的Rollup。 在使用Vite前，你需要知道一点，目前它只支持Vue3.x的版本。 二，使用 1，npm方式 npm init vite-app <pr
web开发构建工具Vite
qq_48018288的博客
10-18 2648
web开发构建工具Vite
vite入门
09-24 440
vite3中文文档：开始 | Vite 官方中文文档下一代前端工具链https://cn.vitejs.dev/guide/vite中文网：Vite中文网下一代前端开发与构建工具https://vitejs.cn/
vite 兼容低版本浏览器
04-28
### Vite框架兼容低版本浏览器的方法 Vite 是一种基于 ES 模块的现代前端构建工具，默认情况下它假设目标环境支持原生 ESM。然而，在实际开发中，许多场景需要考虑低版本浏览器的支持问题。以下是几种常见的方法来解决这一需求。 #### 1. 使用 `@vitejs/plugin-legacy` 插件 为了使 Vite 构建的应用能够兼容不支持 ESM 的旧版浏览器，可以借助官方推荐的插件 `@vitejs/plugin-legacy`。该插件会在打包过程中生成两套脚本文件：一套用于支持 ESM 的现代浏览器，另一套则通过 Babel 转译成 CommonJS 格式供老旧浏览器使用[^1]。 安装并启用此插件的具体操作如下： ```bash npm install @vitejs/plugin-legacy --save-dev ``` 随后在项目的 `vite.config.js` 文件中进行配置： ```javascript import legacy from '@vitejs/plugin-legacy'; export default { plugins: [ legacy({ targets: ['ie >= 11'], // 定义要兼容的目标浏览器范围 additionalLegacyPolyfills: true, // 添加额外 polyfill 支持 }), ], }; ``` #### 2. 自定义 Polyfill 加载策略 除了利用专门的插件外，还可以手动引入所需的 polyfill 来弥补特定功能缺失的情况。例如针对某些非常基础的语言特性（如箭头函数），可以通过调整 `.babelrc` 或者直接修改入口 HTML 页面中的 `<script>` 标签顺序实现提前加载必要的库文件[^3]。 如果发现某个具体的语法糖引起了异常，则应该单独处理这些部分代码片段，并确保它们被正确转换为目标环境中可用的形式。 #### 3. 利用条件注释区分不同类型的脚本标签 对于那些既希望保留性能优势又不得不照顾到较老设备上的用户体验的产品来说，可以在最终产物里同时存在两种形式的 JavaScript 引入方式——即当用户的客户端具备模块化解析能力时优先采用更高效的方案；反之，则回退至传统的全局变量模式[^2]。 这种机制通常表现为下面这样的结构： ```html <script type="module" src="/assets/main.esm.js"></script> <script nomodule defer src="/assets/fallback.cjs.js"></script> ``` 其中前者适用于大多数主流桌面端/移动端最新款应用商店预装程序之外的情形；后者则是为数不多仍然活跃于市场内的非标准实例准备的安全选项之一。 --- ### 总结 综上所述，虽然 Vite 默认并未集成完整的向下兼容解决方案，但凭借其灵活可扩展的设计理念以及社区贡献的力量，我们完全有能力克服此类挑战。无论是选用专用插件还是定制专属流程，都能有效提升跨平台适配度，满足多样化业务诉求的同时保持技术先进性和维护便利性之间的平衡。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值