简单了解Vite

一：介绍

• 全新的web开发构建工具。（和webpack功能类似，但也有区别）

• 本地开发时：提供一个临时的本地服务器；

• 生产环境时：使用Rollup进行项目的打包

二：安装

• npm init vite-app demo

三：特点

• 快速的冷启动

• 即时的模块热更新

• 真正的按需编译

四：与webpack原理的区分：

      先看图：

      （1）webpack原理图

          （2）vite原理图

 

 解析：从两图对比得知，

1. webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。而vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。（按需编译）
2. 由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。
3. 由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。
4. 在HMR（热更新）方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。
5. 当需要打包到生产环境时，vite使用传统的rollup（也可以自己手动安装webpack来）进行打包，因此，vite的主要优势在开发阶段。另外，由于vite利用的是ES Module，因此在代码中（除了vite.config.js里面，这里是node的执行环境）不可以使用CommonJS

  

五：启动时间（vite比webpack的执行时间短，可为开发者提高效率）

 

 webpack(图一)     vite(图二)

 

 六：vite 的index.html 不在public目录下

 

vite(图一)     vue(图二) 

 

 

 这是官网截取的有关inde.html置于public目录外的解释。