• 自动秒收录
  • 软件:1973
  • 资讯:57811|
  • 收录网站:279872|

IT精英团

最近对前端构建工具的一些理解

最近对前端构建工具的一些理解

浏览次数:
评论次数:
编辑: 泽洋
信息来源: ITPUB
更新日期: 2022-08-10 00:02:09
摘要

前言最近有幸在前端团队里面做了一次关于webpack的技术分享。在分享的准备过程中,为了能让大家更好的理解webpack,特意对市面上以前和现在流行的构建工具做了一个梳理总结。在整理和分享的过程

  • 正文开始
  • 相关阅读
  • 推荐作品

前言

最近有幸在前端团队分享了webpack的技术。在分享的准备过程中,为了让大家更好的理解webpack,我们对之前和现在市场上流行的构建工具做了一个总结。在整理和分享的过程中,我受益匪浅,对前端搭建工具有了新的认识。在这里,我写一些自己的想法总结,希望能给同样对搭建工具感兴趣的同学一些帮助。

本文的目录结构如下:3360

构建工具的前世今生[1]

js 模块化的发展史和构建工具的变化[2]

结束语[3]

构建工具的前世今生

说到构建工具,人们首先想到的肯定是Webpack和现在的Vite。Webpack,功能强大,生态丰富,从出现到今天,一直很受大家的欢迎。Vite采用非捆绑构建模式,带来极致的开发体验,给开发者新的选择。

除了这两个构建工具之外,还有其他构建工具,比如Rollup、Parcel和Esbuild,它们类似于Webpack和Vite,自动构建工具grunt和gulp,以及更老的YUI工具。

这些工具的存在构成了前端构建工具的发展史。

YUI Tool + Ant

Yutool是2007年左右出现的一款构建工具。它的功能比较简单。用于压缩易混淆的css和js代码,需要配合java的Ant使用。

当时的web应用开发主要使用jsP,但前端并没有像现在这样分离。通常JS和css代码是由java开发人员编写的,前端代码和后端java代码放在一起。因此,基于java实现了前端代码的压缩混淆。

Grunt / Gulp

Grunt/Gulp都是在节点环境下运行的自动化工具。

在开发过程中,我们可以将解析html、es6代码转换成es5、less/sass代码转换成css代码、代码检查、代码压缩、代码混淆等一些常见操作配置成一系列任务,然后通过Grunt/Gulp自动执行这些任务。

咕哝和吞咽的区别:

在使用Grunt的过程中,会产生一些中间临时文件。一些任务生成临时文件,而另一些任务可能基于临时文件重新处理它们并生成最终的后期构造文件,从而导致多个I/O。

Gulp有文件流的概念。它通过管道连接多个任务和操作,不会产生临时文件,减少I/O操作,过程更清晰纯粹,大大加快了构建速度。

Webpack / Rollup / Parcel

Webpack、Rollup和Parcel统称为静态模块包装器。

这种构建工具通常需要指定entry-entry,然后以entry为起点,通过分析整个项目中源文件之间的依赖关系,构建一个模块依赖图-模块图。然后,将模块图分成三种类型:bundle:条目所在的初始bundle、lazy load所需的异步bundle和带有自定义分离规则的custome bundle。

这些构建工具各有优势:

Webpack大而全,配置灵活,生态。

