vue3学习—vite原理

一、vite原理

要了解vite首先从webpack讲起，具体的webpack可以翻阅我的笔记。下面我们简单回忆下webpack的知识。

1、webpack

以如下示例：

// index.js
console.log("index");
require("./a");
require("./b");

// a.js
require("./b");
console.log("a");
module.exports = "a";

// b.js
console.log("b");
module.exports = "b";

/src/index.js 通过–>AST -->树形结构遍历，找到依赖[ ‘./src/a.js’ ]和[ ‘./src/b.js’ ]
最后形成下面转换后内容

console.log(“index”);
_ _webpack_require("./src/a.js");
_ _webpack_require("./src/b.js");

然后发现入口文件index.js依赖a和b，于是又加载a和b…
最后

生成一个资源列表assets，资源列表可以理解为是生成到最终文件的文件名和文件内容；最终webpack将利用node中的fs模块（文件处理模块），根据编译产生的总的assets，生成相应的文件。

所以在之前的构建工具如vue-cli开启服务因为要寻找模块、分析模块在生成相应的打包文件，导致构建速度受到了影响！ 如下图：

2、vite

在vite中颠覆了以往的构建模式，直接访问入口，然后发现入口文件需要其它依赖时，再去引入，从而大大减小了构建时间。如下：

在一个用vite新创建的项目中运行，打开服务页面：从network我们发现，该服务会一个一个导入页面需要的文件，并且会编译文件（没有打包），如将modules的依赖用@，css依赖用import等，方便服务器编译后返回给页面。所以vite的构建速度远远快于webpack

3、webpack和vite的比较

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

4、提问：vite中能使用commonJs

因为是浏览器去请求依赖，vite利用的是ES Module，因此在代码中不可以使用CommonJS。

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！