项目的构建是我们前端逃不开的话题。
自从我们进入了前端框架时代,构建是我们逃不开的问题,因为前端应用越来越复杂。
最近公司在从webpack过渡到vite.以下是我对他们的认识:
what:
- webpack是一个JavaScript应用程序的静态模块打包工具,它会对整个应用程序进行依赖关系图构建。
- vite是构建工具的高阶封装,使用简单,快(开发的时候感觉没有编译过程),便于扩展。而他集成的esbuild(Go 编写) 预构建依赖,比node快 10-100 倍。
和webpack的区别:
vite
关注的层级更高:vite是 high level api,关注的是如何快速方便的搭建项目,相比webpack,减少了很多配置量。
webpack
关注的层级更低:webpack是low level api,因为webpack更关注的是各种功能的实现,重点放在构建上。
它本身并不参与编译,它的编译能力只是集成了rollup和ESbuild的功能.
对比webpack在dev-serve的时候,会提交所有编译的文件,而vite在dev-serve的时候利用了浏览器的native ES module功能,在浏览器请求对应的url时才提供文件,实现了根据路由的懒加载,所以启动的时候是超快的。
对比webpack的热更新,热更新时,把改动过模块的相关依赖模块全部编译一次。而vite热更新时,仅让浏览器重新请求改动过的模块。
现在公司项目从webpack过渡到vite,还在不断摸索爬坑中,虽然目前vite的生态不如webpack丰富,且实用的开发者也不及webpack。
但是不可否认的是,相比于webpack, vite非常适合项目的开发,webpack适合工具的开发。
- vite为构建项目而生
- webpack为构建工具而生