一、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的比较
- webpack会先打包,然后启动开发服务器,请求服务器时直接给予打包结果。
而vite是直接启动开发服务器,请求哪个模块再对该模块进行实时编译。 - 由于现代浏览器本身就支持ES Module,会自动向依赖的Module发出请求。
vite充分利用这一点,将开发环境下的模块文件,就作为浏览器要执行的文件,而不是像webpack那样进行打包合并。 - 由于vite在启动的时候不需要打包,也就意味着不需要分析模块的依赖、不需要编译,因此启动速度非常快。
当浏览器请求某个模块时,再根据需要对模块内容进行编译。这种按需动态编译的方式,极大的缩减了编译时间,项目越复杂、模块越多,vite的优势越明显。 - 在HMR方面,当改动了一个模块后,仅需让浏览器重新请求该模块即可
不像webpack那样需要把该模块的相关依赖模块全部编译一次,效率更高。 - 当需要打包到生产环境时,vite使用传统的rollup进行打包,因此,vite的主要优势在开发阶段。
4、提问:vite中能使用commonJs
因为是浏览器去请求依赖,vite利用的是ES Module,因此在代码中不可以使用CommonJS。
博主开始运营自己的公众号啦,感兴趣的可以关注“飞羽逐星”微信公众号哦,拿起手机就能阅读感兴趣的博客啦!