先从浏览器出发

浏览器是由浏览器内核和JS引擎组成浏览器内核编译解析html代码和css代码js引擎编译解析JavaScript代码所以从本质上浏览器只能识别运行JavaScript、CSS、HTML代码。

而我们在编写项目时用到了lessts等扩展语言vue等js框架es6等低版本浏览器不能兼容的js语法以及为了提高项目性能做的代码压缩,图片资源压缩等把这些源代码转换成可以执行的JavaScript、CSS、HTML

代码转换将

提取多个页面的公共代码提取首屏不需要执行部分代码让其异步加载。

模块合并在采用模块化的项目里会有很多个模块和文件需要通过构建功能将模块分类合并成一个文件。

代码校验在代码被提交到仓库前需要校验代码是否符合规范以及单元测试是否通过。

自动发布更新代码后自动构建出线上发布代码并传输给发布系统。

2、Vite和Webpack对比

构建速度项目启动速度和热更新速度

交给本地服务器进行渲染;随着模块的增多打包出的bundle文件会越来越大造成启动速度和热更新速度越来越慢webpack用js代码编写。

Vite

请求模块时按需动态编译显示。

通过在一开始将应用中的模块区分为依赖和源码两类请求某个模块时再对该模块进行实时编译因为现代游览器本身支持ES-Module所以会自动向依赖的Module发出请求使用esbuild预构建依赖esbuild也是一种js构建工具不过是用go纯机器码语言编写以原生的ES

上手度简易程度

vite的配置相对来说更加简单具体的配置方法请见官网webpack中文官网

vite官网

vite是尤大大在2021年时推出的新一代前端构建工具相对于webpack来说推出时间距今非常的短缺少很多扩展功能Webpack

的生态环境更加成熟在社区中拥有广泛的支持和丰富的插件库。

可以处理多种类型的文件和资源。

浏览器兼容性

Promise。

如果你想要支持旧版本浏览器在使用这些表达式之前还需要

提前加载

的。

所以vite很多低版本的浏览器并不兼容vite也可以对这个问题进行配置。