10天进阶webpack---(1)为什么要有webpack
首先就是我们的代码是运行在浏览器上的,但是我们开发大多都是利用node进行开发的,在浏览器中并没有node提供的那些环境。这就早成了运行和开发上的不同步问题。 -----引言
浏览器模块化的问题:
- 效率问题:精细的模块划分带来了更多的JS文件,更多的JS文件带来了更多的请求,降低了页面访问效率
- 兼容性问题:浏览器目前仅支持ES6的模块化标准(不支持COMJS),存在兼容问题,当然目前其实只要不是特别老的浏览器都没有问题(可以忽略不记)。
- 工具问题:浏览器不支持npm下载的第三方包。
这仅是其中的一部分问题,在日常开发中遇到的业务问题就已经很头痛了,还要再关注这些兼容性,执行效率问题,会很痛苦。
node的问题更少
上面提到的问题,在node端没有那么明显,在node端,运行的JS文件在本地,因此可以本地读取文件,它的效率比浏览器远程传输文件高的多。出现构建工具的根本原因还是在浏览器端,开发时态(devtime)和运行时态(runtime)的侧重点不一样。开发的时候对于工作人员来说,模块划越细,代码书写越整洁越好,而对于浏览器运行来说呢,文件越少越好(减少请求次数),代码越少越少好(进行代码压缩,混合)。
具体:
开发时态,devtime:
- 模块划分越细越好
- 支持多种模块化标准
- 支持npm或其他包管理器下载的模块
- 能够解决其他工程化的问题
运行时态,runtime:
- 文件越少越好
- 文件体积越小越好
- 代码内容越乱越好
- 所有浏览器都要兼容
- 能够解决其他运行时的问题,主要是执行效率问题
解决办法
既然开发时态和运行时态面临的局面有巨大的差异,因此,我们需要有一个工具,这个工具能够让开发者专心的在开发时态写代码,然后利用这个工具将开发时态编写的代码转换为运行时态需要的东西。

