【前端工程化】深入浅出vite（一）--vite的优点及原理、性能优化

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

背景

webpack支持多种模块化，将不同模块的依赖关系构建成依赖图来进行统一处理，当构建的项目越来越大时，需要处理的JS代码也越来越多，通常需要很长时间才可以启动开发服务器，即使使用模块热替换(HMR)，修改文件也需要几秒钟才能在浏览器中反映出来，影响了开发效率和幸福感。

Vite可以解决上述问题，它支持ESM规范，所以并不需要遍历依赖图，而是按需加载各种文件。

vite和webpack开发环境下的差异

初体验

mkidr vite-demo
cd vite-demo
npm init -y
npm i lodash

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite demo</title><link rel="stylesheet" href="./index.css">
</head>
<script src="./index.js" type="module"></script>
<body><h1>Hello Vite</h1>
</body>
</html>
// index.js
import { name } from './test'
console.log(name)

// test.js
import _ from 'lodash'
export const name = 'Armouy';
console.log(_)

html, body{margin: 0;padding: 0;
}

如果借助vscode中的live server插件启动这个项目，会报错：

GET http://127.0.0.1:5500/test net::ERR_ABORTED 404 (Not Found)

借助vite：

npm i vite --save-dev

修改package.json:

"scripts": {"dev": "vite","build": "vite build"
},

执行npm run dev,控制台输出成功~

Vite组成

vite主要有以下两个功能：

  • 一个开发服务器，基于原生ESM模块，省略了编译耗时，提供高效的模块热更新；
  • 使用Rollup打包，支持配置，可输出用于生成环境的高度优化过的静态资源。

特点

vite的最大的优点就是快，主要体现在以下两个方面：启动时间快和请求效率高。

启动时间快的原因

  • 无需在启动前构建依赖关系图：vite采用ESM规范方式提供源码，只有在浏览器请求时才会进行转换，即按需提供；
  • 预构建：vite在启动服务时会先预构建源码，将遇到的CommonJS或者UMD等模块化代码转为ESM规范，并保存在node_module/.vite/deps文件夹中；遇到多个ESM模块，会转为一个模块，比如lodash-es，不进行预构建，会一次性请求600次，预构建之后只会请求一次。

p.s. 对于node_moduls，浏览器时不支持ESM规范去请求它们的，如果支持的话会带来很大的网络性能问题，对于ESM里面具有其他依赖ESM的话，那么浏览器将会无限制地请求依赖库。
p.s. 在vite中也可以借助optimizeDeps.exclude字段来忽视某些内容的预构建。

请求效率高的原因

  • 前面提到过，预构建的时候会将构建好结果缓存在node_module/.vite/deps文件夹中，vite中利用了HTTP头来优化加载效率，源码模块的请求会根据304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求;
  • HMR热更新：（跟webpack一样，vite也有热更新机制，做法有些不一样，我们后面再讲）当编辑一个文件时，vite只需要精确地使已编辑模块与最近的HMR边界直接的链失活，就可以保持快速更新。

Vite如何识别文件

webpack中通过借助loader去读取各种文件。而vite对于css的处理有自己的一套方式，在vite搭建vue+ts的项目中，css的引入最后都会转为这种模式：
在这里插入图片描述
在这里插入图片描述
首先vite会使用fs模块读取.css文件的内容，然后创建一个style标签，将内容都怼到style标签内，再将这个标签插入到index.html中，最后还会将.css文件的内容转为JS脚本，便于css模块化和热更新，还避免了第三方工具对css的处理，提高了编译性能。

对于其他静态资源文件，除了svg，vite都是做到了开箱即用，引入即可使用（svg会对路径进行处理，需要区分是按照图片加载，还是按照svg加载）。

npm run dev的源码分析

