Vite构建工具

vite是一个开箱即用的新型前端构建工具.

vite官网https://cn.vitejs.dev/guide/

当开发企业级项目时推荐使用create vite进行vite脚手架构建,其中内置了vite的默认配置,

是快速生成主流框架基础模板的工具.

npm create vite@latest

yarn create vite

vite在进行构建的时候会进行以下几个步骤

1.vite支持esmodule的导出类型,不同的第三方包需要遵守第三方的导出格式,所以vite在import这些三方包的时候会统一调用esbuild(go语言处理js语法的库)处理成esmodule的导出格式,

同时放在node _modules中的vite文件中方便路径重写

2.解决网络多包传输的问题(依赖预构建)

浏览器在引入js文件时通常通过http请求获取资源,在我们使用esmodules格式去引入三方依赖包的时候、有可能第三方还import了其他的依赖,就会导致浏览器不停的去请求、下载依赖,导致网络请求的性能浪费.

使用vite构建的时候,vite不管你有多少个export和import ,vite都会尽可能的将这些依赖集成处理,最后只剩成一个或者几个模块,减少http请求的次数.