构建工具是前端工程项目的标配
构建工具包括
- 远古时代的 borwserify 、 grunt
- 传统的 webpack 、rollup 、parcel
- 现代的 esbuild、vite
当前前端工程化项目痛点
- 模块化需求 （ESM、CommonJS、AMD、CMD） 不仅要落实模块规范、保证模块正常加载；还要兼容不同的模块规范，适应不同执行环境
- 兼容浏览器，编译高级语法 高级语法（TS、JSX、SCSS...）在浏览器中运行需要转化为浏览器理解的形式
- 线上代码质量问题 浏览器版本差异、代码兼容性和安全策略的不同、线上代码的质量问题 将是前端工程中长期存在的问题
- 开发效率 项目的冷启动/二次启动、热更新所消耗的时间
关于痛点，构建工具的解决方法
| 痛点 | 解决方式 |
|---|---|
| 模块化方案 | 1、提供模块加载方案；2、兼容不同模块规范 |
| 语法转译 | 1、高级语法转译，如 sass、ts 2、资源加载。如图片、字体、worker |
| 产物质量 | 产物压缩、 代码混淆、Tree Shaking、 语法降级 |
| 开发效率 | HMR、构建提速 |
传统构建工具与vite相比较
webpack的启动速度慢？
- 项目冷启动时必须递归打包整个项目依赖树
- js 语言本身的性能限制、导致构建性能遇到瓶颈，直接影响开发效率
vite如何解决编译速度？
- Vite在开发阶段基于浏览器原生ESM的支持实现了 no-bundle服务
- 借助 Esbuild 超快的编译速度来做 第三方构建 和TS/JSX语法编译,从而能够有效提高开发效率
vite的模块化
vite基于浏览器原生的ESM的支持实现模块加载，并且无论是开发环境还是生产环境，都可以将其他格式的产物（如CommonJS）转化为ESM
语法编译
vite内置了对 ts、jsx、sass等高级语法支持，也能够加载各种各样的静态资源，如图片、font等
产物质量
vite基于成熟的打包工具Rollup实现环境打包、同时可以配合Terser、Babel等工具链