本来想先写热更新等其他内容，想了想，还是先把源码分析写完，方便后面进行解释。
首先先说一下调试的步骤，这里直接在已有的项目中，配置了调试文件launch.json，program指向了vite所在的路径(是的我用的vscode）：

{// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "启动程序","skipFiles": ["<node_internals>/**"],"program": "${workspaceFolder}\\node_modules\\vite\\bin\\vite.js","outFiles": ["${workspaceFolder}/**/*.js"]}]
}

然后打断点开始调试，指向npm run dev的时候会指向vite/bin/vite.js，其中又指向了dist/node/cli.js，根据源码可知，入口文件是哪个了~
npm run dev入口文件

async function createServer(inlineConfig = {}) {return _createServer(inlineConfig, { ws: true });
}
async function _createServer(inlineConfig = {}, options) {const config = await resolveConfig(inlineConfig, 'serve');// ...
}

故一路分析下来，可以从resolveConfig开始看源码了：

async function resolveConfig(inlineConfig, command, defaultMode = 'development', defaultNodeEnv = 'development') {// .../*** 先加载项目目录的配置文件，* 即vite.config.js、vite.config.mjs、vite.config.ts、vite.config.cjs其中一个* 如果找不到会报错* 如果找到了会对自定义配置和用户配置做合并*/ const loadResult = await loadConfigFromFile(configEnv, configFile, config.root, config.logLevel);if (loadResult) {config = mergeConfig(loadResult.config, config);configFile = loadResult.path;configFileDependencies = loadResult.dependencies;}// .../*** 调整插件顺序，在vite中可以通过enforce: 'pre | post'来指定顺序，一般插件的顺序如下* 1. alias* 2. 带有enforce: pre的用户插件* 3. vite核心插件* 4. 没有带enforce值的用户插件* 5. vite构建用的插件* 6. 带有enforce: post的用户插件* 7. vite后置构建插件（最小化、manifest、报告等）*/const [prePlugins, normalPlugins, postPlugins] = sortUserPlugins(rawUserPlugins);// 这里的config字段，可以在自定义插件的时候改写vite的一些配置config = await runConfigHook(config, userPlugins, configEnv);// If there are custom commonjsOptions, don't force optimized deps for this test// even if the env var is set as it would interfere with the playground specs.if (!config.build?.commonjsOptions &&process.env.VITE_TEST_WITHOUT_PLUGIN_COMMONJS) {config = mergeConfig(config, {optimizeDeps: { disabled: false },ssr: { optimizeDeps: { disabled: false } },});config.build ?? (config.build = {});config.build.commonjsOptions = { include: [] };}// .../*** 处理alias，比如我配置了@指向src的配置，那么最后结果就是* find:* '@' replacement: 'D:\\code\\new\\vue-admin\\src'*/const resolvedAlias = normalizeAlias(mergeAlias(clientAlias, config.resolve?.alias || []));// .../*** 设置环境变量：* 读取环境变量，读取的优先级分别是 .env.[mode].local、.env.[mode]* 如果不存在对应 mode 的配置文件，则会尝试去寻找 .env.local、.env 配置文件* 读取到配置文件后，使用 doteenv 将环境变量写入到项目中；如果这些环境变量配置文件都不存在的话，则会返回一个空对象*/const userEnv = inlineConfig.envFile !== false && loadEnv(mode, envDir, resolveEnvPrefix(config));// ...// 整理构建配置const resolvedBuildOptions = resolveBuildOptions(config.build, logger, resolvedRoot);// ...// resolvedConfig 是最后要导出的配置项const resolvedConfig = { /** 省略 */ }const resolved = {...config,...resolvedConfig,};// ...return resolved;
}

分析完resolveConfig可以回到_createServer方法：

async function _createServer(inlineConfig = {}, options) {// 拿到了配置项const config = await resolveConfig(inlineConfig, 'serve');// ...以下讲解忽略服务端渲染// 如果不是服务渲染，会创建一个http server用户本地开发调试，同时创建一个webscoket用于热重载const httpServer = middlewareMode? null: await resolveHttpServer(serverConfig, middlewares, httpsOptions);const ws = createWebSocketServer(httpServer, config, httpsOptions);// ...// 监听本地项目文件的变动const watcher = chokidar.watch([root, ...config.configFileDependencies, config.envDir], resolvedWatchOptions);// 创建了一个server对象const server = { /** 可以启动本地开发服务，也可以负责热重载  */ }/*** 当文件发生改变的时候就会被wather监听到，然后调用onHMRUpdate方法* 而onHMRUpdate内部调用了handleHMRUpdate* handleHMRUpdate会触发插件热更新的钩子，去编译更新文件* 如果是需要全量更新则发送full-reload，否则发送update* 当客户端接收到full-reload则启动本地刷新，通过http加载全部资源（这里做了协商缓存）* 如果客户端接收的是update，则表示启动hmr,浏览器按需加载对饮的模块就行*/watcher.on('change', async (file) => {file = normalizePath$3(file);// invalidate module graph cache on file changemoduleGraph.onFileChange(file);await onHMRUpdate(file, false);});// 在不同的生命周期指调用不同的插件...// 对内部中间件的处理...通过 connect 库提供开发服务器，通过中间件机制实现多项开发服务器配置// 最后就是进行预构建依赖，使用esbuild预构建它们，并将 CommonJS / UMD 转换为 ESM 格式const initServer = async () => {// ..if (isDepsOptimizerEnabled(config, false)) {await initDepsOptimizer(config, server);}// ..})();return initingServer;};// ...
}

关于npm run build，其实流程也差不多，源码就不逐行分析了(有兴趣自行查看~)：

  • 使用resolveConfig收集了命令行配置、读取配置文件并合并配置；
  • 处理插件的的顺序、合并插件并设置环境变量；
  • 生成rollup构建配置；
  • 使用rollup编译产物并输出到指定目录。

预构建原理

vite借助esbuild进行了预构建，转换ts、jsx、tsx等，预构建有两种操作方式：

  1. 可以通过命令行vite optimize手动预解析
  2. 在createServer（npm run dev会执行）中也会进行预构建

从源码上可以看出，主要流程简单概括即：

  • 对项目中的依赖进行扫描，并存放在一个deps中；
  • 先把deps拍平成一维数组，调用build.context进行打包，输出打包的映射对象result；
  • 最后得到的依赖结果会被缓存起来，并存放在node_module/.vite/deps目录下。

在node_module/.vite/deps下有一个_metadata.json，这个文件可以根据请求路径，找到对应的预构建之后的文件：

{"hash": "2266f73a","browserHash": "20efa1a5","optimized": {"@element-plus/icons-vue": {"src": "../../@element-plus/icons-vue/dist/index.js","file": "@element-plus_icons-vue.js","fileHash": "32dcf906","needsInterop": false},"axios": {"src": "../../axios/index.js","file": "axios.js","fileHash": "2061b9bb","needsInterop": false},"element-plus": {"src": "../../element-plus/es/index.mjs","file": "element-plus.js","fileHash": "123c11eb","needsInterop": false},//...},"chunks": {"chunk-5OBJFL24": {"file": "chunk-5OBJFL24.js"},// ...}
}

热更新（HMR）原理

热更新指的是自动对页面上更改的模块进行替换，以达到刷新页面数据的效果，这个效果甚至是无感的。由上面的源码不难看出：

  • vite先执行createWebSocketServer创建一个webscoket服务端，并监听change事件；
  • vite在创建client.mjs文件时，会合并合并UserConfig配置，通过transformIndexHtml钩子函数，在转换index.html，这时会将client的代码注入到index.html中，这样浏览器访问index.html就会加载client生成代码，创建client和webscoket的的链接，便于接收webscoket服务端消息；
  • 当服务端监听文件变化的时候，就会给client发送消息，同时调用服务端调用onHMRUpdate函数，该函数会根据此次修改文件的类型，通知客户端是要刷新还是重新加载文件。

打包不选择Esbuild的原因

由于生产环境中，ESM的机制会导致额外的网络往返导致效率低下，故最好还是将代码进行进行 tree-shaking、懒加载和 chunk 分割（以获得更好的缓存)。Vite目前的插件 API 与使用 esbuild 作为打包器并不兼容。尽管 esbuild速度更快，但 Vite 采用了 Rollup 灵活的插件 API 和基础建设， Rollup 提供了更好的性能与灵活性方面的权衡。

性能优化

分包策略

正常情况下我们项目打包的时候，业务代码会跟第三方代码糅合咋一起，如果业务代码经常变，就会导致每次打包都会重新打包所有文件，会造成浏览器缓存失效，如果使用分包策略，将第三方代码单独打包，那么就可以解决上述问题：

// vite.config.js
export default defineConfig({...build:{ rollupOptions:{ output:{ assetFileNames:"[name]-[hash].[ext]", manualChunks:(id)=>{ if(id.indexOf('node_modules') !== -1){return 'vendor' }}}},},
})

gzip压缩策略

服务端对资源进行压缩，浏览器对资源进行解压。但是要注意，如果如果文件不是很大的话，开启这个插件，反而会由于浏览器解压文件，浪费时间。

import viteCompression from 'vite-plugin-compression';export default defineConfig （{...plugins: [viteCompression()],
}）

cdn加速

cdn策略简单讲就是多台服务器具有该资源，用户请求的时候会优先请求距离你距离最近的一台资源。跟webpack的优化策略一样，这里的前提是公司比较有钱哈哈哈，不然靠免费的cdn可能会遇到“挂掉”的风险。

总结

本文学习了vite的优点、简单分析了优点背后实现的原理，以及还有性能优化的方案。

参考

  • vite官网
  • vite源码
  • 晒兜斯（他的Vite系列很干货）
  • 前端构建工具vite进阶系列

如有错误，欢迎指出，感谢阅读~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/1862.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

解决IDEA连接数据库后，xml中写SQL语句不提醒数据库表字段问题

解决IDEA连接数据库后，xml中写SQL语句不提醒数据库表字段问题

有时候我们新建了一个项目&#xff0c;或者新建了一个工程&#xff0c;明明为此项目或者工程连接了数据库&#xff0c;并且一切正确&#xff0c;但是在xml中书写SQL语句就是不提示数据库表中的相关字段&#xff0c;无论是表名也好&#xff0c;还是字段名也好&#xff0c;通通不…
阅读更多...
计网之基础篇

计网之基础篇

因特网协议概述 常用协议应用层HTTP&#xff08;超文本传输协议&#xff09;、FTP&#xff08;文件传输协议&#xff09;、SMTP&#xff08;简单邮件传输协议&#xff09;、DNS&#xff08;域名系统&#xff09;、DHCP&#xff08;动态主机配置协议&#xff09;、SNMP&#xff…
阅读更多...
Learn Mongodb了解DB数据库 ④

Learn Mongodb了解DB数据库 ④

作者 : SYFStrive 博客首页 : HomePage &#x1f4dc;&#xff1a; PHP MYSQL &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;觉得文章不错可以点点关注 &#x1f44…
阅读更多...
openlayers：圆孔相机根据卫星经度、纬度、高度、半径比例推算绘制地面的拍摄的区域

openlayers：圆孔相机根据卫星经度、纬度、高度、半径比例推算绘制地面的拍摄的区域

本示例的目的是介绍演示如何在vue+openlayers中模拟圆孔相机的拍摄场景，根据卫星经度、纬度、高度、半径比例推算绘制地面的拍摄的区域。 直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果； 注意如果OpenStreetMap无法加载，请加载其他来练习 文章目录 示…
阅读更多...
【MySQL数据库】MySQL 高级SQL 语句一

【MySQL数据库】MySQL 高级SQL 语句一

[TOC](MySQL 高级SQL 语句 一、MySQL 高级SQL 语句1.1select -显示表格中一个或数个字段的所有数据记录1.2distinct不显示重复的数据记录1.3where有条件查询1.4and、or且 或1.5in 显示已知的值的数据记录1.6between 显示两个值范围内的数据记录1.7通配符&#xff0c;通常通配符…
阅读更多...
工业读码器的选择和使用注意事项有哪些？

工业读码器的选择和使用注意事项有哪些？

工业读码器是一种能够读取条形码、二维码等信息的设备&#xff0c;广泛应用于物流、生产制造、零售等行业。如何选择和使用工业读码器呢?下面是一些注意事项。 选择工业读码器 要根据应用场景选择合适的读码器类型&#xff0c;如手持式、固定式、手动旋转式等。 要考虑读取码的…
阅读更多...
文件批量下载方法 文件批量下载工具

文件批量下载方法 文件批量下载工具

软件版本&#xff1a;Internet Download Manager 在当今数字化时代&#xff0c;我们日常使用电脑进行各种工作和娱乐活动。有时候&#xff0c;我们需要从互联网上下载大量文件&#xff0c;例如电影、音乐、文档等。在这种情况下&#xff0c;手动逐个下载文件将变得繁琐而耗时。…
阅读更多...
优化--分类树，我从2s优化到0.1s

优化--分类树，我从2s优化到0.1s

1.前言 分类树查询功能&#xff0c;在各个业务系统中可以说随处可见&#xff0c;特别是在电商系统中。 但就是这样一个简单的分类树查询功能&#xff0c;我们却优化了5次。 到底是怎么回事呢&#xff1f; 2.背景 我们的网站使用了SpringBoot推荐的模板引擎&#xff1a;Thym…
阅读更多...
LIN诊断实现MCU本地OTA升级

LIN诊断实现MCU本地OTA升级

一、目标 通过PC端上位机实现MCU本地的OTA升级，本篇文章对实现的目的、需要用到的第三方工具、LIN诊断帧、升级协议、MCU端升级过程以及PC端升级过程做详细说明。 二、目的 最近在做MCU项目时需要将样机寄给客户进行验证，在客户的验证过程中要求参数可调试，如果需要修改软…
阅读更多...
proteus三级管（NPN）仿真LED灯串的开关

proteus三级管（NPN）仿真LED灯串的开关

实验里设置LED灯的导通电压为1.2V 打开仿真开关后可以看到&#xff0c;此时三极管不导通&#xff0c;LED灯亮了&#xff0c;并且电压表和电流探针有数值显示 按下按键&#xff0c;三级管导通&#xff0c;LED灯灭
阅读更多...
vue项目运行不起来，可能是版本等不兼容问题

vue项目运行不起来，可能是版本等不兼容问题

给pakeage.json 运行脚本前加上&#xff1a;set NODE_OPTIONS--openssl-legacy-provider && 即可。
阅读更多...
电商--抢购架构总结

电商--抢购架构总结

文章目录 背景业务流程业务难点技术难点技术方案技术方向具体落地客户端流控网关流控容器流控后端接口流控数据库流控 流控总结优化读取加速异步化流程处理系统扩容 压测监控 总结参考文献 背景 这是个在做NFT电商项目时遇到的场景&#xff0c;要求运营可以商家某个系列的NFT商…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023