【面试题】webpack的五大核心、构建流程、性能优化

news2024/9/29 21:18:24

【面试题】webpack的五大核心、webpack的构建流程、webpack的性能优化

  • webpack是什么?
  • webpack的五大核心
  • webpack的构建流程
  • webpack性能优化

webpack是什么?

js静态模块打包工具。
功能

  • 将多个文件打包成更小的文件,(压缩)
  • 翻译 babal-loader es6进行降级兼容。

webpack的五大核心

  • enter 1/n
  • output
  • loader
  • plugins
  • mode

webpack的构建流程

1、初始化参数:从配置文件和 Shell语句中读取与合并参数,得出最终的参数
2、开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译
3、确定入口:根据配置中的 entry 找出所有的入口文件
4、编译模块:从入口文件出发,调用所有配置的Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5、完成模块编译:在经过第4步使上oader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
6、输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会
7、输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统,在以上过程中,webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用Webpack 提供的 API 改变 Webpack 的运行结果

这道题基本会问在Webpack性能优化之前。

webpack性能优化

在这里插入图片描述

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

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

相关文章

【pyinstaller打包记录】Linux系统打包可执行文件后,onnxruntime报警告(Init provider bridge failed)

简介 PyInstaller 是一个用于将 Python 程序打包成可执行文件(可执行程序)的工具。它能够将 Python 代码和其相关的依赖项(包括 Python 解释器、依赖的模块、库文件等)打包成一个独立的可执行文件,方便在不同环境中运行…

如何根据企业司法涉诉大数据合理规避风险?

在当前的商业环境中,企业司法涉诉的信息越来越成为衡量一家企业信誉和运营风险的重要标准。大数据时代的到来,让我们有了更加丰富的手段对这些信息进行挖掘与分析,从而对企业可能面临的风险进行预警。本文将探讨如何通过对企业司法涉诉的大数…

服务器硬件监控,保障系统稳健运行的关键策略

服务器硬件在运维中扮演着至关重要的角色,超过一半的网络中断是由硬件故障引起的,这使得硬件性能监控成为运维中不可或缺的一部分。对于一个组织或企业的信息技术基础设施而言,重要性不言而喻: 1. 安全性:服务器硬…

虚拟内存地址动静态库

前言 大家好我是jiantaoyab,这是我所总结作为学习的笔记第5篇,在这里分享给大家,还有一些书籍《[深入理解计算机系统》《计算机组成:结构化方法》《计算机体系结构:量化研究方法》《程序员的自我修养》,今天我们来了解程序的虚拟…

聚观早报 | 2024款腾势D9将发布;岚图汽车2月销量

聚观早报每日整理最值得关注的行业重点事件,帮助大家及时了解最新行业动态,每日读报,就读聚观365资讯简报。 整理丨Cutie 3月2日消息 2024款腾势D9将发布 岚图汽车2月销量 苹果Vision Pro防汗新专利 真我12 Pro正式开售 Redmi K70/Pro…

wvp-gb28181-pro国标设备录像下载

点击【国标设备】,进入设备通道 每个通道右边都有对应的操作, 点击操作栏中的【设备录像】按钮 点击【设备录像】进入录像查看页面,选择要查看的日期即可对录像进行播放和下载 播放:双击录像名称 下载:点击下载按钮 下…

SpringBoot实现分页模糊查询

1. Navicat查询数据 Navicat中查询所有数据 SELECT * FROM sys_user;Navicat中查询前两条数据(俩种方式) SELECT * FROM sys_user LIMIT 2; //从0开始,第一个参数是起始位置即(pageNum-1)*pageSize,第二个参数是步长 SELECT * …

一文搞定Pytorch CUDA Toolkit与Driver的关系

1. 在我们使用Pytorch不同的版本时,有这样一个大致的对应关系,即:Pytorch版本CUDA Toolkit版本NVIDIA Driver 版本。 难点在于CUDA版本与Driver版本的关系,简单通过NVIDIA官网解决:CUDA Compatibility 这里既有关于Li…

JavaScript的`call`方法:实现函数间的调用!

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

Golang 程序启动原理详解

一.编译 go源代码首先要通过 go build 编译为可执行文件,然后去机器上直接执行的,在 linux 平台上为 ELF 格式的可执行文件,linux 能直接执行这个文件,而编译阶段会经过编译器、汇编器、链接器三个过程最终生成可执行文件 编译器:*.go 源码通…

基于“xxx” Androidx平台的驱动及系统开发 之 触摸板篇

目录 一、基于全志 A133 Android10平台,适配1366x768 - ilitek2511触摸1、原理图分析2、驱动移植与适配3、补丁和资源文件 二、基于瑞芯微 RK3566 Android11平台,适配GT9XX触摸1、原理图分析2、补丁及资源文件 三、遇到的问题与解决1、基于amlogic Andro…

【Leetcode】1588.所有奇数长度子数组的和

题目描述 思路 题目要求我们求解所有奇数长度数组的和。若暴力循环求解,时间复杂度过高。所以,我们可以采用前缀和优化。 如上图输入arr数组,sum[i]用于计算arr数组中前i个数的和。(在程序中,先给sum[0]赋值,等于arr[0…

python.模块与包

1.模块是什么 本质上是一种python文件,以.py结尾,里面有类,函数,变量等,认为这是一个工具包,每个模块有不同的功能,导入后可以直接使用 2.模块的导入 方法1 import 模块名 使用&#xff1a…

LLM 模型量化推理速度评测

最近了解了下些常见的推理和加速方案: 1、量化方案: gptq、quantization、int8、int4、AWQ、Speculative Decoding、GGUF 2、Attention加速方案: atten的不同种类fused attention 3、内存层面: kv_cache策略、page_attention…

洛谷 P1083 [NOIP2012 提高组] 借教室(二分+差分)

题目链接: P1083 [NOIP2012 提高组] 借教室 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 在大学期间,经常需要租借教室。大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室。教室的大小功能不同,借教…

YOLO系列中的“data.yaml”详解!

专栏介绍:YOLOv9改进系列 | 包含深度学习最新创新,主力高效涨点!!! 一、data.yaml介绍 YOLO系列中的data.yaml文件包含了YOLO系列模型运行所需要的数据集路径、数据集中的类别数及标签。数据集路径可以用绝对路径也可以…

计算机系统缺少cv100.dll文件解决方法(最新)

cv100.dll 是一个Windows操作系统中的动态链接库(DLL)文件。DLL文件是包含可由多个程序共享的代码和数据的模块,以减少磁盘空间占用并提高系统性能。根据收集到的信息,cv100.dll 文件可能与图像处理、计算机视觉相关的功能有关。 …

#WEB前端(JS基础语法)

1.实验: 2.IDE:VSCODE 3.记录: (1)数据类型 var,let,const var,let声明变量,const声明常量。var声明的变量具有函数作用域,let声明的变量具有块级作用域,let跟安全更…

鸿蒙实战开发:数据交互【RPC连接】

概述 本示例展示了同一设备中前后台的数据交互,用户前台选择相应的商品与数目,后台计算出结果,回传给前台展示。 样例展示 基础信息 RPC连接 介绍 本示例使用[ohos.rpc]相关接口,实现了一个前台选择商品和数目,后台…

LeetCode 每日一题 Day 88 - 94

2673. 使二叉树所有路径值相等的最小代价 给你一个整数 n 表示一棵 满二叉树 里面节点的数目,节点编号从 1 到 n 。根节点编号为 1 ,树中每个非叶子节点 i 都有两个孩子,分别是左孩子 2 * i 和右孩子 2 * i 1 。 树中每个节点都有一个值&a…