[陈同学i前端] 一起学Vite｜原来这玩意叫依赖预构建

theme: smartblue

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

前言

大家好，我是陈同学，一枚野生前端开发者，感谢各位的点赞、收藏、评论

近年来，前端领域技术更新迭代节奏较快，前端工程师们为了更好的进行项目开发、测试、构建、部署，开发出了各种各样的构建工具

像常见的Webpack、Rollup、Esbuild、Vite，每一类工具都有它的特点，均致力于提高前端领域的工程化水平

而工具出现的目标是解决前端工程当中的一些影响通性问题

常见的痛点（需求点）有：模块化需求（ESM）、兼容高级语法、代码质量测试、静态资源处理、代码压缩、开发效率等

本节我们继续进行Vite知识的学习，具体安排如下：

• 一起学Vite｜初识下一代的前端工具链
• 一起学Vite｜原来这玩意叫依赖预构建（本节）
• 一起学Vite｜实现第一个Vite插件
• 一起学Vite｜插件流水线
• 一起学Vite｜HMR，你好👋
• 一起学Vite｜模块联邦——代码共享的终极解决方案
• 一起学Vite｜简单手写开发服务器
• 一起学Vite｜简单手写打包器

本文阅读成本与收益如下：

阅读耗时：7mins

全文字数：5k+

预期效益

• Vite为什么需要预构建
• 如何使用Vite预构建功能
• Vite预构建功能相关的配置
• Vite预构建流程

环境

Vite版本：v3.2.3

Node版本：v16.16.0

pnpm版本：v7.9.0

为什么要进行依赖预构建

由于Vite的开发服务是基于浏览器原生ES模块处理能力来实现的，故在使用开发服务器加载的模块资源理应全都为ESM格式的模块

问题

1. 第三方依赖（node_modules）可能存在无ES格式产物的情况

这种情况下在使用开发服务器时这类型的第三方依赖（无ES格式产物）便无法被解析执行

2. 请求瀑布流问题

当第三方依赖的运行需要了很多其它依赖，所涉及import模块的数量较多时会触发大量的请求

而像Chrome限制了同一域名下最多只能并发6个HTTP请求，最终导致性能下降

解决

为了解决以上两个问题，依赖预构建做了两件事情：

• 将非 ESM 格式(如CommonJS)的产物转换为 ESM 格式，使其能被浏览器通过