前端构建工具技术（介绍篇）
构建工具：俗称打包。
理解：将模块文件进行合并，代码压缩，整合资源等一系列自动化操作。
为什么会出现构建工具这项技术？
我们希望看到页面加载平滑，快速进行响应。
通过：
1.编写代码的逻辑，避免无效浪费内存资源，即优化代码；
2.优化浏览器请求资源的速度；
原因： 首先浏览器加载资源 请求的文件数量越多越耗时，文件容量越大越耗时。但是为了我们前端项目结构清晰，我们一般会分成很多了文件代表不同的模块便于开发。所以为了解决与浏览器运行效率产生的矛盾，可以将文件进行合并，减少文件数量，将代码进行压缩，降低文件容量。
上述这工作理论上是可以人工完成的，但是它繁琐，工作量大，本质是无意义的劳动。
这个时候为了解决这个繁琐过程，人们就会去发明工具，所以构建工具相应出现了。
目的：提升项目性能，提高开发效率。
构建工具的发展
有了工具能满足基本的打包工作，对于开发人员而言总是需要更精益求精。就像在一辆能发动的车上去安装各种零件来提升使用者的体验。这些零件就是构建工具所需要的插件，这些插件对提升开发效率很有帮助，包括语法转换（Babel），模板热更新（HotModuleReplacementPlugin），清理重复的打包的文件（clean-webpack-plugin）等等。
构建工具目前来说还在处于不停发展的阶段，但是相应的打包技术已经很成熟。 本次主要介绍市面上比较火热的Grunt， Webpack, Vite这三个打包工具之间的对比和它们的优势。
构建工具介绍
Grunt: 是一个优化前端的开发流程的工具。
配置一系列的task，定义task处理的事务（例如文件压缩合并、启动server、版本控制等），然后定义执行顺序，来让Grunt执行这些task，从而构建项目的整个前端开发流程。
工作方式：
文章图片
Wepack: 是一种模块化的解决方案。更强调模块化。
把你的项目当做一个整体，通过一个指定的主文件名（index.js, 一般是入口文件），webpack 将从这个文件开始找到你的项目所依赖的文件，使用loaders 来处理它们，最后打包为一个浏览器可识别的js 文件。
文章图片
【前端构建工具技术（介绍篇）】Vite: 一种新型前端构建工具,它区别与不同的打包工具,它在开发环境中不对项目进行整体打包。
原因：当我们的构建的项目越来越庞大时，对整个项目进行资源整合的时间会变长，如果有数千个模块的项目在进行构建时甚至需要几分钟才能启动开发服务器。所以vite解决了在开发过程中需要等待整个项目打包这一段过程，让开发时更加丝滑。
依赖：使用esbuild（GO编写）预构建依赖，比 JavaScript 编写的打包器预构建依赖快 10-100 倍。
源码：在浏览器请求资源时-> vite转换一些非js文件->动态导入代码。
源码利用浏览器的协商缓存（304 Not Modified），依赖模块请求则会通过 Cache-Control: max-age=31536000, immutable 进行强缓存，保持热更新的速度。
文章图片
如何选择适合的构建工具？
Grunt对于一些中小型项目而言更加轻便和灵活，如果只针对代码压缩合并，Grunt就可以满足要求，发展历程长，基本是稳定的。但是如果要处理庞大的项目文件，特别是处理多种类型的资源文件，强调模块开发，Webpack则更适合这个场景。Webpack对于中大型项目而言是更加稳定的，文档资料和迭代速度也很快。当然这对开发人员而言也是挺头疼的，隔一段时间就需要去适应文档的配置。Vite作为一门新的构建技术，想要它去构建一门稳定的中大型项目有点冒险，虽然已经发布稳定版本，但是还是会有一些潜在的风险，等它更多人推广后使用更加稳妥，但是对于平时构建一些个人网站和项目等使用vite，感受一下它的便捷也可以。
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 孩子不是实现父母欲望的工具——林哈夫
- 最有效的时间管理工具（赢效率手册和总结笔记）
- 工具|后天就是七夕节，你准备好了吗（送上几个七夕代码，展示你技能的时候到了！）
- Jsr303做前端数据校验
- 工具分享｜5个有趣好玩的网站，拒绝无聊！
- Flutter的ListView
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 前端代码|前端代码 返回顶部 backToTop
- 工具人的一天