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

前端面试宝典---webpack面试题

webpack 的 tree shaking 的原理

Webpack 的 Tree Shaking 过程主要包含以下步骤:

  1. 模块依赖分析:Webpack 首先构建一个完整的模块依赖图,确定每个模块之间的依赖关系。
  2. 导出值分析:通过分析模块之间的 import 和 export,Webpack 识别出哪些导出值被其他模块引用。
  3. 未使用代码识别:通过对比模块的导出值和引用情况,Webpack 可以确定哪些代码是未被使用的"死代码"。
  4. 代码移除:最后,Webpack 会从构建包中移除这些未使用的代码,从而减小最终文件的大小。

webpack 构建流程

  1. 初始化各种参数,读取配置文件,进行解析。各种merge…,形成标准化的配置
  2. 开始编译:complier 对象初始化,注册所有的配置插件,执行run方法开始编译
  3. 从 entry 开始,读取所有的依赖树,形成 AST。不断地递归下去进行处理。
  4. 文件编译:根据文件正则匹配对应的 loader,进行文件转换
  5. 形成一个整体的资源树,完成模块的编译
  6. 输出资源:根据入口和模块的关系,组成一个个的chunk,再把每个 chunk 转换成单独的文件,准备输出。
  7. 输出完成,根据 output 配置的内容,把文件最后,写入到磁盘。
  8. webpack的hooks:中间不同时段会有不同的plugin执行

loader 和 plugin 的区别?

loader: 转换器,核心是解析.
webpack 没有 loader 的话,只能打包基础的 cjs的 js 文件,对于 css,静态资源 是无法实现打包的,这时候就需要引入 一些 loader 来进行文件的处理,更多的是,文件的转换器

plugin: 插件,主要是扩展webpack 的功能,在 webpack 的运行周期里,会有一些 hooks 对外暴露,所以在webpack 打包编译的过程中, plugin 会根据这些 hooks 执行一些自定义的操作,来实现对输出结果的干预的增强。

区别:
loader 更专注于 文件的转换,是转换器,让 webpack 处理非JS 模块plugin 更专注于 流程的扩展,是扩展器。让输出资源的能力更丰富。

webpack中hash、chunkhash和contenthash的区别

  1. hash:一整个项目,一次打包,只有一个hash值
  2. chunkhash:一个入口打包出来的文件所得到的是同一个chunkhash
    • 从入口entry出发,到它的依赖,以及依赖的依赖,依赖的依赖的依赖,等等,一直下去,所打包构成的代码块(模块的集合)叫做一个chunk,也就是说,入口文件和它的依赖的模块构成的一个代码块,被称为一个chunk。
    • 所以,一个入口对应一个chunk,多个入口,就会产生多个chunk
    • 所以,单入口文件,打包后chunkhash和hash值是不同的,但是效果是一样的
  3. contenthash:该哈希只会和文件内容有关,是控制力度最细的

如何提高 webpack 的打包速度

  • 使用多进程打包: 使用 thread-loader,happypack 等工具,将构建的流程分解为多个进程或线程去处理。esbuild,swc 相关。
  • 使用 dllPlugin 将第三方库预先进行打包,减少构建;
  • 使用 HardSourceWebpackPlugin, 缓存一些中间文件,加速后续的构建流程
  • 使用 tree shaking
  • 移除不需要的loader和不必要的插件
  • cache-loader:开启Cache-loader 实现打包缓存,对于之前读过文件进行缓存,而不需要再去读系统文件

如何减小 webpack 打包后的体积/性能优化

  1. code spliting:非首屏加载的数据,先排除掉。
  2. tree shaking:没用的,先干掉
  3. 压缩代码:css 压缩、JS 压缩
  4. 图片压缩:gzip
  5. 按需引入:例如组件库
  6. CDN加速:react,vue,比较大的第三方

相关文章:

前端面试宝典---webpack面试题

