当前位置: 首页 > news >正文

前端打包工具的发展历程、思路(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这样的新型构建工具,充分利用了新的语言特性,合理设计架构,在提升构建速度的同时,也简化了配置和使用方式。

相关文章:

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

现在前端发展真快,需要学的东西太多了,下面总结下前端打包的发展过程,便于区分和选择学习。 什么是前端打包 前端打包是指将多个JavaScript文件、CSS文件、图片等资源进行合并和优化处理,并输出为一个或多个文件的过程。这样做的目的是减少…...

利用Python将文件夹下多个txt文本写入到同一个excel中(每一个文件占一行)

1、 将文件夹下多个txt文本写入到同一个excel中(每一个文件占一行): # -*- coding: utf-8 -*- import os import pandas as pd# 获取文件夹中的所有txt文件 folder_path rG:\Cygwin\ txt_files [f for f in os.listdir(folder_path) if f.endswith(.t…...

通过Colab部署Google最新发布的Gemma模型

Gemma的简单介绍 Gemma 是一系列轻量级、最先进的开放式模型,采用与创建 Gemini 模型相同的研究和技术而构建。 Gemma 由 Google DeepMind 和 Google 的其他团队开发,其灵感来自 Gemini,其名称反映了拉丁语 gemma,意思是“宝石”…...

spring中@validate注解使用

在 Java 中,我们可以使用注解和 validate 实现对实体类中字段的校验。其中,注解用来定义字段的约束条件,而 validate 则用来进行实际的校验操作。 常用的校验注解包括 NotNull、NotEmpty、Size、Min、Max 等,它们可以帮助我们规定…...

停车场管理(C语言)

【题目描述】停车场管理。设有一个可以停放n辆汽车的狭长停车场,它只有一个大门可以供车辆进出。车辆按到达停车场时间的先后次序依次从停车场最里面向大门口处停放 (即最先到达的第一辆车停放在停车场的最里面) 。如果停车场已放满n辆车,则以后到达的车…...

探索无限:Sora与AI视频模型的技术革命 - 开创未来视觉艺术的新篇章

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua,在这里我会分享我的知识和经验。&#x…...

375FPS! 谷歌提出MaskConver“重校正用于全景分割的纯卷积模型

https://arxiv.org/2312.06052 近年来,基于Transformer的模型由于其强大的建模能力以及对语义类和实例类的统一表示为全局二值掩码,在全景分割中占据主导地位。 在本文中,我们回顾了纯粹的卷积模型,并提出了一种新的结构MaskConve…...

leetcode初级算法(python)- 数组

文章目录 1.从排序数组中删除重复项2.买卖股票最佳时机23.旋转数组运行颠倒列表法整体移动元素块法4.存在重复运行包含判断法排序比较判断法运行集合判断法5.只出现一次的数字6.两个数组的交集27.移动零8.两数之和9.旋转图像这篇博客中的代码都是数组计算。 1.从排序数组中删除…...

重新定义音乐创作:ChatGPT与未来音乐产业的融合

### 重新定义音乐创作:ChatGPT与未来音乐产业的融合 随着人工智能技术的飞速发展,ChatGPT不仅在文字创作领域大放异彩,也正逐步渗透并重塑音乐产业的未来。这种先进的语言模型,如今已成为音乐家、作曲家和制作人们手中的一把利剑…...

人工智能绘画的时代下到底是谁在主导,是人类的想象力,还是AI的创造力?

#ai作画 目录 一.AI绘画的概念 1. 数据集准备: 2. 模型训练: 3. 生成绘画: 二.AI绘画的应用领域 三.AI绘画的发展 四.AI绘画背后的技术剖析 1.AI绘画的底层原理 2.主流模型的发展趋势 2.1VAE — 伊始之门 2.2GAN 2.2.1GAN相较于…...

[HTML]Web前端开发技术29(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 上一节的课后练习...

文本编辑器markdown语法

markdown语法 1.介绍 Markdown是一种使用一定的语法将普通的文本转换成HTML标签文本的编辑语言,它的特点是可以使用普通的文本编辑器来编写,只需要按照特定的语法标记就可以得到丰富多样的HTML格式的文本。 2.标题分级 "# " -> 一级标题 &…...

【C++】类和对象之拷贝构造函数篇

个人主页 : zxctscl 文章封面来自:艺术家–贤海林 如有转载请先通知 文章目录 1. 前言2. 传值传参和传引用传参3. 概念4. 特征 1. 前言 在前面学习了6个默认成员函数中的构造函数和析构函数 【C】构造函数和析构函数详解,接下来继续往后看拷…...

Mybatisplus 传参参数为自定义sql, 使用条件构造器作为参数

1 pom依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.3.1</version> </dependency> 2 mapper 接口文件 List<TBookOrder> searchDiy(Param(Const…...

C#与VisionPro联合开发——TCP/IP通信

TCP/IP&#xff08;传输控制协议/互联网协议&#xff09;是一组用于在网络上进行通信的通信协议。它是互联网和许多局域网的基础&#xff0c;为计算机之间的数据传输提供了可靠性、有序性和错误检测。在软件开发中&#xff0c;TCP/IP 通信通常用于实现网络应用程序之间的数据交…...

spring Boot快速入门

快速入门为主主要届介绍java web接口API的编写 java编辑器首选IntelliJ IDEA 官方链接&#xff1a;https://www.jetbrains.com/idea/ IEDA 前言 实例项目主要是web端API接口的使用&#xff0c;项目使用mysql数据库&#xff0c;把从数据库中的数据的查询出来后通过接口json数…...

FPGA SERDESE2 (SDR收发仿真)

高速 Serdes 环路测试 高速串行通信优势非常巨大,只需要很少的IO引脚就可以实现高速通信,这也是当今FPGA高速接口的核心 技术。比如XILINX的7代FPGA,GTX可以达到10.3125Gbps,ultrascale FPGA的GTH可以达到16Gbps。目前国产FPGA还难以达到这么高的接口速度。 高速串行通信经…...

Java异常体系结构核心解析-Throwable

资料不在于多&#xff0c;而在于精。好资料、好书&#xff0c;我们站在巨人的肩膀上前行&#xff0c;可以少走很多弯路。 通过搜索引擎找到自己需要的最好最权威信息&#xff0c;是一种很重要的能力。 Java源代码和官方资料Java™ Tutorials Java异常体系结构&#xff0c;是一种…...

Android MediaRecorder 相关

Android MediaRecorder 相关 本篇文章主要介绍下MediaRecorder类. 1:创建对象 MediaRecorder mediaRecordernew MediaRecorder();MediaRecorder可以直接通过无参构造直接创建对象. 2: 音频源 通过调用setAudioSource(int audio_source)来设置音频源,可以是麦克风.音频文件…...

Spring中关于事务的一些方方面面

事务隔离级别&#xff1a; 先了解一些事务隔离级别有哪些&#xff1a; 未提交读(Read Uncommitted)&#xff1a; 允许脏读&#xff0c;也就是可能读取到其他会话中未提交事务修改的数据 提交读(Read Committed)&#xff1a; 只能读取到已经提交的数据。Oracle等多数数据库默…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

LOOI机器人的技术实现解析:从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...