vite

尤雨溪的目标就是干掉webpack 打造一套完整的vue体系开发流程

viet中文官网

vite 特点：

• vite 冷服务启动 （开发的时候是不进行打包的）以模块的形式进行引入展示

• 开发中热更新

• 按需进行编译 不会刷新全部虚拟DOM

vite和webpack的对比

webpack：

给webpack一个入口文件，根据入口文件去寻找依赖模块 ，这些模块包含js，css，图片等等，通过loder和plugin进行打包，压缩成体积小的打包的文件，在开发阶段我们需要启动一个开发服务器，通过访问这个开发服务器把打包的结果交给开发者

（热替换）

在修改代码后修改的模块有依赖关系的相关的模块都要进行打包，所以在大型项目时打包也比较慢！

举个例子（1）

有些公司里项目比较大，来到公司先打包，然后开会，开完了，打包结束

vite：

vite没有打包过程，直接启动开发服务器（koa），vite和项目大小没有关系，因为它没有打包的过程，速度很快，然后接下来访问服务器展示页面

问题一：那么vite在我们访问服务器的时候， 他是如何给我们展示页面的呢？

开发阶段：

vite是这样做的 把root目录下的index.html文件给你,因为整个过程并没有打包，根据index.html依赖的文件进行加载运行，所以并没有打包的一个过程，有的只是加载文件编译的过程，

注意条件:有兼容性问题 开发阶段的时候需要

会导致浏览器会请求非常多的依赖加载但是因为开发的环境下是本地的，本地环境下去读取文件是非常快的 ， 肯定会比打包快很多

主html页面引入了主入口 index.js文件

在网络请求的时候 进行了

@modules开头的是为了方便浏览器去引入 从依赖包中引入

相对路径会改成绝对路径

对于CSS的引入直接编译成一个字符串 然后的导出

对于我们vue组件的引入直接编译成一个纯js

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

问题一 ：能不能在我们index.js文件中使用commonJS去引入模块，在webpack是可以进行commonjs的规范去引入的 因为 他是在node环境直接打包好，浏览器引入打包后的文件

引入方式

1 使用npm

npm init vite-app 项目文件名

2 使用yarn

yarn create vite-app 项目名

vite 2.0之后 引入方式

npm init @vitejs/app 项目名

yarn create @vitejs/app 项目名

配置文件

vite.config.js

\