webpack 的 tree shaking 的原理 Webpack 的 Tree Shaking 过程主要包含以下步骤: 模块依赖分析:Webpack 首先构建一个完整的模块依赖图,确定每个模块之间的依赖关系。导出值分析:通过分析模块之间的 import 和 export&#xff…...

Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践

Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践 一、Tailwind CSS 配置 1. 安装依赖 npm install tailwindcssnpm:tailwindcss/postcss7-compat tailwindcss/postcss7-compat postcss^7 autoprefixer^92. 创建配置文件 npx tailwindcss init3. 创建样式文件 在…...

hiveserver2与beeline进行远程连接hive配置及遇到的问题

1、hiveserver2 参与用户模拟功能&#xff0c;因为开启后才能保证各用户之间的权限隔离。 1.1、配置 $HADOOP_HOME/etc/hadoop/core-site.xml <!--配置所有节点的root用户都可作为代理用户--> <property><name>hadoop.proxyuser.root.hosts</name>&…...

单词短语0512

当然可以&#xff0c;下面是“opportunity”在考研英语中的常用意思和高频短语&#xff0c;采用大字体展示&#xff0c;便于记忆&#xff1a; ✅ opportunity 的考研常用意思&#xff1a; &#x1f449; 机会&#xff0c;良机 表示有利的时机或条件&#xff0c;尤指成功的可能…...

c++刷题便捷函数(类似于stoi的小函数)

标题 stoi(字符串转整形)map和set都有count成员函数&#xff0c;返回值是该key的个数&#xff0c;可以用来查是否存在该元素。bool is_sorted(nums.begin(), nums.end() 检验是否有序INT_MAX,INT_MIN分别是整形最大和最小初始化二维矩阵 vector<vector\<int>> mart…...

想实现一个基于MCP的pptx生成系统架构图【初版实现】

技术栈:Python + MCP协议 + python-pptx + FastMCP 核心创新点:通过MCP协议实现PPTX元素的动态化生成与标准化模板管理 当前还是个半成品,后续持续更新。 主要先介绍一下思路。 一、MCP协议与系统设计原理 1.1 为什么选择MCP? 标准化工具调用:通过MCP将PPTX元素生成逻辑封…...

jwt学习

基于token的鉴权机制也是无状态的(类似于http协议)&#xff0c;不需要保在服务端保留用户的认证或会话信息。 构成 jwt由三部分构成&#xff1a;头部、payload、签名&#xff0c;中间用.隔开 头部(header) 包含两部分信息&#xff1a;声明类型、声明加密的算法 例如&#xff1a…...

pth的模型格式怎么变成SafeTensors了?

文章目录 背景传统模型格式的安全隐患效率与资源瓶颈跨框架兼容性限制Hugging Face 的解决方案&#xff1a;SafeTensors行业与社区的推动SafeTensors 的意义总结 背景 最近要找一些适合embedding的模型&#xff0c;在huggingface模型库上看到一些排名比较靠前的&#xff0c;准…...

如何判断IP是否被平台标记

一、基础检测&#xff1a;连通性与黑名单筛查 网络连通性测试 Ping与Traceroute&#xff1a;通过命令测试延迟和路由路径&#xff0c;若延迟>50ms或存在异常节点&#xff08;如某跳延迟>200ms&#xff09;&#xff0c;可能影响可用性。示例命令&#xff1a; bash ping 8.…...

【c++】异常详解

目录 C语言处理错误的局限性异常的定义异常的具体使用细则异常的抛出与捕获在函数调用链中异常栈展开匹配原则异常的重新抛出异常规范throw(类型)noexcept 成熟的异常体系c自己的异常体系异常的优缺点优点缺点 异常安全 C语言处理错误的局限性 C语言处理错误常常会用到assert和…...

从模型加密到授权交付,CodeMeter赋能3D打印商业化全流程

