Open chenfei-hnu opened 3 years ago
背景：使用webpack打包时，需要将入口相关的文件都打到一个bundle.js文件中，所以每个很小的改动都需要进行整个模块重新打包，效率较低。因此产生以ESM 为理论基础的打包构建工具，要求项目完全由ES模块组成。根据入口文件的import语句，进行引用模块的加载，加载的模块记录，将被放置在模块图中。这意味着后续用到此模块的组件都从此处请求，从该映射中拉出复用，解析时附带对应的状态转换成模块实例进行使用。因为不需要打包，在开发环境下速度很快，生产环境通常还是借助webpack bundle式的打包。
Vite的基本实现原理，就是启动一个Koa服务拦截浏览器对ES模块的请求。通过查找目录下对应文件的文件做一定的处理最终以ES模块格式返回给客户端，使用esbuild进行打包。因为底层使用go这样的静态语言开发，因此打包效率较高。
通俗来讲，执行npm run dev命令后，Vite先把本地server启动，之后通过项目的入口收集依赖，把没有提供esm格式的依赖和内部大量的依赖提前打包，这个过程成为：预优化(Pre-Bundling)。预优化后在页面需要加载依赖时，通过http方式把资源请求回来，做到了真正的按需加载。
特点 1.快速的冷服务器启动 2.即时热模块更换 3.真正的按需编译
由于模块依赖了另一些模块，依赖的模块又基于另一些模块，会出现页面初始化时一次发送多个模块请求的情况。为了优化这个情况，可以直接使用vite Optimize使用它，提前将package.json中依赖项打包成一个esmodule模块，这样在页面初始化时能减少大量请求。
由于 Vite 在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译。因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。
这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，Vite 的优势越明显。
在 HMR（热更新）方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。
已有项目迁移，使用 cli 工具：wp2vite
背景：使用webpack打包时，需要将入口相关的文件都打到一个bundle.js文件中，所以每个很小的改动都需要进行整个模块重新打包，效率较低。因此产生以ESM 为理论基础的打包构建工具，要求项目完全由ES模块组成。根据入口文件的import语句，进行引用模块的加载，加载的模块记录，将被放置在模块图中。这意味着后续用到此模块的组件都从此处请求，从该映射中拉出复用，解析时附带对应的状态转换成模块实例进行使用。因为不需要打包，在开发环境下速度很快，生产环境通常还是借助webpack bundle式的打包。
Vite的基本实现原理，就是启动一个Koa服务拦截浏览器对ES模块的请求。通过查找目录下对应文件的文件做一定的处理最终以ES模块格式返回给客户端，使用esbuild进行打包。因为底层使用go这样的静态语言开发，因此打包效率较高。
通俗来讲，执行npm run dev命令后，Vite先把本地server启动，之后通过项目的入口收集依赖，把没有提供esm格式的依赖和内部大量的依赖提前打包，这个过程成为：预优化(Pre-Bundling)。预优化后在页面需要加载依赖时，通过http方式把资源请求回来，做到了真正的按需加载。
特点 1.快速的冷服务器启动 2.即时热模块更换 3.真正的按需编译
由于模块依赖了另一些模块，依赖的模块又基于另一些模块，会出现页面初始化时一次发送多个模块请求的情况。为了优化这个情况，可以直接使用vite Optimize使用它，提前将package.json中依赖项打包成一个esmodule模块，这样在页面初始化时能减少大量请求。
由于 Vite 在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译。因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。
这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，Vite 的优势越明显。
在 HMR（热更新）方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。
已有项目迁移，使用 cli 工具：wp2vite