这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天
前端工程化
模块化
ESM、CommonJS、UMD
- 提供模块加载方案
- 兼容不同模块规范
资源编译
高级语法的编译
- 高级语法转译：
sass、ts - 资源加载：图片、字体
产物质量
代码体积、代码性能
- 产物压缩
- 无用代码剔除
tree sharking - 语法降级
babel
开发效率
热更新
理解Vite
组成部分
no-bundle开发服务，源文件无需打包- 生产环境基于
rollup的bundler
优点
- 高性能，
dev、热更新 - 简单易用（默认配置
Webpack常用功能包括一些最佳实践）
当前瓶颈
bundle带来的性能开销js单线程性能瓶颈
当下趋势
- 浏览器对原生
ESM支持 - 基于原生语言（
Golang，Rust）编写的前端工具链，如Go语言编写的Esbuild（打包器、编译器、压缩器）、Rust的SWC
特性
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
esbuild不支持类型检查，因此在生产环境构建时需要先调用tsc，不支持语法降级至ES5
Vite插件开发
- 抽离核心逻辑
- 易于拓展
- 插件钩子类似
React
总结
在使用webpack作为开发构建工具时，dev server都要等一会，项目越大等的时间越长。热重载页有几秒的延迟。
但是如果用vite来做开发构建工具，dev serevr秒开，热重载也很快。这种开发体验很棒，减少了大量等待的时间。
Vite前提是浏览器原生支持ESM了，启动项目不用webpack构建工具先构建，浏览器直接请求路由对应的代码文件，代理服务器针对单个文件进行编译返回。如果请求的文件import了其他文件，同理浏览器继续发请求，代理服务器返回。就这样实现了npm run dev时无需编译，实时请求实时编译的最终效果。
