10天进阶webpack---(1)为什么要有webpack

首先就是我们的代码是运行在浏览器上的,但是我们开发大多都是利用node进行开发的,在浏览器中并没有node提供的那些环境。这就造成了运行和开发上的不同步问题。 -----引言

浏览器模块化的问题:

  • 效率问题:精细的模块划分带来了更多的JS文件,更多的JS文件带来了更多的请求,降低了页面访问效率
  • 兼容性问题:浏览器目前仅支持ES6的模块化标准(不支持COMJS),存在兼容问题,当然目前其实只要不是特别老的浏览器都没有问题(可以忽略不记)。
  • 工具问题:浏览器不支持npm下载的第三方包。
    这仅是其中的一部分问题,在日常开发中遇到的业务问题就已经很头痛了,还要再关注这些兼容性,执行效率问题,会很痛苦。

node的问题更少

上面提到的问题,在node端没有那么明显,在node端,运行的JS文件在本地,因此可以本地读取文件,它的效率比浏览器远程传输文件高的多。出现构建工具的根本原因还是在浏览器端,开发时态(devtime)和运行时态(runtime)的侧重点不一样。开发的时候对于工作人员来说,模块划越细,代码书写越整洁越好,而对于浏览器运行来说呢,文件越少越好(减少请求次数),代码越少越少好(进行代码压缩,混合)。

具体:

开发时态,devtime:

  1. 模块划分越细越好
  2. 支持多种模块化标准
  3. 支持npm或其他包管理器下载的模块
  4. 能够解决其他工程化的问题

运行时态,runtime:

  1. 文件越少越好
  2. 文件体积越小越好
  3. 代码内容越乱越好
  4. 所有浏览器都要兼容
  5. 能够解决其他运行时的问题,主要是执行效率问题

解决办法

既然开发时态和运行时态面临的局面有巨大的差异,因此,我们需要有一个工具,这个工具能够让开发者专心的在开发时态写代码,然后利用这个工具将开发时态编写的代码转换为运行时态需要的东西。
在这里插入图片描述
这样的工具,叫做构建工具
这样一来开发者就不需要去关注什么我该使用什么样的导出导入方式,兼容性问题,你会在需要的时候调用构建工具使他转换目标代码。

看到了很多webpack和vite的面试题,但是本人一开始看的时候看的不是很懂,变 准备写一个连载博客,讲解每一个知识点和附带的webpack的面试题。

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

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

相关文章

Qt多边形填充/不填充绘制