引言 在数字化制造快速演进的当下&#xff0c;3D 打印&#xff08;增材制造&#xff09;作为具备高度灵活性与创新潜力的制造方式&#xff0c;正重塑备件供应链与产品生命周期管理。然而&#xff0c;随着应用场景不断扩展&#xff0c;企业面临的知识产权保护、数字资产商业化与…...

ESP32开发之freeRTOS的事件组

什么是事件组事件组的应用场景事件组的API函数事件组应用举例总结什么是事件组 概念:事件组就是一个整数,高8位给内核使用,其他位用来表示事件。在ESP32的IDF freeRTOS中,这个整数是32位的,低24位用来供事件组使用。 举一个生活中的例子: 你在等快递,有三个包裹来自不…...

K8S中构建双架构镜像-从零到成功

背景介绍 公司一个客户的项目使用的全信创的环境&#xff0c;服务器采用arm64的机器&#xff0c;而我们的应用全部是amd64的&#xff0c;于是需要对现在公司流水线进行arm64版本的同步镜像生成。本文介绍从最开始到最终生成双架构的全部过程&#xff0c;以及其中使用的相关配置…...

腾讯怎样基于DeepSeek搭建企业应用?怎样私有化部署满血版DS?直播:腾讯云X DeepSeek!

2025新春&#xff0c;DeepSeek横空出世&#xff0c;震撼全球&#xff01; 通过算法优化&#xff0c;DeepSeek将训练与推理成本降低至国际同类模型的1/10&#xff0c;极大的降低了AI应用开发的门槛。 可以预见&#xff0c;2025年&#xff0c;是AI应用落地爆发之年&#xff01; ✔…...

【论信息系统项目的质量管理】

论信息系统项目的质量管理 前言一、抓好质量管理规划工作&#xff0c;为质量管理和确认提供指南和方向。二、做好管理质量相关工作&#xff0c;促进质量过程改进。三、抓好控制质量&#xff0c;确保实现质量目标四、综合协调质量与成本、进度、范围的关系总结 前言 为解决日常出…...

SpringAI框架中的RAG模块详解及应用示例

SpringAI框架中的RAG模块详解及应用示例 RAG&#xff08;Retrieval-Augmented Generation&#xff09;可以通过检索知识库&#xff0c;克服大模型训练完成后参数冻结的局限性&#xff0c;携带知识让大模型根据知识进行回答。SpringAI框架提供了模块化的API来支持RAG&#xff0…...

图像增强技术

一、目的 通过本实验加深对数字图像增强操作的理解&#xff0c;熟悉MATLAB中的有关函数&#xff1b;了解直方图均衡化和卷积滤波的原理&#xff1b;熟悉低通和高通滤波模板的构造方法。 二、实验内容与设计思想 1、观察实验结果可看出&#xff0c; 原图像 I的对比度较低&…...

【Java学习笔记】多态参数

多态参数 应用&#xff1a;方法定义的形参类型为父类类型&#xff0c;实参允许为子类类型 // 父类 package polyparemeter;public class employee {private String name;private double salary;//构造器public employee(){}public employee(String name, double salary) {thi…...

计算机网络核心技术解析:从基础架构到应用实践

计算机网络作为现代信息社会的基石&#xff0c;承载着全球数据交换与资源共享的核心功能。本文将从网络基础架构、核心协议、分层模型到实际应用场景&#xff0c;全面解析计算机网络的核心技术&#xff0c;并结合行业最新趋势&#xff0c;为读者构建系统的知识体系。 一、计算机…...

LiveData:Android响应式编程的核心利器

LiveData是一种可观察的数据持有类,用于在Android应用中实现数据的响应式编程。它具有以下特点和作用: 特点 生命周期感知:LiveData能够感知与其关联的组件(如Activity、Fragment)的生命周期状态。只有当组件处于活跃状态(如Activity处于RESUMED状态)时,LiveData才会将…...

【LeeCode】1.两数之和

