vite

1.背景：为什么出现vite (结合模块化的发展讲讲)

webpack做的事情：实现模块化（模块化历史，以及webpack中怎么实现模块化的） && make 编译 && seal 打包

当前webpack构建存在的问题 浏览器支持对原生ES模块的加载

模块的加载机制：
即怎么识别import关键字执行导入，拿到对应的export导出，在浏览器中老版中是执行到import中是直接报错的，因此需要webpack自己实现import编译翻译给浏览器听（对应模块化历史） 浏览器的模块化加载：

2.vite和webpack的共同点

两者本质上来说都属于构建工具，而构建的目的从结果上来看都是希望将文件转化为浏览器能够解析的js，css。但是从过程上来看： webpack需要通过编译&&打包才能实现这个目的。 vite则只需要编译，不需要打包就能实现这一个目的。

3.vite和webpack的区别

问题1：为什么vite在开发环境使用esbuild构建，在生产环境使用rollup构建？

其实这可以拆分出两个问题：

1）为什么生产环境不能使用ES模块请求，还是依然需要整体构建 (编译&打包) ？

主要出于极端情况下的性能考虑，如果在业务代码中存在模块引用嵌套层级过深的情况，那么就会导致发出的ES-Module请求数量变多，失去了请求文件数量和文件体积之间的平衡，导致性能较差(且浏览器统一域名最多一次性发送6个请求)。 因此出于性能考虑，建议线上还是使用整体构建打包，通过tree-shaking、splitchunk优化。

（2）即使生产环境需要构建，那为什么不用esbuild构建，而是使用rollup构建？

esbuild缺点：
vite对esbuild的一个主要用途就是预构建阶段对依赖进行快速构建。vite将代码分为源码和依赖两部分并且分别处理。依赖便是应用使用的第三方包，一般存在于node_modules 目录中，一个较大项目的依赖及其依赖的依赖，加起来可能达到上千个包。esbuild虽然快，但是也存在如下问题：

• Code splitting ，Css content type 问题较多
• ESbuild 没有提供 AST 的操作能力-----------不能兼容一些低版本浏览器（ESbuild 只能将代码转成 es6） 后果就是，Esbuild 当下与未来都不能替代 Webpack 等高层构建工具，它不适合直接用于生产环境，而更适合作为一种偏底层的模块打包工具，需要在它的基础上二次封装

其他知识点：

import和import（）的区别

开发模式下 vite 比 webpack 快的原因

1. vite 不需要做全量的打包，这是比 webpack 要快的最主要的原因；
2. vite 在解析模块依赖关系时，利用了 esbuild，更快（esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍）；
3. 按需加载；模块之间的依赖关系的解析由浏览器实现。Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。
4. 充分利用缓存；Vite 利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。

5. vite 对比 webpack ，优缺点在哪

优点：

1. 更快的冷启动：Vite 借助了浏览器对 ESM 规范的支持，采取了与 Webpack 完全不同的 unbundle 机制
2. 更快的热更新：Vite 采用 unbundle 机制，所以 dev server 在监听到文件发生变化以后，只需要通过 ws 连接通知浏览器去重新加载变化的文件，剩下的工作就交给浏览器去做了。

缺点：

1. 开发环境下首屏加载变慢：由于 unbundle 机制，Vite 首屏期间需要额外做其它工作。不过首屏性能差只发生在 dev server 启动以后第一次加载页面时发生。之后再 reload 页面时，首屏性能会好很多。原因是 dev server 会将之前已经完成转换的内容缓存起来
2. 开发环境下懒加载变慢：跟首屏加载变慢的原因一样。Vite 在懒加载方面的性能也比 Webpack 差。由于 unbundle 机制，动态加载的文件，需要做 resolve、load、transform、parse 操作，并且还有大量的 http 请求，导致懒加载性能也受到影响。
3. webpack支持的更广。由于 Vite 基于ES Module，所以代码中不可以使用CommonJs；webpack更多的关注兼容性, 而Vite 关注浏览器端的开发体验。Vite目前生态还不如 Webpack。

生产环境

vite生产环境下，为什么使用rollup打包呢？

Rollup 是一款 ES Module 打包器， 从作用上来看，Rollup 与 Webpack 非常类似。不过相比于 Webpack，Rollup要小巧的多，打包生成的文件更小。 因为小巧，自然在这种特定的打包环境下，Rollup的打包速度也要比 Webpack 快很多。

vite正是基于es module的特性实现的，所以使用rollup要更合适一些。

vite生产环境下，为什么不用esbuild打包呢？

尽管esbuild的打包速度比rollup更快，但 Vite 目前的插件 API 与使用 esbuild 作为打包器并不兼容，rollup插件api与基础建设更加完善，所以在生产环境vite使用rollup打包会更稳定一些。

如果后面esbuild基础建设与生态更加完善后，esbuild还是更有优势的。

所以使用vite可能会带来开发环境与生产环境打包结果不一致的问题。