webpack与 vite 的区别

最新推荐文章于 2024-06-11 13:54:57 发布

SZR___ __ ___

最新推荐文章于 2024-06-11 13:54:57 发布

阅读量5k

点赞数 5

本文链接：https://blog.csdn.net/qq_41189996/article/details/115718987

版权

原文:https://blog.csdn.net/qq_41499782/article/details/109593388

webpack原理图

在这里插入图片描述

vite 原理图

在这里插入图片描述

区别

webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显
由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。(代码需开启本地服务才能运行，否则会产生跨域错误)

//浏览器本身支持ES Module ,可以直接引入
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
<script type="module">
  import {addTextToBody} from './1.js';

  addTextToBody('Modules are pretty cool.');
</script>
</html>

export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

vite是按需加载，webpack是全部加载：在HMR（热更新）方面，当改动了一个模块后，vite仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。
vite的优势在开发环境：当需要打包到生产环境时，vite使用传统的rollup（也可以自己手动安装webpack来）进行打包，因此，vite的主要优势在开发阶段。另外，由于vite利用的是ES Module，因此在代码中（除了vite.config.js里面，这里是node的执行环境）不可以使用CommonJS

SZR___ __ ___

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
webpack与 vite 的区别

原文:https://blog.csdn.net/qq_41499782/article/details/109593388webpack原理图vite 原理图区别webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显由于现代浏.
复制链接

扫一扫