如果你想学到更多实用前端知识。
可以关注我的公众号:【前端驿站Lite】,一个不止分享前端的地方 ᕦ( •̀∀•́)ᕤ
阅读收获
阅读完本篇文章,你将会有以下收获:
- 前端常见工具之间的定位与联系,如webpack、rollup、vite、esbuild、vue-cli等。
- 从运行原理、构建方式、HMR热更新机制、使用成本等方面逐一去分析,vite与webpack之间的差异。
前言
vite比webpack快?
vite比webpack简单?
今天我们就来分析一下,到底有什么不一样的地方!
定位
对比之前,我们先要搞懂,vite与webpack的定位以及关系才可以。
那前端社区中常谈到的这些工具webpack
、rollup
、parcel
、esbuild
、vite
、vue-cli
、create-react-app
、umi
他们之间的关系是怎样的。
-
webpack
、rollup
、parcel
、esbuild
都是打包工具,代码写好之后,我们需要对代码进行压缩
、合并
、转换
、分割
、打包
等操作,这些工作需要打包工具去完成。 -
vue-cli
、create-react-app
、umi
是基于webpack
的上层封装,通过简单的配置就可以快速创建出一个项目,把更多的时间放在业务开发上。 -
vite
开发环境依赖esbuild
进行预构建,生产环境则依赖rollup
进行打包,并且充分利用了现代浏览器的特性,比如http2
、ES module
,vite
是站在众多巨人肩膀上的一个产物, 类似webpack + webpack-dev-server
的结合体,是一个非常棒的前端项目的构建工具。
运行原理
首先,我们从运行原理上分析一下&