vite介绍

• vite是站在巨人的肩膀上实现的~,分别是esbuild与rollup.
• vite开发环境采用no-bundle的方式,即无需打包,使开发编译速度得到很大提升,这是借助现代浏览器支持了esmodule的结果,但是这仅仅只是在处理源代码是这么做的,因为项目中node_modules引入的第三方包,并不一定是es版本的产物,即便是es版本的产物,那第三方库本身做了拆分,也会导致发出过多的请求,去请求第三方包的es文件(每加载一个es文件,都需要发起一个请求),所以,这边vite借助了esbuild,在编译前使用了预构建,将每一个第三方包,单独合并打包成一个es文件,之后将打包后的文件缓存在.vite文件夹中.以便在之后的构建中使用.
• vite中esbuild做了哪些事情? 1,预构建,2,文件编译,以往的编译工具太慢了,比如babel,tsc...利用esbuild可以达到快速编译.3,代码压缩,以往其他工具在生产环境进行压缩,js压缩一般都使用了terser,这个和babel都是自己单独使用了ast,所以造成重复解析的问题,现在统一采用esbuild,只进行一次解析,共用ast树.
• vite中rollup的作用,首先,虽然因为很多浏览器支持了esmodule,但是在生产环境完全no-bundle是不行的,所以vite生产环境打包借助了rollup来进行,用来实现,包括代码分割,treeShaking...并且,vite的插件机制是借鉴rollup来实现的,其中,rollup的部分插件支持直接在vite中使用,而vite的插件,完全支持在rollup中使用.

服务启动

vite默认引用外部index.html,在里面通过type="module"实现ES Module引入

如果需要修改,可以通过配置文件root属性修改

文件的支持

vite内置了很多文件的支持,例如js,ts,mjs..

但是, 对于ts只提供了编译能力,没有提供校验系统,所以需要借助tsc来进行编译前校验,vue借助vue-tsc

css

vite内置了css预处理器,但是由于需要按需引入,所以需要手动引入css工具库

静态资源

vite对大多数静态资源类型进行了内置处理,如果还有不支持的通过assetsInclude添加支持.

默认:如果静态资源体积 >= 4KB，则提取成单独的文件, - 如果静态资源体积 < 4KB，则作为 base64 格式的字符串内联,可以通过build.assetsInlineLimit自定义,注意,svg不受这个控制,始终打包成文件

图片压缩,vite-plugin-imagemin