前端打包工具的发展历程、思路(grunt,gulp,webpack,vite)

现在前端发展真快,需要学的东西太多了,下面总结下前端打包的发展过程,便于区分和选择学习。

什么是前端打包

前端打包是指将多个JavaScript文件、CSS文件、图片等资源进行合并和优化处理,并输出为一个或多个文件的过程。这样做的目的是减少页面加载时需要发起的HTTP请求数量,优化页面加载速度,提升用户体验。

发展阶段

  1. 手工合并阶段

最早期前端开发只有少量的JS和CSS文件。开发人员会手动将它们合并成一个文件,然后部署到服务器上。

问题:这种做法非常低效和容易出错,并且随着代码量的增加,手工合并变得越来越困难。

  1. 构建工具(Grunt、Gulp)

构建工具(Grunt、Gulp)
为了解决手工合并的痛点,一些自动化构建工具应运而生,比如Grunt和Gulp。它们提供了任务系统,如合并、压缩、编译等任务可以自动完成。

问题:虽然提高了自动化程度,但这些工具只能处理特定类型的资源,配置也很复杂。随着Web前端技术的发展,出现了更多种类的资源如图片、字体等需要处理。

  1. 现代打包工具(Webpack)

针对以上问题,业界开发出了Webpack这样的现代化打包工具。Webpack高度可配置化,可以处理几乎所有前端资源,如JS、CSS、图片、字体等。它内置了强大的loader机制,通过各种loader可以编译和转换不同类型文件。社区也非常活跃,有大量扩展支持各种框架和语言特性。

问题:尽管功能强大,但配置复杂,学习成本较高。打包时会对所有文件重新编译,构建速度较慢。这在开发阶段影响体验。

  1. 新型构建工具(Vite)

为了进一步提高开发体验,前端构建工具再次进化。Vite利用了浏览器原生对ES模块的支持,大幅改进了开发阶段的构建体验。它在开发时不需要打包,可以通过原生加载的方式直接运行代码,启动时间极快。在生产构建时,它会使用Rollup作为打包器。

Vite这样的新型构建工具,充分利用了新的语言特性,合理设计架构,在提升构建速度的同时,也简化了配置和使用方式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/706265.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

连接未来:深入解析Internet Storage Name Service (iSNS)及其在数据存储网络中的革命性作用

1. 引言 首先,我们将介绍iSNS的基本概念、它的作用以及在现代计算机网络中的重要性。iSNS是一种数据存储网络服务,用于简化存储区域网络(SAN)的发现和管理过程,特别是在使用Internet Small Computer System Interface…

【web APIs】1、(学习笔记)有案例!

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、概念二、使用步骤1.获取DOM对象2.操作元素内容3.属性修改3.1.常用属性修改3.2.控制样式属性3.3.操作类名(className) 操作CSS3.4.操作表单元素属性3.5.自定…

【LeetCode每日一题】938. 二叉搜索树的范围和

