vite为什么编译比webpack快

启动速度:Vite在启动时不需要打包,因为它支持ES模块加载,不需要编译和打包所有模块的依赖。这意味着Vite在启动时不需要像Webpack那样构建整个项目的文件,因此启动速度更快。

1 vite 采用 es 新规范

vite 中的 main.ts 中可以直接使用 import,不需要对此进行解析,不需要将 es6 转成 es5

JavaScript 复制代码
#vite 直接引入了 main.ts
<!DOCTYPE html>
<html lang="zh-CN">
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

#webpack 会将所有的文件编译打包成对应js文件,然后插入到 #app 节点后
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <body>
    <div id="app"></div>
    <!--
    <script type="text/javascript" src="/static/js/chunk-vendors.js"></script>
    <script type="text/javascript" src="/static/js/app.js"></script>
    -->
  </body>
</html>

2 基于1,对于 node_modules 中的包文件,vite 会直接请求对应的文件

**xxx.js、xxx.vue **中遇到 import { xxx } from "包名",并且当包名不以 / ./ ../ 开头

会进行字符串转换,将包地址转换为以 /node_modules/.vite 开头的相对或绝对路径

JavaScript 复制代码
xxx.js 或 xxx.vue 转换后的路径
import { xxx } from "/node_modules/.vite/deps/vue.js?v=b3ae5e1f"
import _export_sfc from "/@id/__x00__plugin-vue:export-helper"


#控制台直接请求的路径
http://localhost:5183/node_modules/.vite/deps/moment.js?v=b3ae5e1f
http://localhost:5183/node_modules/.vite/deps/vue-router.js?v=b3ae5e1f
基于直接请求了node_modules中的文件,在编译过程中,也能够直接读取本地缓存(vite 有自己的策略,当包更新时,能够通过改变 xxx.js?v=xxx值的方式请求到最新文件)

3 对于非node_moduels中的部分需要编译的部分,比如 ts 语法,jsx 语,Vite采用按需加载的方式,当请求某个模块时才会对该模块进行编译。

  • Vite 将所有的文件,如 xx.vue 进行路径 hmlrId 值处理
  • vite 将 <script type="module" src="/@vite/client"></script> 置入到 html 页面顶部,开启 websocket监听,监听文件变化
  • 将文件变化后,遍历变化的文件,计算出要更新的模块,发送 socket 信息,触发对应模块 import.meta.hot.accept 函数
JavaScript 复制代码
# 消息列举
# /node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/client/env.mjs" 中的部分逻辑
# 目前很多时候发送的都是 full-reload,后面值得深究下

async function handleMessage(payload) {
    switch (payload.type) {
      case 'connected':
          break;
      case 'update':
          break;
      case 'custom':
          break;
      case 'full-reload':
          break;
      case 'prune':
          break;
      case 'error':
          break;
      default:
        break
    }
}
相关推荐
剑亦未配妥1 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师7 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny077 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy8 小时前
css的基本知识
前端·css
昔人'8 小时前
css `lh`单位
前端·css
前端君8 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6149 小时前
Web前端面试题(2)
前端
知识分享小能手10 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队11 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光11 小时前
css之一个元素可以同时应用多个动画效果
前端·css