1 填充多边形绘制形式 void GraphicsPolygonItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) {Q_UNUSED(option);Q_UNUSED(widget);//painter->setPen(pen()); // 设置默认画笔//painter->setBrush(brush()); // 设置默…

华为海思招聘-芯片与器件设计工程师-模拟芯片方向- 机试题-真题套题题目——共8套(每套四十题)

华为海思招聘-芯片与器件设计工程师-模拟芯片方向- 机试题-真题套题题目分享——共九套(每套四十题) 岗位——芯片与器件设计工程师 岗位意向——模拟芯片 真题题目分享,完整题目,无答案(共8套) 实习岗位…

掌握歌词用词技巧:写歌词的方法与艺术表达,妙笔生词AI智能写歌词软件

歌词,作为音乐作品中传递情感和思想的关键元素,其用词技巧蕴含着深刻的方法与艺术。 写歌词找不到灵感和思路,可以借助《妙笔生词智能写歌词软件》,它有这些功能:AI智能写歌词,AI智能歌曲填词,…

纯血鸿蒙Native层支持说明

本文所有描述均参考鸿蒙官方文档:传送门 1.对C库的支持 C标准函数库在C语言程序设计中,提供符合标准的头文件,以及常用的库函数实现(如I/O输入输出和字符串控制)。 HarmonyOS采用musl作为C标准库,musl库…

Centos Linux 7 搭建邮件服务器(postfix + dovecot)

准备工作 1. 一台公网服务器(需要不被服务商限制发件收件的,也就是端口25、110、143、465、587、993、995不被限制),如有防火墙或安全组需要把这些端口开放 2. 一个域名,最好是com cn org的一级域名 3. 域名备案&am…

sql速度优化多条合并为一条语句

在 SQL 中,结合 CASE 和 SUM 可以实现根据特定条件进行分组求和。在 ThinkPHP 中也可以使用类似的方式进行数据库查询操作。 例如,假设有一个销售数据表,包含字段 product_id (产品 ID)、 quantity (销…

Stable Diffusion Web UI 1.9.4常用插件扩展-WD14-tagger

Stable Diffusion Web UI 1.9.4 运行在 WSL 中的 Docker 容器中 tagger 插件的作用是,上传一张图片,反推这张图片可能的提示词。 使用场景就是,想要得到类似的图片内容时使用。 WD14-tagger 安装 Stable Diffusion WebUI WD14-tagger GitH…

信息安全建设方案,网络安全等保测评方案,等保技术解决方案,等保总体实施方案(Word原件)

1 概述 1.1 项目简介 1.2 测评依据 2 被测信息系统情况 2.1 定级情况 2.2 承载的业务情况 2.3 网络结构 2.4 被测对象资产 2.5 上次测评问题整改情况说明 3 测评范围与方法 3.1 测评指标 3.1.1 安全通用要求指标 3.1.2 安全扩展要求指标 3.1.3 其他安全要求指标 3.1.4 不适用安…

linux dpkg 查看 安装 卸载 .deb

1、安装 sudo dpkg -i google-chrome-stable.deb # 如果您在安装过程中或安装和启动程序后遇到任何依赖项错误, # 您可以使用以下apt 命令使用-f标志解析​​和安装依赖项,该标志告诉程序修复损坏的依赖项。 # -y 表示自动回答“yes”,在安装…

Docker Compose部署Rabbitmq(Docker file安装延迟队列)

整个工具的代码都在Gitee或者Github地址内 gitee:solomon-parent: 这个项目主要是总结了工作上遇到的问题以及学习一些框架用于整合例如:rabbitMq、reids、Mqtt、S3协议的文件服务器、mongodb github:GitHub - ZeroNing/solomon-parent: 这个项目主要是…

python NLTK快速入门

目录 NLTK简介安装NLTK主要模块及用法 词汇与语料库分词与词性标注句法分析情感分析文本分类综合实例:简单的文本分析项目总结 1. NLTK简介 NLTK(Natural Language Toolkit)是一个强大的Python库,专门用于自然语言处理&#xff…

青少年编程与数学 02-003 Go语言网络编程 14课题、Go语言Udp编程

青少年编程与数学 02-003 Go语言网络编程 14课题、Go语言Udp编程 课题摘要:一、UDP编程1. 创建UDP连接(服务器和客户端)服务器端客户端 2. 读取和发送数据3. 关闭连接4. 错误处理5. 性能优化总结 二、UDP与TCP的区别1. 连接性2. 可靠性3. 流量控制和拥塞…

c++--动态内存

目录 1.栈和堆的概念 1.1 new 运算符的使用 1.2 new 与 malloc() 的区别 1.3 代码示例(delete):释放内存 1.栈和堆的概念 栈 (Stack) 栈内存 是一种自动分配的内存空间。函数内部声明的变量和函数调用都在栈上操作。当一个函数结束时,栈上的变量会自动释放。 …

架构零散知识点

1 数据库 1.1 数据库范式 有一个学生表,主键是学号,含有学生号、学生名、班级、班级名,违反了数据库第几范式? --非主属性不依赖于主键,不满足第二范式 有一个订单表,包含以下字段:订单ID&…

《C语言程序设计现代方法》note-3 选择语句 循环语句

助记提要 关系运算符、判等运算符、逻辑运算符的优先级和结合性;条件运算符;C语言中如何使用布尔值;switch语句的注意;for语句省略表达式;逗号表达式;goto语句;空语句; 不应该以聪明…

电子电气架构 --- Trace 32(劳特巴赫)多核系统的调试

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所有人的看法和评价都是暂时的,只有自己的经历是伴随一生的,几乎所有的担忧和畏惧,都是来源于自己的想象,只有你真的去做了,才会发现有多快乐。…

Markdown转HTML

来源: https://juejin.cn/post/7310787455112445987 Markdown 一种简单易用的标记语言,旨在使纯文本格式化变得简单且易于阅读,它的设计目标是使文档易于阅读和书写同时保持格式的清晰和简洁 为什么会有Markdown转HTML的需求 尽管 Markdo…

哈希表与unordered_map

1.哈希概念 顺序结构以及平衡树中,元素关键码与其存储位置之间没有对应的关系,因此在查找一个元素时,必须要经过关键码的多次比较。搜索的效率取决于搜索过程中元素的比较次数,因此顺序结构中查找的时间复杂度O(N),平…

Python | Leetcode Python题解之第540题有序数组中的单一元素

题目&#xff1a; 题解&#xff1a; class Solution:def singleNonDuplicate(self, nums: List[int]) -> int:low, high 0, len(nums) - 1while low < high:mid (low high) // 2mid - mid & 1if nums[mid] nums[mid 1]:low mid 2else:high midreturn nums[l…

C++ 项目中使用 .dll 和 .def 文件的操作指南

在 C 项目中使用 sqlite3.dll 和 .def 文件的操作指南 在 C 项目中&#xff0c;当我们只有 sqlite3.dll 和 .def 文件&#xff0c;但没有 .lib 文件时&#xff0c;通常需要生成 .lib 文件以便项目链接或直接调用 sqlite3.dll。本文将介绍几种方法来生成 .lib 文件&#xff0c;…