前端工程化之:webpack1-1(构建工具)

一、浏览器端的模块化

1.问题

  • 效率问题:精细的模块划分带来了更多的 JS 文件,更多的 JS 文件带来了更多的请求,降低了页面访问效率;
  • 兼容性问题:浏览器目前仅支持 ES6 的模块化标准,并且还存在兼容性问题;
  • 工具问题:浏览器不支持 npm 下载的第三方包。

这些仅仅是前端工程化的一个缩影。

当开发一个具有规模的程序,你将遇到非常多的非业务问题,这些问题包括:执行效率、兼容性、代码的可维护性可扩展性、团队协作、测试等等等等,我们将这些问题称之为工程问题。工程问题与业务无关,但它深刻的影响到开发进度,如果没有一个好的工具解决这些问题,将使得开发进度变得极其缓慢,同时也让开发者陷入技术的泥潭。

2.根本原因

思考:上面提到的问题,为什么在 node 端没有那么明显,反而到了浏览器端变得如此严重呢?
答: node 端,运行的 JS 文件在本地,因此可以本地读取文件,它的效率比浏览器远程传输文件高的多。
根本原因:在浏览器端,开发时态 (devtime) 和运行时态 (runtime) 的侧重点不一样。

开发时态,devtime: 

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

运行时态,runtime: 

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

这种差异在小项目中表现的并不明显,可是一旦项目形成规模,就越来越明显,如果不解决这些问题,前端项目形成规模只能是空谈。 

3.解决办法:构建工具

既然开发时态和运行时态面临的局面有巨大的差异,因此,我们需要有一个工具,这个工具能够让开发者专心的在开发时态写代码,然后利用这个工具将开发时态编写的代码转换为运行时态需要的东西。

 这样一来,开发者就可以专注于开发时态的代码结构,而不用担心运行时态遇到的问题了。

4.常见的构建工具

  • webpack
  • vite
  • grunt
  • gulp
  • browserify
  • fis
  • ...

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

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

相关文章

Hive之set参数大全-17