丰富,是构建工具的首选。

  • Parcel号称零配置,使用简单,适合不太需要定制化构建的项目使用。

  • Rollup推崇 ESM标准开发,打包出来的代码干净,适用于组件库开发。

  • Vite / Esbuild

    新一代构建工具。

    esbuild, 基于 go语言实现,代码直接编译成机器码(不用像 js 那样先解析为字节码,再编译为机器码),构建速度比 webpack更快。

    vite, 开发模式下借助浏览器对 ESM的支持,采用 nobundle的方式进行构建,能提供极致的开发体验;生产模式下则基于 rollup进行构建。

    js 模块化的发展史和构建工具的变化

    javascript语言设计之初,只是作为一个简单的脚本语言用来丰富网站的功能,并不像 javac++那样有 module的概念,发展到现在的模样,也经历了相当长的时间。

    这段时间,可以简单归纳为:

    • 青铜时代- no module;

    • 白银时代- cjs、amd、cmd、umd、esm 相继出现;

    • 黄金时代- 组件模块化;

    不同的时代,构建工具也不同。

    青铜时代

    由于没有 module的概念, javascript无法在语言层面实现模块之间的相互隔离相互依赖,只能由开发人员手动处理。

    相应的,早期的 web开发也比较简单甚至简陋:

    • 通过对象iife(或者闭包)的方式实现模块隔离
    • 通过手动确定 script加载顺序确定模块之间的依赖关系
    • jsp开发模式,没有专门的前端,htmljscss代码通常也由后端开发人员编写。

    为了节省带宽保密,通常需要对前端代码做压缩混淆处理。这个时候,构建工具为 YUI Tool+ Ant

    白银时代

    chrome v8引擎 和 node的横空出世,给前端带来了无限的可能。

    同时,javascript的模块化标准也有了新的发展:

    1. commonjs规范,适用于 node环境开发。

    2. amdcmd规范,适用于浏览器环境。

    3. umd,兼容 amdcommonjs,代码可以同时运行在浏览器node环境。

    4. ESM,即 ES6 module(这个时候还不是很成熟);

    同时还出现了 lesssasses6jslinteslinttypescript等新的东西, 前端角色也开始承担越来越重要的作用,慢慢的独立出来。

    有了 node提供的平台,大量的工具开始涌现:

    • requirejs提供的 r.js插件,可以分析 amd 模块依赖关系合并压缩 js优化 css
    • less/ sass插件,可以将 less/ sass代码转化为 css代码;
    • babel,可以将 es6转化为 es5
    • typescript,将 ts编译为 js
    • jslint/ eslint,代码检查;
    • ...

    这个时候,我们可以将上面的的这些操作配置成一个个任务,然后通过 Grunt/ Gulp自动执行任务。

    黄金时代

    基于 AngularVueReact三大框架和 Webpack的使用,组件模块化成为前端开发的主流模式。同时 ESM规范也原来越成熟,被更多的浏览器支持。

    ReactWebpack为例,通常我们会将一个应用涉及到的所有的功能拆分为一个个组件,如路由组件、页面组件、表单组件、表格组件等,一个组件对应一个源文件,然后通过 Webpack将这些源文件打包。在开发过程中,还会通过 Webpack开启一个 local server,实时查看代码的运行效果。

    Webpack是一个静态模块打包器,它会以 entry指定的入口文件为起点,分析整个项目内各个源文件之间的依赖关系,构建一个模块依赖图 - module graph,然后将 module graph分离为多个 bundle。在构建 module graph的过程中,会使用 loader处理源文件,将它们转化为浏览器可以是识别的 jscssimage音视频等。

    随着时间的发展, Webpack的功能越来越来强大,也迎来诸多对手。

    Webpack1
    |
    |
    Rollup 出现(推崇 ESM 规范,可以实现 tree shaking, 打包出来的代码更干净)
    |
    |
    Webpack2(也实现了 tree shaking, 但是配置还是太繁琐了)
    |
    |
    Parcel (号称 配置)
    |
    |
    Webpack4(通过 mode 确定 development 和 production 模式,各个模式有自己的默认配置)
    |
    |
    Webpack5(持久化缓存、module federation)

    Esbuild(采用 go 语言开发,比 Webpack 更快)

    Vite(推崇 ESM 规范,开发模式采用 nobundle,更好的开发体验)
    复制代码

    丰富的构建工具,形成了百花绽放的局面,可用于不同的情形,给开发人员带来了越来越多的选择。

    结束语

    目前来看,构建工具在整个前端体系中占据的位置是越来越重要。只会 Webpack 甚至不懂构建工具已经无法满足日常开发。这就需要我们时时学习,紧跟时代的脚步,了解最新的技术,不断前进。

    尽管前路坎坷,依然相信未来可期,加油

    标签:工具 代码 组件
    一万字长文 手把手教你如何重构
    « 上一篇 2022-08-10
    浅谈低代码平台的远程组件加载方案
    下一篇 » 2022-08-10
    • 如何在Ubuntu中保留文件系统并备份当前开发板镜像
      0阅读 0条评论 个赞
      在Ubuntu保留文件系统或者说备份当前开发板镜像的需求在不断增加。比如Ubuntu文件系统需要安装库文件的话直接使用apt-get工具就可以下载,但由于需要下载的核心板较多,比较费时间,这时需要将安……
    • 国产核心板全志T507助力消防系统升级
      0阅读 0条评论 个赞
      9月16日下午,位于湖南长沙市区内的中国电信大楼发生火灾,建筑高度218米,现场浓烟滚滚,数十层楼体燃烧剧烈。消防救援人员赶到现场后很快将火势控制住,目前大楼火势已被扑灭,所幸未发现人员伤亡。湖南电信……
    • 教大家如何处理Spring Boot易流中的用户和群体!
      0阅读 0条评论 个赞
      1.准备工作2.用户操作2.1添加用户2.2修改用户2.3删除用户2.4查询用户3.组操作3.1添加组3.2修改组3.3删除组3.4查询组4.查看表详情虽然说我们在实际开发中,……
    • 从PG15开始WAL压缩优化
      0阅读 0条评论 个赞
      PG15传闻中的超级令人激动的功能大多数跳票了,年初我也写过一个关于PG15新功能跳票的文章。PG15BETA已经发出几个月了,似乎PG15里令人激动人心的功能不多,不过从长长的新功能列表里,……
    • 深入了解美团叶子发射器开源方案
      0阅读 0条评论 个赞
      大家好,我是树哥。之前我们有聊过「如何设计一个分布式ID发号器」,其中有讲过4种解决方案,分别是:UUID类雪花算法数据库自增主键Redis原子自增美团以第2、3种解决方案为基础,开发出……
    发表评论 共有条评论
    用户名: 密码:
    验证码: 匿名发表
    • ASP.NET核心6框架揭示示例演示[34]:缓存整个响应内容
      0阅读 0条评论 个赞
      我们利用ASP.NET开发的大部分API都是为了对外提供资源,对于不易变化的资源内容,针对某个维度对其实施缓存可以很好地提供应用的性能。《内存缓存与分布式缓存的使用》介绍的两种缓存框架(本地内存缓存和……
    • SpringMVC 03: 请求和响应的乱码解决 + SpringMVC响应Ajax请求
      1阅读 0条评论 个赞
      请求或响应的中文乱码问题tomcat9解决了get请求和响应的中文乱码问题,但是没有解决post请求或响应的中文乱码问题tomcat10解决了get和post请求以及响应的中文乱码问题考虑到实际项目中……
    • 渗透攻击和防御网络-简单的SQL注入
      0阅读 0条评论 个赞
      1背景京东SRC(SecurityResponseCenter)收录大量外部白帽子提交的sql注入漏洞,漏洞发生的原因多为sql语句拼接和Mybatis使用不当导致。2手工检测2.1前置知识……
    • 基于iframe的微前端框架——青田
      33阅读 0条评论 个赞
      vivo互联网前端团队-JiangZuohan一、背景VAPD是一款专为团队协作办公场景设计的项目管理工具,实践敏捷开发与持续交付,以「项目」为核心,融合需求、任务、缺陷等应用,使用敏捷迭代、小……
    • SpringMVC 01: SpringMVC第一个SpringMVC项目
      0阅读 0条评论 个赞
      SpringMVCSpringMVC概述:是基于MVC开发模式的框架,用来优化控制器是Spring家族的一员,也具备IOC和AOP什么是MVC:它是一种开发模式,是模型视图控制器的简称,所有的web应……
    • Java开发学习(29)——Maven依赖转移、可选依赖和排除依赖分析
      0阅读 0条评论 个赞
      现在的项目一般是拆分成一个个独立的模块,当在其他项目中想要使用独立出来的这些模块,只需要在其pom.xml使用标签来进行jar包的引入即可。其实就是依赖……
    • 在头脑中扎根泛型的思想3354深刻理解泛型
      0阅读 0条评论 个赞
      1.前言往往一些刚接触C#编程的初学者,对于泛型的认识就是直接跳到对泛型集合的使用上,虽然微软为我们提供了很多内置的泛型类型,但是如果我们只是片面的了解调用方式,这会导致我们对泛型盲目的使用。至于为什……
    • 深入理解Redis数据结构-字典
      0阅读 0条评论 个赞
      字典,又称为符号表、关联数组或映射,是一种用于保存键值对的抽象数据结构。在字典中,一个键可以和一个值进行关联,这些关联的键和值称为键值对。键值对中键是唯一的,我们可以根据键key通过映射查找或者更新对……
    • 订单超时案例的RabbitMQ实现
      0阅读 0条评论 个赞
      前言#人间清醒目录前言业务场景JUC(DelayQueue)方案DelayQueue简介JUCDelayQueue实现订单超时案例代码案例代码RedisKey过期事件方案简介RabbitKey……
    • 谈ASP.NET核心认证与授权
      0阅读 0条评论 个赞
      使用asp.netcore开发应用系统过程中,基本上都会涉及到用户身份的认证,及授权访问控制,因此了解认证和授权流程也相当重要,下面通过分析asp.netcore框架中的认证和授权的源码来分析……
    • 卡夫卡数据丢失问题优化总结及重复消费原因分析(二)
      0阅读 0条评论 个赞
      .css-1yuhvjn{margin-top:16px;}.css-3jt6os.FileLinkCard{-webkit-align-items:center;-webkit-box-align……
    • 卡夫卡详解(一)——卡夫卡是什么 怎么用
      0阅读 0条评论 个赞
      kafka是什么在回答这个问题之前,我们需要先了解另一个东西--eventstreaming。什么是eventstreaming我觉得,eventstreaming是一个动态的概念,它描述了一……
    • 一个没有写代码的案例 让我们看看Flowable为我们提供了哪些功能
      3阅读 0条评论 个赞
      其实松哥之前已经写过文章和大家介绍了flowable-ui的玩法了,这是官方提供的一个工具,这个工具不仅可以用来绘制流程图,还可以用来部署一个流程应用,通过这个流程应用我们可以体验一把flowa……
    • 基于aiohttp的异步爬虫python实战
      0阅读 0条评论 个赞
      钢铁知识库,一个学习python爬虫、数据分析的知识库。人生苦短,快用python。之前我们使用requests库爬取某个站点的时候,每发出一个请求,程序必须等待网站返回响应才能接着运行,而在整个爬虫……
    • 记录在线超时的分析和故障排除过程
      0阅读 0条评论 个赞
      .css-1yuhvjn{margin-top:16px;}.css-3jt6os.FileLinkCard{-webkit-align-items:center;-webkit-box-align……
    • 中国台湾的建设:有效登陆中国台湾的六脉神剑
      0阅读 0条评论 个赞
      在数字化时代,数字化体系的建设需要的是系统化的规划和产品化的迭代的模式,基于企业核心业务能力体系,做中台化的持续建设与落地,则是一种不错的选择。所以,企业业务中台的建设和落地,是关系到企业数字化战略成……
    • 新一代网络请求库:python-httpx库
      0阅读 0条评论 个赞
      目录httpx库一、概述1、简介2、命令行模式3、快速开始3.1get请求3.2post请求3.2.1表单3.2.2文件3.2.3JSON3.2.4二进制3.3响应处理3.4流……
    • SQL Server 2005分区模板和实例
      0阅读 0条评论 个赞
      一、场景这一段时间使用SQLServer2005对几个系统进行表分区,这几个系统都有一些特点,比如数据库某张表持续增长,给数据库带来了很大的压力。现在假如提供一台新的服务器,那么我们应该如何规划……
    • 2022数字技能职业教育生态研讨会
      9阅读 0条评论 个赞
      职业教育是国民教育体系和人力资源开发的重要组成部分。发展职业教育,已经成为世界各国应对经济、社会、人口、环境、就业等方面挑战,实现可持续发展的重要战略选择。中国职业教育源远流长,师徒制教学有着悠久的……
    • SQL Server的常用分页SQL
      0阅读 0条评论 个赞
      今天无聊和朋友讨论分页,发现网上好多都是错的。网上经常查到的那个TopNotin或者Max大部分都不实用,很多都忽略了Order和性能问题。为此上网查了查,顺带把2000和2012版本的也补上……
    最近发布资讯
    更多