这样的工具,叫做构建工具
这样一来开发者就不需要去关注什么我该使用什么样的导出导入方式,兼容性问题,你会在需要的时候调用构建工具使他转换目标代码。
看到了很多webpack和vite的面试题,但是本人一开始看的时候看的不是很懂,别准备写一个连载博客,讲解每一个知识点和附带的webpack的面试题。
相关文章:
10天进阶webpack---(1)为什么要有webpack
首先就是我们的代码是运行在浏览器上的,但是我们开发大多都是利用node进行开发的,在浏览器中并没有node提供的那些环境。这就早成了运行和开发上的不同步问题。 -----引言 浏览器模块化的问题: 效率问题:精细的模块划分带来了更…...
HTML CSS
目录 1. 什么是HTML 2. 什么是CSS ? 3. 基础标签 & 样式 3.1 新浪新闻-标题实现 3.1.1 标题排版 3.1.1.1 分析 3.1.1.2 标签 3.1.1.3 实现 3.1.2 标题样式 3.1.2.1 CSS引入方式 3.1.2.2 颜色表示 3.1.2.3 标题字体颜色 3.1.2.4 CSS选择器 3.1.2.5 发布时间字…...
第03章 MySQL的简单使用命令
一、MySQL的登录 1.1 服务的启动与停止 MySQL安装完毕之后,需要启动服务器进程,不然客户端无法连接数据库。 在前面的配置过程中,已经将MySQL安装为Windows服务,并且勾选当Windows启动、停止时,MySQL也 自动启动、停止…...
【C++动态规划】2435. 矩阵中和能被 K 整除的路径|1951
本文涉及知识点 C动态规划 LeetCode2435. 矩阵中和能被 K 整除的路径 给你一个下标从 0 开始的 m x n 整数矩阵 grid 和一个整数 k 。你从起点 (0, 0) 出发,每一步只能往 下 或者往 右 ,你想要到达终点 (m - 1, n - 1) 。 请你返回路径和能被 k 整除的…...
三、Kafka集群
一、Kafka集群的概念 1、目的 高并发、高可用、动态扩展。 主备数据架构、双活节点、灾备数据中心。 如果是服务的地理范围过大也可以使不同的集群节点服务不同的区域,降低网络延迟。 2、Kafka集群的基本概念 1)复制(镜像) kaf…...
[数据结构]堆
堆,本质是一颗完全二叉树。属于非线性结构。 代码实现可参考树的代码。 函数介绍: //此堆是小堆,大堆操作部分与小堆相反 void InitHeap(Heap* cat) {assert(cat);cat->arr NULL;cat->capacity cat->size 0; } void DestroyHeap(Heap* cat) {assert(…...
UDP-鼠李糖合成酶基因的克隆与鉴定-文献精读76
何首乌中UDP-鼠李糖合成酶基因FmRHM1/2的克隆与鉴定 摘要 UDP-鼠李糖是一种由UDP-鼠李糖合酶(RHM)催化合成的鼠李糖供体,而鼠李糖是鼠李糖苷化合物的重要组成部分,植物中只有少数基因编码的酶参与UDP-鼠李糖生物合成。本研究基于…...
【H2O2|全栈】JS进阶知识(四)Ajax
目录 前言 开篇语 准备工作 基本概念 原生JS使用AJAX 创建AJAX对象 设置请求方式和地址 设置请求头 发送请求 get方式发送 post方式发送 获取响应数据 AJAX状态码和HTTP状态消息 错误捕获 原生JS封装AJAX方法 $ 调用AJAX方法 结束语 前言 开篇语 本系列博客…...
Spring IOC的工作流程
Spring IOC的工作流程 好的,这个问题我会从几个方面来回答。 IOC是什么 Bean的声明方式 IOC的工作流程 IOC的全称是 Inversion Of Control,也就是控制反转,它的核心思想是把对象的管理权限交给容器。(展示图 1) &…...
从新手到专家:7款电脑平面设计软件评测
平面设计在时尚、广告等多个领域扮演着重要角色,而创作出独特且富有创意的设计作品则需要依赖优秀的电脑平面设计软件。市场上的电脑平面设计软件众多,每款软件都有其独到之处。本文将为你推荐几款值得关注的电脑平面设计软件,并分析它们的特…...
【C++】如何让C++字符串更快、C++的小字符串优化
二十三、如何让C字符串更快、C的小字符串优化 1、如何让C字符串更快? 如果程序中有很多字符串操作,比如格式化文本(日志记录),那是非常糟糕的,因为字符串操作是很慢的。字符串string和它相关的很多函数很可能会自动分配内存&…...
C++《list》
在本篇当中我们将学习STL中的list,在此list就是我们之前在数据结构学习过的链表,在本篇中我们要来了解list当中的成员函数该如何使用,由于list各个函数的接口和之前学习过的vector类型,因此在学习list的使用就较为轻松。在lis篇章…...
strongswan中METHOD定义
strongswan中使用METHOD来定义函数(方法),如下get_first函数定义。 METHOD(linked_list_t, get_first, status_t,private_linked_list_t *this, void **item) {if (this->count 0)return NOT_FOUND;*item this->first->value;ret…...
Rive 动画框架竟然支持响应式布局,全平台动画框架开启全新 UI 交互能力
没用过 Rive 的可能对于 Rive 还不熟悉,其实之前已经介绍过 Rive 好几次,例如《Rive 2 动画库「完全商业化」》 和《给掘金 Logo 快速添加动画效果》 等文章都介绍过 Rive ,之所以会接触 Rive 到, 也是因为多年前想在 Flutter 平台…...
MQ的详细大全知识点
MQ(Message Queue)是一种在分布式系统中广泛应用的消息中间件,它基于“先进先出”的数据结构原理,用于在不同系统之间传递消息。MQ通过提供接口给各个系统调用,实现了发送者和接收者之间的解耦,使得系统之间…...
AI图像相似性搜索对比:VIT, CLIP, DINO-v2, BLIP-2
图像相似性搜索的核心在于一个简单的想法:图像可以表示为高维空间中的向量。当两个图像相似时,它们的向量应该在这个空间中占据相似的位置。我们可以通过测量角度(或余弦相似度)来确定这些向量的相似程度。如果角度小,…...
【tomcat系列漏洞利用】
Tomcat 服务器是一个开源的轻量级Web应用服务器,在中小型系统和并发量小的场合下被普遍使用。主要组件:服务器Server,服务Service,连接器Connector、容器Container。连接器Connector和容器Container是Tomcat的核心。一个Container…...
前端学习-盒子模型(十八)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 盒子模型组成 边框 语法 边框简写 代码示例 表格的细线边框 语法 内边距 内边距复合写法 外边距 外边距典型应用 外边距合并 清除内外边距 总结 前…...
【C++】类和对象(十二):实现日期类
大家好,我是苏貝,本篇博客带大家了解C的实现日期类,如果你觉得我写的还不错的话,可以给我一个赞👍吗,感谢❤️ 目录 1 /!/>/</>/<运算符重载2 /-//-运算符重载(A) 先写,再通过写(B…...
文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《提升系统频率支撑能力的“车-氢”柔性可控负荷协同构网控制》
本专栏栏目提供文章与程序复现思路,具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...
vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
Java入门学习详细版(一)
大家好,Java 学习是一个系统学习的过程,核心原则就是“理论 实践 坚持”,并且需循序渐进,不可过于着急,本篇文章推出的这份详细入门学习资料将带大家从零基础开始,逐步掌握 Java 的核心概念和编程技能。 …...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
