webpack 和 vite Vite 的原理 Vite 在开发环境下利用了浏览器原生支持 ES 模块的特性，将应用中的模块分为两类： 依赖模块：使用 ESBuild 预构建。ESBuild 使用 Go 编写，构建速度非常快。 源码模块：Vite 将源码模块以原生 ESM 的方式提供给浏览器，让浏览器去加载模块，然后利用浏览器对 ESM 的支持，在需要时由浏览器向服务器发送请求获取模块。同时，Vite 在服务器端拦截这些请求，进行相应的转换（如将 Vue 文件拆分为多个请求）和处理（如 TS 转 JS）。 这样，在开发过程中，Vite 只需要在浏览器请求时按需编译返回文件，而不需要像 Webpack 那样提前打包整个应用。因此，Vite 的启动速度非常快。

在生产环境下，Vite 使用 Rollup 进行打包，因为 Rollup 在构建方面有更成熟的能力和优化。 Vite 的特点 快速的冷启动：利用 ESM 和预构建，启动速度极快。 即时热更新：利用 ESM，只更新修改的模块，不会重新加载整个页面。

按需编译：只编译当前页面需要使用的文件。 Webpack Webpack 是一个静态模块打包器，它将所有模块及其依赖打包成一个或多个 bundle。 Webpack 的原理 Webpack 的核心原理是将所有资源（JS、CSS、图片等）都视为模块，通过加载器（loader）和插件（plugin）进行转换和优化，最终打包成一个或多个 bundle。 在开发环境下，Webpack 会将代码打包到内存中，并通过热模块替换（HMR）实现热更新。Webpack 需要先构建整个应用（至少是入口文件及其依赖），然后才能启动开发服务器。