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

数据安
• 阅读 2144

构建工具:俗称打包。

理解:将模块文件进行合并,代码压缩,整合资源等一系列自动化操作。

为什么会出现构建工具这项技术?

我们希望看到页面加载平滑,快速进行响应。
通过:
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,感受一下它的便捷也可以。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(