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

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.kler.cn/a/378888.html

相关文章:

  • Lucene分析器的详细使用(5)
  • ArcGIS005:ArcMap常用操作101-150例动图演示
  • 语言模型的采样方法
  • App Store 截图生成器:轻松制作专业级应用营销图片
  • Linux系统性能调优技巧操作指南
  • 【MogDB】MogDB5.2.0重磅发布第五篇-支持部分ORACLE的HINT
  • 【数据分享】2024年我国省市县三级的休闲娱乐设施数量(免费获取/18类设施/Excel/Shp格式)
  • 中文词向量质量的评估
  • 服务器开启SSH允许远程连接服务
  • Springboot 内置缓存与整合Redis作为缓存
  • 7-12 检查密码
  • LeetCode 203. 移除链表元素(java)
  • Android面试整理
  • 【热门主题】000027 React:前端框架的强大力量
  • [C++]:智能指针
  • 大数据之——Window电脑本地配置hadoop系统(100%包避坑!!方便日常测试,不用再去虚拟机那么麻烦)
  • Python画笔案例-095 绘制鼠标画笔
  • [java][基础]HTTPTomcatServlet
  • 高防服务器都有哪些类型?
  • Java 正则基础
  • 生成对抗网络(GAN)如何推动AIGC的发展
  • MacOS如何读取磁盘原始的扇区内容,恢复误删除的数据
  • 【IC每日一题--单bitCDC跨时钟和同步FIFO】
  • [ 应急响应靶场实战 ] VMware 搭建win server 2012应急响应靶机 攻击者获取服务器权限上传恶意病毒 防守方人员应急响应并溯源
  • ssm基于vue搭建的新闻网站+vue
  • Python+Selenium+Pytest+POM自动化测试框架封装