Vite构建速度快的秘密

Vite为什么快

在webpack项目非一级页面中，加入以下代码

import A from './a'
console.log(A);

在项目进入首页便会报如下的错误

而Vite也用如上的操作，但仅在进入该代码的页面才会报错，因此可得——

webpack在开发构建时，默认回去抓取并构建你的整个应用，然后才能提供服务。这就是导致你的项目中，存在的任何一个错误（即使这个错误是用户从来都没有进入过的页面出现的），它依旧会影响到你的整个项目构建。因此，你的项目越大时，构建的时间就会越长，你的项目启动速度也会越慢。

vite不会在一开始就构建你的整个项目，而是会将应用中的模块区分为依赖和源码（项目代码）两部分，对于源码部分，它会根据路由来拆分代码模块明知会去构建一开始就必须要构建的内容。
同时vite以 原生ESM 的方式为浏览器提供源码，让浏览器接管了打包的部分工作。这样的机制，无论你的项目有多大，它只会构建一开始必须要构建的内容，这让vite在构建时的速度大大提升了。

这种方式存在的问题

（早期的vite存在）vite以原生ESM的方式为浏览器提供源码，让浏览器接管了打包的部分工作，若项目中存在commonJS的内容，便无法解析！！！

官方的解决方案

vite在后期提供了依赖预构建的功能，其中一个非常重要的目的就是为了解决CommonJS和UMD兼容性问题。目前vite会将CommonJS或UMD发布的依赖项转化为ESM之后，再重新进行编译。

学习记录~~~