配置是否启用 HiveServer2 的 Web 用户界面(WebUI)中的跨源资源共享(CORS) 在 Hive 中,hive.server2.webui.enable.cors 是一个参数,用于配置是否启用 HiveServer2 的 Web 用户界面(WebUI&…

CVE-2024-23897 Jenkins 任意文件读取漏洞

项目介绍 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件项目可以进行持续集成。Jenkins是开源CI&CD软件领导者, 提供超过1000个插…

Java集合相关面试题

📕作者简介: 过去日记,致力于Java、GoLang,Rust等多种编程语言,热爱技术,喜欢游戏的博主。 📗本文收录于java面试题系列,大家有兴趣的可以看一看 📘相关专栏Rust初阶教程、go语言基…

C# 设置一个定时器函数

C#中,创建设置一个定时器,能够定时中断执行特定操作,可以用于发送心跳、正计时和倒计时等。 本文对C#的定时器简单封装一下,哎,以方便定时器的创建。 定义 using Timer System.Timers.Timer;class SetTimer {Timer …

Nacos注册中心:揭秘分布式系统的灵魂之所

目录 一、Nacos注册中心简介 1.1 概述 1.2 作用和意义 二、Nacos的特点和优势

OSPF协议基础(OSPF工作过程)

目录 OSPF基本工作原理邻居建立过程Router ID发现并建立邻居 - Hello报文OSPF邻居建立过程 链路状态信息丰富的数据链路层支持能力网络类型 - P2P网络网络类型 - 广播型网络网络类型 - NBMA网络网络类型 - P2MP网络OSPF的度量方式 报文类型及作用OSPF协议报文头部OSPF报文类型O…

物理服务器

物理服务器 物理服务器是一种独立的、非虚拟化的计算机设备,它通常被用作高性能应用、数据库、存储和网络等关键业务应用的运行平台。物理服务器可以提供更高的处理能力、更好的安全性和可靠性,但需要用户自行维护和管理。 物理服务器的形式多种多样&…

图论-寒假

文章目录 A - Amusement Arcade题意:题解:代码: B - Brexiting and Brentering题意:题解:代码: I - Montys Hall题意:题解:代码: A - Amusement Arcade 题意&#xff1a…

每日一道编程题:回文数

题目 一串字符如果从左读和从右读完全相同&#xff0c;我们称之为回文。请判断键盘输入一串字符&#xff08;不超过1000位&#xff09;&#xff0c;是否是回文。是&#xff0c;则输出YES&#xff0c;否则输出NO。 输入样例 1aabbccbbaa1输出样例 YES代码 #include <bit…

k8s-调度

调度 从上面的架构图我们可以看到,调度是工作在Master,负责调度Pod&#xff0c;为POD分配Node。 调度的工作原理 #查看所有的Node kubectl get nodes 我们可以看到节点有一个Name,这就是调度的关键。 调度的步骤&#xff1a; 1 创建POD的时候每一个POD都会有一个叫NodeName的…

老板为何都对项目经理毕恭毕敬!因为这个职位一念成佛一念成魔

hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年经验&#xff01;希望我的分享能帮助到您&#xff01;如需帮助可以评论关注私信我们一起探讨&#xff01;致敬感谢感恩&#xff01; 老板为何都对项目经理毕恭毕敬&#xff01;因为这个职位一念成佛一念成魔 曾几何时&am…

Linux:命名管道及其实现原理

文章目录 命名管道指令级命名管道代码级命名管道 本篇要引入的内容是命名管道 命名管道 前面的总结中已经搞定了匿名管道&#xff0c;但是匿名管道有一个很严重的问题&#xff0c;它只允许具有血缘关系的进程进行通信&#xff0c;那如果是两个不相关的进程进行通信&#xff0…

【最佳实践】Go 组合模式对业务解耦

在 Go 语言中&#xff0c;组合模式&#xff08;Composition&#xff09;是通过嵌入结构体&#xff08;embedding structs&#xff09;来实现的。它允许我们构建复杂的对象&#xff0c;通过将简单对象组合成树形结构来表示整个部分的层次结构。在 Go 中&#xff0c;这种模式不仅…

《佛法修学概要》009-012集研讨

课程摘要 9、只有走出心中的妄想&#xff0c;才可能接觸彌陀的光明&#xff01; 佛陀在經典裡講出一個譬喻&#xff0c;說有一座動物園&#xff0c;這座動物園關了很多動物。其中有一隻袋鼠&#xff0c;就是澳洲那種很會跳的袋鼠。動物園的管理員&#xff0c;給牠圈了一個十公尺…

《合成孔径雷达成像算法与实现》Figure5.16

clc clear close all距离向参数 R_eta_c 20e3; % 景中心斜距 Tr 25e-6; % 发射脉冲时宽 Kr 0.25e12; % 距离向调频率 Fr 7.5e6; % 距离向采样率 Nrg 256; % 距离线采样点数 Bw abs(Kr*Tr); …

uniapp+极光做消息推送

借鉴地址uniapp极光做消息推送_uniapp 极光 配置 ios 自定义消息-CSDN博客

【vue oidc-client】invalid_requestRequest Id: 0HN0OOPFRLSF2:00000002

需求&#xff1a;完成统一登录&#xff0c;需要从三方平台跳到我们的平台。 oidc-client报错记录。这个一般是配置信息出错&#xff0c;需要和三方平台进行沟通&#xff0c;一定要把client_id&#xff0c;密钥进行对应&#xff1b; 同时关于此次出错还修改了以下代码&#xff…

Python 办公自动化主要Excel,PPT,Word,邮件,再加上数据分析、爬虫等

python办公自动化 Python 办公自动化主要Excel&#xff0c;PPT&#xff0c;Word&#xff0c;邮件&#xff0c;再加上数据分析、爬虫等技能#####Excel自动化 pip install xlwings pip install openpyxl 实现对Excel表格的读、写、格式调整、自动化图表生成等 以下用xlwings进行…

主成分分析(PCA)Python

实际问题研究中&#xff0c;常常遇到多变量问题&#xff0c;变量越多&#xff0c;问题往往越复杂&#xff0c;且各个变量之间往往有联系。于是&#xff0c;我们想到能不能用较少的新变量代替原本较多的旧变量&#xff0c;且使这些较少的新变量尽可能多地保留原来变量所反映的信…

按配置数据绘制配置型地图marker的icon,自定义marker

一、需求 需要自定义配置数据的marker&#xff0c;其中图片内容要灵活可配置自动生成。此处项目用的百度地图。 效果图&#xff1a; 二、思路 用背景图canvas绘制数字的方式生成icon的图片资源。 再将icon生成对应地图marker。 三、代码 canvasImg.js <!-- * descrip…