01浅谈构建工具
模块化ESM、commonjs、UMD
1. 提供模块加载方案
2. 兼容各不同模块规范
资源编译 高级语法的编译
1. 高级语法转译,如sass、typescript
2. 资源加载,如图片、字体、worker
产物质量 代码体积、代码性能
产物压缩、无用代码删除
语法降级
开发效率 热更新
02vite概要介绍
定位:新一代前端构建工具
两大部分组成
1. no-bundle开发服务,源文件无需打包
2. 生产环境基于rolluo的bundler
核心特征
1. 高性能,dev启动速度和热更新速度非常快
2. 简单易用,开发者体验好
当下问题
缓慢的启动——项目编译等待成本高
缓慢的热更新——修改代码后不能时时更新
瓶颈
1. bundle带来的性能开销
2. JavaScript语言的性能瓶颈
浏览器原生ESM支持
两大要素
1. Script标签增加type-moudule属性
2. 使用ESM模块导入导出语法
基于原生ESM的开发服务优势
1. 无需打包项目源代码
2. 天然的按需加载
3. 可以利用文件及的浏览器缓存
基于Esbuild的编译性能优化
Esbuild——基于Esbuild的编译性能具有以下能力
1. 打包器bundler
2. 编译器transformer
3. 压缩器minifier
性能极高,在vite中被深度使用