2024-2-26 文章目录 [938. 二叉搜索树的范围和](https://leetcode.cn/problems/range-sum-of-bst/)思路:写法一:在中间累加写法二:在最后累加 938. 二叉搜索树的范围和 思路: 1.在二叉搜索树中:左子树的结点都小于根节…

小甲鱼Python06 序列字典集合

一、序列 1.id函数 is运算符 我们首先思考下字符串、元组、列表的共同点: 都有很多共同的运算符。都可以通过索引来获取元素,第一个元素索引都是0,都可以通过切片的方法获取某个范围内元素的集合。 以上三种统称为序列。序列分为可变序列…

抖音视频评论采集软件|抖音数据抓取工具

抖音视频评论采集软件是一款基于C#开发的高效、便捷的工具,旨在为用户提供全面的数据采集和分析服务。该软件不仅支持通过关键词进行搜索抓取,还能够通过分享链接进行单个视频的抓取和下载,让用户轻松获取抖音视频评论数据。 其中&#xff0c…

JSP实现数据传递与保存(一)

一、Web开发步骤 1.1两类模式 后端——————前端 先有前端&#xff0c;前端用的时候直接调用 后端已实现注册接口&#xff0c;接口名为doRegister.jsp 前端此时&#xff1a; 前端的form表单中的action提交地址就只能填doRegister.jsp&#xff0c;即&#xff1a; <f…

10.网络游戏逆向分析与漏洞攻防-游戏网络架构逆向分析-接管游戏发送数据的操作

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;接管游戏连接服务器的操作 码云地址&#xff08;master 分支&#xff09;&#xff1a;染指/titan 码云版本号&#xff1a;00820853d5492fa7b6e32407d46b5f9c01930ec6 代码下载地址&#xff0c;在 ti…

Doris——荔枝微课统一实时数仓建设实践

目录 一、业务介绍 二、早期架构及痛点 2.1 早期架构 2.2 架构痛点 三、技术选型 四、新的架构及方案 五、搭建经验 5.1 数据建模 5.2 数据开发 5.3 库表设计 5.4 数据管理 5.4.1 监控告警 5.4.2 数据备份与恢复 六、收益总结 七、未来规划 原文大佬这篇Doris腾…

传入一个字符串或标签返回其所占的长度

传入一个字符串或标签返回其所占的长度 思路说明 使用隐藏的div元素来插入传入的HTML或纯字符串&#xff0c;并测量其宽度。使用style"white-space: nowrap;"来确保字符串不换行。使用隐藏的div元素的offsetWidth来取得宽度。取得之后&#xff0c;要记得移除插入的…

适配器模式(Adapter Pattern) C++

上一节&#xff1a;原型模式&#xff08;Prototype Pattern&#xff09; C 文章目录 0.理论1.组件2.类型3.什么时候使用 1.实践1.基础接口和类2.类适配器实现3.对象适配器实现 0.理论 适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它允…

日更【系统架构设计师知识总结3】存储系统

【原创精华总结】自己一点点手打、总结的脑图&#xff0c;把散落在课本以及老师讲授的知识点合并汇总&#xff0c;反复提炼语言&#xff0c;形成知识框架。希望能给同样在学习的伙伴一点帮助&#xff01;

LeetCode--238

238. 除自身以外数组的乘积 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&am…

《TCP/IP详解 卷一》第9章 广播和本地组播

目录 9.1 引言 9.2 广播 9.2.1 使用广播地址 9.2.2 发送广播数据报 9.3 组播 9.3.1 将组播IP地址转换为组播MAC地址 9.3.2 例子 9.3.3 发送组播数据报 9.3.4 接收组播数据报 9.3.5 主机地址过滤 9.4 IGMP协议和MLD协议 9.4.1 组成员的IGMP和MLD处理 9.4.2 组播路由…

基于微信小程序的垃圾分类系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

vue2 day6 7

1、vuex简介&#xff1a;共享数据 &#xff08;数据在组件中传递 组件通信&#xff09; 2、创建仓库 js中&#xff1a;this.$store 让我们可以在别的组件中访问仓库对象 3、state状态&#xff1a;提供公共数据&#xff08;data只提供当前组件数据&#xff09; 4、mutati…

YOLOv9-Openvino和ONNXRuntime推理【CPU】

1 环境&#xff1a; CPU&#xff1a;i5-12500 Python&#xff1a;3.8.18 2 安装Openvino和ONNXRuntime 2.1 Openvino简介 Openvino是由Intel开发的专门用于优化和部署人工智能推理的半开源的工具包&#xff0c;主要用于对深度推理做优化。 Openvino内部集成了Opencv、Tens…

apachectl: line 79: 20233 Segmentation fault (core dumped) $HTTPD “$@“

[TOC](apachectl: line 79: 20233 Segmentation fault (core dumped) $HTTPD “$”) 1、问题描述 apache 启动报错 apachectl: line 79: 20233 Segmentation fault (core dumped) $HTTPD “$” 2、问题分析 参考链接: https://stackoverflow.com/questions/43726930/apache…

手机如何使用NFC卡模拟门禁刷卡

部分手机具备NFC卡刷卡功能&#xff0c;理论上也可模拟门禁卡。 一个功能强大且免费的NFC卡模拟器&#xff0c;可模拟各类门禁卡、电梯卡、部分公司&#xff08;工厂&#xff09;工卡或饭卡、部分学校饭卡、部分图书馆借书卡等各类IC卡&#xff0c;用手机替代卡片去刷门禁、刷…

petalinux烧写image.ub报错

xinlinx SDK烧写petalinux生成的BOOT.BIN和image.ub时&#xff0c;BOOT.BIN烧写正常&#xff0c;image.ub烧写报错如下 Erase Operation failed. INFO: [Xicom 50-44] Elapsed time 0 sec.ERROR: Flash Operation Failed串口助手操作擦除flash如图&#xff1a; 解决方法&am…

uniapp 使用安卓模拟器运行调试

uniapp 启动方式有很多种,这里介绍使用模拟器启动uniapp 要使用模拟器启动uniapp肯定少不了安装模拟器(废话) 这里选着浏览器推荐的第一个模拟器mumu模拟器 下载好了mumu安装包后就是安装了,这个过于小白,就不介绍了 2. 查看模拟器的adb端口号, mumu的adb查看端口号与众不同…