当前位置: 首页 > Web前端 > HTML

前端构建工具技术(介绍)

时间:2023-03-29 12:36:49 HTML

构建工具:俗称打包。理解:合并模块文件、压缩代码、整合资源等一系列自动化操作。为什么会有一种叫做构建工具的技术?我们希望看到页面加载顺利并快速响应。通过:1.编写代码的逻辑,避免内存资源的无效浪费,即优化代码;2.优化浏览器请求资源的速度;原因:首先,浏览器加载资源请求的文件越多越费时,文件容量越大越费时。耗时。但是为了我们的前端项目结构清晰,我们一般会把它分成很多代表不同模块的文件,方便开发。因此,为了解决与浏览器运行效率的冲突,可以合并文件减少文件数量,压缩代码减少文件容量。上述工作理论上可以人工完成,但繁琐、工作量大,本质上是无意义的劳动。这时,为了解决这一繁琐的过程,人们就会发明工具,于是施工工具应运而生。目的:提高项目性能,提高开发效率。构建工具的开发有了能够满足基本打包任务的工具,开发者总是需要更加精细化。就像在汽车上安装各种零件一样,可以开始改善用户的体验。这些部分是构建工具需要的插件。这些插件对提高开发效率非常有帮助,包括语法转换(Babel)、模板热更新(HotModuleReplacementPlugin)、重复打包文件清理(clean-webpack-plugin)等。构建工具还处于不断发展的阶段,但是相应的打包技术已经非常成熟。本次主要介绍三种流行的打包工具Grunt、Webpack、Vite的对比和优势。构建工具介绍Grunt:是一款优化前端开发流程的工具。配置一系列任务,定义任务处理的任务(如文件压缩合并、启动服务器、版本控制等),然后定义执行顺序让Grunt执行这些任务,从而构建整个前端-结束项目的开发过程。它是如何工作的:Wepack:是一个模块化的解决方案。更加强调模块化。把你的项目当作一个整体,通过一个指定的主文件名(index.js,通常是入口文件),webpack会从这个文件开始寻找你的项目所依赖的文件,使用loader来处理它们,最后将它们打包为浏览器可读的js文件。Vite:一种新型的前端构建工具,它区别于不同的打包工具,它在开发环境中不将项目作为一个整体进行打包。原因:当我们建设的项目越来越大时,整个项目整合资源的时间就会变长。如果项目中有数千个模块,甚至可能需要几分钟才能启动开发服务器。所以vite解决了开发过程中需要等待整个项目打包完成,让开发更加顺畅。依赖:使用esbuild(用GO编写)预构建依赖,比用JavaScript编写的packager预构建依赖快10-100倍。源码:浏览器请求资源时->vite转换一些非js文件->动态导入代码。源码使用浏览器协商缓存(304NotModified),依赖模块请求会通过Cache-Control强缓存:max-age=31536000,不可变,保持热更新速度。如何选择合适的构建工具?Grunt对于一些中小型项目来说更加便携灵活。如果只是为了代码压缩合并,Grunt可以满足要求。发展历史悠久,基本稳定。但如果要处理庞大的项目文件,尤其是处理多种类型的资源文件,强调模块开发,Webpack更适合这种场景。webpack对于中大型项目比较稳定,文档和迭代速度也很快。当然,这对于开发者来说是相当头疼的,需要一段时间后才能适应文档的配置。Vite作为一种新兴的构建技术,用它来构建一个稳定的大中型项目是有一定风险的。虽然已经发布了稳定版,但还是存在一些潜在的风险。被更多人普及后,使用起来会更安全。不过平时搭建一些个人网站和项目用vite还是可以的,感受下它的方便。