前端构建工具与选型

#为什么需要前端构建工具？有哪些构建工具？主流是什么？如何选型？#

构建工具有哪些

Webpack
Gulp
Rollup 
Vite
Esbuild

为什么需要前端构建工具？

性能优化

将前端的各种文件打包成一个文件，减少http请求数量，还可以压缩

兼容性

不管是js还是ts等语言编写的，转换成浏览器都能识别的语言

工程化

提高开发效率，不仅仅是构建打包，还有开发态热更新HMR等

与模块化息息相关

模块化
2009年，node.js发布commonJS模块定义规范，相关概念随之出现

发展：commonJS->AMD/CMD->ESM

主流对比

共同点：都用于应用构建

差异点：

Webpack	Vite
高度可配置 配置复杂 过程安全，成熟度稍微更高	构建速度快

构建速度是绝杀！！！

题外话：Farm性能也特别好，但是生态活跃度都非常少，不建议，连续性使用有风险

选型建议

1.新项目使用vite
2.已用webpack
 ①swc替换babel，有明显性能提升
 ②切换vite，我们项目目前就在做这个替换工作，毕竟要紧跟时势
 ③关注社区活跃度，你也不知道会不会哪一点它就不更了……③
3.尝鲜
Rolldown，玩玩先，还不成熟，不排除未来趋势

前端更新迭代确实快，不像JAVA、C无法撼动的老大哥地位，谁大学不是从C先入门呢，然后再JAVA精进，但这也是前端的魅力之一，驱动学习（好的好的，不是强迫的