文章目录 1. 暴力求解2. 哈希表具体过程1. nums [2, 7, 11, 15]&#xff0c;target 9&#xff1a;2. nums [11, 15, 2, 7]&#xff0c; target 9 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff…...

继承关系下创建对象的具体流程

public class Person {int x initX(); // 显式初始化&#xff1a;调用方法 initX()public Person() {System.out.println("Parent 构造器执行, x " x);}int initX() {System.out.println("initX() 被调用了");return 100;} }public class Child extends…...

基于世界土壤数据库(HWSD)的中国土壤数据集(v1.1)(2009)

时间分辨率&#xff1a;年共享方式&#xff1a;开放获取数据大小&#xff1a;156.47 MB数据时间范围&#xff1a;2009元数据更新时间&#xff1a;2020-03-26 数据集摘要 数据来源于联合国粮农组织&#xff08;FAO&#xff09;和维也纳国际应用系统研究所(IIASA)所构建的世界土…...

mac M2能安装的虚拟机和linux系统系统

目前网上的资料大多错误&#xff0c;能支持M2的很少。 推荐安装的改造过的centos7也无法进行yum操作&#xff0c;建议安装centos8 VMware Fusion下载地址&#xff1a; https://pan.baidu.com/s/14v3Dy83nuLr2xOy_qf0Jvw 提取码: jri4 centos8下载地址&#xff1a; https://…...

212. 单词搜索 II【 力扣(LeetCode) 】

文章目录 零、原题链接一、题目描述二、测试用例三、解题思路四、参考代码 零、原题链接 212. 单词搜索 II 一、题目描述 给定一个 m x n 二维字符网格 board 和一个单词&#xff08;字符串&#xff09;列表 words&#xff0c; 返回所有二维网格上的单词 。 单词必须按照字母…...

【软考-高级】【信息系统项目管理师】论文写作注意事项及2014年至2024年历年论文题目汇总

论文写作注意事项 要求 字数要求&#xff1a;2500字以内&#xff08;2024年超过2500字&#xff0c;在线答题系统无法输入&#xff09;时长要求&#xff1a;2小时&#xff08;大多数人不够用&#xff09;内容要求&#xff1a; 必须响应子标题&#xff0c;如子标题要求写如何优…...

MySQL数据库表的约束

目录 1.null属性 2.默认值约束&#xff08;default&#xff09; 3.comment 4.zerofill 5.主键&#xff08;primary key&#xff09; 6.自增长&#xff08;auto_increment&#xff09; 7.唯一键&#xff08;unique&#xff09; ​编辑 8.外键 约束是为了安全插入数据&a…...

硅基计划2.0 学习总结 壹 Java初阶

一、初见Java &#xff08;1&#xff09;Java简介 首先不得不承认Java是一门优秀的程序设计语言 其系列的计算机软件和跨平台体系包括国内的生态链完善是C/C语言难以弥补的 &#xff08;2&#xff09;Java SE 全称Java Standard Edition&#xff0c;是Java体系的基础 &am…...

逆向破解:x64dbg

文章目录 一、CPU窗口1、反汇编窗口2、寄存器窗口3、栈地址窗口4、十六进制数据窗口5、堆栈参数解析窗口 二、常用快捷键三、字符串检索功能四、调试功能1、上一步 一、CPU窗口 1、反汇编窗口 2、寄存器窗口 寄存器窗口用于显示和解释当前线程环境下CPU寄存器的各种状态值和内…...

从MCU到SoC的开发思维转变

目录 1、硬件设计 2、软件开发 3、调试与测试 4、电源管理 微控制器单元&#xff08;MCU&#xff09;和系统级芯片&#xff08;SoC&#xff09;是嵌入式开发中最常见的两种处理器类型。MCU以其简单、低功耗的特点&#xff0c;广泛应用于特定控制任务&#xff1b;而SoC凭借强…...

3DGS-to-PC:3DGS模型一键丝滑转 点云 or Mesh 【Ubuntu 20.04】【2025最新版!!】

一、引言 3D高斯泼溅(3DGS)是一种新兴的三维场景表示方法&#xff0c;可以生成高质量的场景重建结果。然而&#xff0c;要查看这些重建场景&#xff0c;需要特殊的高斯渲染器。大多数3D处理软件并不兼容3D高斯分布模型&#xff0c;但它们通常都兼容点云文件。 3DGS-to-PC项目提…...

互联网大厂Java求职面试:优惠券服务架构设计与AI增强实践-3

互联网大厂Java求职面试&#xff1a;优惠券服务架构设计与AI增强实践-3 场景背景 面试场景设定在一家大型互联网公司&#xff0c;面试官为拥有10年以上经验的技术总监&#xff0c;专注于高并发、高可用系统的架构设计。候选人郑薪苦是一名技术潜力十足的程序员&#xff0c;擅…...

ABP-Book Store Application中文讲解 - 前期准备 - Part 3:Acme.BookStore项目模块详解

ABP-Book Store Application中文讲解-汇总-CSDN博客 本文通过对Acme.BookStore项目各模块的详解&#xff0c;让大家知道每个project用来干什么的&#xff0c;他们之间的引用关系是什么&#xff0c;同时知道怎样添加新的功能模块。 Acme.Bookstore 是主要 ABP Studio 模块的主…...

智慧城市综合运营管理系统Axure原型

这款Axure原型的设计理念紧紧围绕城市管理者的需求展开。它旨在打破传统城市管理中信息孤岛的局面&#xff0c;通过统一标准接入各类业务系统&#xff0c;实现城市运营管理信息资源的全面整合与共享。以城市管理者为中心&#xff0c;为其提供一个直观、便捷、高效的协同服务平台…...

Java中进阶并发编程

第一章、并发编程的挑战 并发和并行&#xff1a;指多线程或多进程 线程的本质&#xff1a;操作系统能够进行运算调度的最小单位&#xff0c;是进程&#xff08;Process&#xff09;中的实际工作单元 进程的本质&#xff1a;操作系统进行资源分配和调度的基本单位&#xff0c…...

cursor 出现问题 为客户解决问题

文档出自&#xff1a;https://www.kdocs.cn/l/cp5GpLHAWc0p...

【氮化镓】GaN在不同电子能量损失的SHI辐射下的损伤

该文的主要发现和结论如下: GaN的再结晶特性 :GaN在离子撞击区域具有较高的再结晶倾向,这导致其形成永久损伤的阈值较高。在所有研究的电子能量损失 regime 下,GaN都表现出这种倾向,但在电子能量损失增加时,其效率会降低,尤其是在材料发生解离并形成N₂气泡时。 能量损失…...

用drawdb.app可视化创建mysql关系表

平时自己建表,没有可视化图形参考 为了便于理解,用drwadb画mysql关系表 drawDB | Online database diagram editor and SQL generator...

模型上下文协议(MCP):AI的“万能插座”

~犬&#x1f4f0;余~ “我欲贱而贵&#xff0c;愚而智&#xff0c;贫而富&#xff0c;可乎&#xff1f; 曰&#xff1a;其唯学乎” 一、MCP解决什么问题&#xff1f; \quad 在过去的几年中&#xff0c;AI大模型快速发展&#xff0c;从横空出世的GPT到“AI界拼多多”DeepSeek&am…...

初识 Pandas:Python 数据分析的利器

在数据分析、数据清洗和可视化等领域&#xff0c;Python 无疑是最受欢迎的语言之一&#xff0c;而在 Python 的数据处理生态中&#xff0c;Pandas 是最核心、最基础的库之一。如果你接触数据分析、机器学习、金融建模&#xff0c;或者只是想处理一些 Excel 表格&#xff0c;那么…...

Python教程(四)参数提取pymysql

Python&#xff08;四&#xff09; 本系列其他教程&#xff1a; Python教程(二)&#xff1a;函数、异常、模块&包、文件读取、常用模块 Python教程(三)&#xff1a;类&对象、闭包、装饰器、类型注解 Python教程(三)&#xff1a;类&对象、闭包、装饰器、类型注解、…...

Halcon案例(一):C#联合Halcon识别路由器上的散热孔

本案例分3部分 识别效果,分别显示识别前后识别后;代码展示,分别是Halcon源码和Halcon转为C#的代码代码解释(解释在源码中) 原图如下: 处理后的图像: Halcon源码&#xff1a; *读取一张图像 read_image (Image, progres)*获取图像大小 get_image_size (Image, Width, Height)*关…...

SC5061串口设备联网服务器,4路RS-232,4路422/485串行接口

串口设备联网服务器&#xff0c;简称串口服务器。能够将RS-232/485/422串口设备联入TCP/IP网络&#xff0c;实现RS-232/485/422串口与TCP/IP网络接口的数据双向传输&#xff0c;使得串口设备能够具备联网功能&#xff0c;根据串口数量的不同&#xff0c;可以分为单串口、两串口…...

谈AI/OT 的融合

过去的十几年间&#xff0c;工业界讨论最多的话题之一就是IT/OT 融合&#xff0c;现在&#xff0c;我们不仅要实现IT/OT 的融合&#xff0c;更要面向AI/OT 的融合。看起来不太靠谱&#xff0c;却留给我们无限的想象空间。OT 领域的专家们不要再当“九斤老太”&#xff0c;指责这…...

RAGFlow 初步尝试 (01)

1. 起因&#xff0c; 目的: 简单尝试一下。 2. 先看效果 3. 过程: 目的: 研究 RAG 的实现过程。 实用目的&#xff1a; 对于一本电子书&#xff0c; pdf&#xff0c;我在读书的时候&#xff0c;可以问一写些问题。对一个 github 项目&#xff0c;可以迅速理解文件的关系。…...

Linux 服务器用 SSH 拉取多个 Git 工程

在一台 Linux 服务器上用 SSH 拉取两个 Git 工程&#xff0c;而这两个工程对应的是 不同的 Git 账号&#xff08;SSH Key&#xff09;&#xff0c;做法&#xff1a; 使用 SSH Config 配置多个 Git 账号 场景假设&#xff1a; 工程 A 的仓库地址&#xff1a;gitgithub.com:com…...

测试文章标题01

模型上下文协议&#xff08;Model Context Protocol, MCP&#xff09;深度解析 一、MCP的核心概念 模型上下文协议&#xff08;Model Context Protocol, MCP&#xff09;是一种用于规范机器学习模型与外部环境交互的标准化框架。其核心目标是通过定义统一的接口和数据格式&am…...

如何禁止chrome自动更新

百度了一下 下面这个方法实测有效 目录 1、WINR 输入 services.msc 2、在Services弹窗中找到下面两个service并disable 3、验证是否禁止更新成功&#xff1a; 1、WINR 输入 services.msc 2、在Services弹窗中找到下面两个service并disable GoogleUpdater InternalService…...

【C++重载操作符与转换】构造函数和复制控制

目录 一、构造函数&#xff1a;对象的初始化引擎 1.1 构造函数的定义与分类 1.2 初始化列表&#xff1a;高效且安全的初始化方式 1.3 显式构造函数与类型安全 二、复制控制&#xff1a;管理对象的生命周期 2.1 复制构造函数&#xff1a;深拷贝的核心 2.2 赋值运算符重载…...

CATIA高效工作指南——常规配置篇(二)

一、结构树&#xff08;Specification Tree&#xff09;操作技巧精讲 结构树是CATIA设计中记录模型历史与逻辑关系的核心模块&#xff0c;其高效管理直接影响设计效率。本节从基础操作到高级技巧进行系统梳理。 1.1 结构树激活与移动 ​​激活方式​​&#xff1a; ​​白线…...