共计 1540 个字符，预计需要花费 4 分钟才能阅读完成。
构建工具：俗称打包。
了解：将模块文件进行合并，代码压缩，整合资源等一系列自动化操作。
为什么会呈现构建工具这项技术？
咱们心愿看到页面加载平滑，疾速进行响应。
通过：
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，感受一下它的便捷也能够。