本文旨在对一周vite源码学习的总结和提炼。
vite给我的最大印象就是简单。
优点
-
不同于传统打包方式,vite直接请求源码,返回过程中解析转化源码,而模块划分工作由浏览器提供。
-
依赖预构建,将AMD,commonjs等转成es module形式,对依赖进行强缓存,并缓存在node_module/.vite下,加快服务构建。
-
提供基于
es build
的hmr api,比传统的hmr过程更简单,反映更迅速。 -
使用esbuild转译ts,tsx,jsx,转译迅速,约是
tsc
速度的 20~30 倍。 -
内部构建了css 预处理器,tsx,jsx,postCss,css Module的支持,不用用户配置,开箱即用。
-
构建优化,CSS 代码分割,预加载指令生成,异步 Chunk 加载优化
-
采用rollup插件的使用格式,对理解插件,建立一个插件更简单。
-
使用.env文件添加环境变量,区分环境和模式,server!== development!
-
配置简单易上手,没有过多心智负担。
缺点
- ts无类型检测,需额外开启tsc检测服务。
- 无法定制特定文件的解析loader,有局限性。
- 无法集成lint插件。
- 服务现代浏览器,对低版本浏览器无效,最低支持
es2015
。 - 社区插件少,较比webpack还有一段发展时间。
我学到了什么
-
制作一个cli的启动流程、参数处理
-
预处理源码文件
-
基于es module的hmr实现原理
-
server middleare 分层处理不同文件类型,根据server router 返回相应资源
-
插件的运行机制
-
源码编译过程
阅读源码前的疑惑
-
hmr实现
-
如何加载html
-
如何预处理,预构建,文件缓存
-
server环境使用的middleware模式原理
-
server环境直接将未转化文件发至浏览器,如何解析
-
如何做到开箱即用