webpack查看各个阶段耗时示例:

一: 简单查看编译耗时

webpack5默认是开启profile的,

webpack.config.js
module.exports = {entry: './src/index.js',output: {filename: 'main.js'},
}
npm i core-js
import 'core-js/stable'
src/index.js
const util = () => {return 'util'
}let zhang = util()zhang += 'zhang'
打包输出信息
> demo01@1.0.0 build
> webpackasset main.js 1010 KiB [emitted] (name: main)
runtime modules 1.13 KiB 5 modules
modules by path ./node_modules/core-js/modules/*.js 338 KiB./node_modules/core-js/modules/es.symbol.js 322 bytes [built] [code generated]./node_modules/core-js/modules/es.json.stringify.js 2.98 KiB [built] [code generated]./node_modules/core-js/modules/es.symbol.description.js 2.54 KiB [built] [code generated]./node_modules/core-js/modules/es.symbol.async-iterator.js 230 bytes [built] [code generated]+ 295 modules
modules by path ./node_modules/core-js/internals/*.js 226 KiB./node_modules/core-js/internals/path.js 85 bytes [built] [code generated]./node_modules/core-js/internals/export.js 2.63 KiB [built] [code generated]./node_modules/core-js/internals/global.js 649 bytes [built] [code generated]./node_modules/core-js/internals/object-get-own-property-descriptor.js 1.11 KiB [built] [code generated]       + 256 modules
./src/demo0513/index.js 136 bytes [built] [code generated]
./node_modules/core-js/stable/index.js 11.6 KiB [built] [code generated]
webpack 5.91.0 compiled successfully in 1061 ms

可以看到编译耗时1061ms

二: 查看各个阶段耗时

webpack.config.js
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");  
const smp = new SpeedMeasurePlugin();  const config = {entry: './src/index.js',output: {filename: 'main.js'},mode: 'development',
}// 使用插件包装你的配置  
module.exports = smp.wrap(config);
npm i core-js
src/index.js
import 'core-js/stable'const util = () => {return 'util'
}let zhang = util()zhang += 'zhang'
> demo01@1.0.0 build
> webpack(node:24240) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
(Use `node --trace-deprecation ...` to show where the warning was created)SMP  ⏱
General output time took 1.038 secsSMP  ⏱  Loaders
modules with no loaders took 0.647 secsmodule count = 561asset main.js 1010 KiB [compared for emit] (name: main)
runtime modules 1.13 KiB 5 modules
modules by path ./node_modules/core-js/modules/*.js 338 KiB./node_modules/core-js/modules/es.symbol.js 322 bytes [built] [code generated]./node_modules/core-js/modules/es.json.stringify.js 2.98 KiB [built] [code generated]./node_modules/core-js/modules/es.symbol.description.js 2.54 KiB [built] [code generated]./node_modules/core-js/modules/es.symbol.async-iterator.js 230 bytes [built] [code generated]+ 295 modules
modules by path ./node_modules/core-js/internals/*.js 226 KiB./node_modules/core-js/internals/path.js 85 bytes [built] [code generated]./node_modules/core-js/internals/export.js 2.63 KiB [built] [code generated]./node_modules/core-js/internals/global.js 649 bytes [built] [code generated]./node_modules/core-js/internals/object-get-own-property-descriptor.js 1.11 KiB [built] [code generated]       + 256 modules
./src/demo0513/index.js 136 bytes [built] [code generated]
./node_modules/core-js/stable/index.js 11.6 KiB [built] [code generated]
webpack 5.91.0 compiled successfully in 1043 ms

从 SMP 的信息可以看到
构建耗时: 1.038s (和webpack打印的1043ms差不多)
有 561 个模块没有使用任何loader来处理,耗时0.647s

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

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

相关文章

Kotlin核心编程知识点-02-面向对象

文章目录 1.类和构造方法1.1.Kotlin 中的类及接口1.1.1.Kotlin 中的类1.1.2.可带有属性和默认方法的接口 1.2.更简洁地构造类的对象1.2.1.构造方法默认参数1.2.2.init 语句块1.2.3.延迟初始化:by lazy 和 lateinit 1.3.主从构造方法 2.不同的访问控制原则2.1.限制修…

Apifox接口报错401,msg:“未授权”

Apifox接口报错401,msg:“未授权” 报错: 原因:Apifox接口好像两小时token就过期了,得重新获取 一、打开登录接口,找到token 二、打开根目录找到token,将登录的token值拷贝过来,点击保存 三…

Milvus的系统架构

简介 Milvus的构建在许多知名的向量搜索库比如Faiss, HNSW, DiskANN, SCANN等之上的,它针对稠密向量数据集的相似搜索而设计,能支持百万、十亿甚至万亿级别的向量搜索。 Milvus支持数据分片,流式数据插入,动态schema&#xff0c…

JVM运行时内存:虚拟机栈

文章目录 1. 概述2. 栈针3. 栈针内部结构3.1 局部变量表3.2 操作数栈3.3 动态链接3.4 方法返回地址3.5 一些附加信息 运行时内存整体结构如下图所示: 1. 概述 如何理解栈管运行,堆管存储? 角度一:GC;OOM角度二:栈、堆执行效率角…

电子合同怎么盖章的

数字证书盖章:利用个人或企业的数字证书进行盖章。数字证书作为数字身份证明,确保了电子签名和盖章的可信度。通过加密技术,确保合同内容不被篡改,盖章过程完成后,合同具有法律效力。 时间戳盖章:在电子合…

STM32 HAL TM1638读取24个按键

本文分享一下天微电子的另一款数码管按键驱动芯片TM1638的单片机C语言驱动程序。 笔者采用的MCU是STM32单片机,STM32CubeMX Keil5开发,使用了HAL库。 一、TM1638介绍 1、基础信息 TM1638属于一款LED驱动控制专用电路,其特性如下&#xf…

析构函数详解

目录 析构函数概念特性对象的销毁顺序 感谢各位大佬对我的支持,如果我的文章对你有用,欢迎点击以下链接 🐒🐒🐒 个人主页 🥸🥸🥸 C语言 🐿️🐿️🐿️ C语言例题 &…

两步将 CentOS 6.0 原地升级并迁移至 RHEL 7.9

《OpenShift / RHEL / DevSecOps 汇总目录》 说明 本文介绍如何将一个 CentOS 6.0 的系统升级并转换迁移到 RHEL 7.9。 本文是《在离线环境中将 CentOS 7.X 原地升级并迁移至 RHEL 7.9》阶进篇。 所有被测软件的验证操作可参见上述前文中对应章节的说明。 准备 CentOS 6.…

语言模型测试系列【8】

语言模型 文心一言星火认知大模型通义千问豆包360智脑百川大模型腾讯混元助手Kimi Chat商量C知道 这次的测试比较有针对性,是在使用钉钉新推出的AI助理功能之后发现的问题,即创建AI助理绑定自己钉钉的知识库进行问答,其中对于表结构的文档学…

【echart】实现echart图的富文本样式

贴源码 let xData [山西,山东,内蒙,甘肃];let averData [2, 3,1, 3];var eicon path://M480.55,252.18L318.88,498.04c-15.95,24.25,1.08,56.57,30.11,57.12l147,2.79L448.5,696.92c-14.74,43.15,39.88,75.83,70.93,42.44l216.73-233.04c21.93-23.58,5.21-61.98-27-61.98H56…

【面试干货】 两个有序数组的合并排序

【面试干货】 两个有序数组的合并排序 1、实现思想2、代码实现 💖The Begin💖点点关注,收藏不迷路💖 1、实现思想 使用两个指针分别指向两个数组的起始位置,然后逐个比较两个指针所指向的元素,将较小的元素…

【IoTDB 线上小课 03】时序数据库 VS 实时数据库,区别是?

好评满满的【IoTDB 视频小课】系列又来了~ 关于 IoTDB,关于物联网,关于时序数据库,关于开源... 你想学习的重点,给我们 3-5 分钟,清晰地讲给你听: 时序数据库 VS 实时数据库 工业数字化转型愈发受到重视的当…

OpenAI 发布 GPT-4o,再次巩固行业地位!

5 月 14 日凌晨 1 点(太平洋时间上午 10 点),OpenAI 发布了其最新的 GPT-4o,再次巩固了其在人工智能领域的领导地位。这次发布不仅仅是一个产品的推出,更是向世界宣告 AI 技术已迈入一个全新的纪元。OpenAI 的 CEO 萨姆…

本机搭建RabbitMQ

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 一、下载安装包,搭建过程 二、重要概念介绍 三、创建用户 方式一:命令行 方式二:管理后台 3.1 创建用户 3.2 分配权限 3.3 提…

小程序|锁定查询功能如何使用?

学生或家长想要实现自己查询完成后,任何人都无法再次查询,老师应该如何设置?易查分的【锁定查询功能】就可实现,下面教大家如何使用吧。 📌使用教程 🔒锁定查询功能介绍 ✅学生或家长自主锁定:开…

【SQL】SQL常见面试题总结(1)

目录 1、检索数据1.1、从 Customers 表中检索所有的 ID1.2、检索并列出已订购产品的清单1.2、检索所有列 2、排序检索数据2.1、检索顾客名称并且排序2.2、对顾客 ID 和日期排序2.3、按照数量和价格排序2.4、检查 SQL 语句 3、过滤数据3.1、返回固定价格的产品3.2、返回产品并且…

高效协同,智慧绘制:革新型流程图工具全解析

流程图,作为一种直观展示工作过程和系统运作的工具,在现代办公和项目管理中发挥着不可或缺的作用。 其优势在于能够清晰、直观地呈现复杂的过程和关系,帮助人们快速理解并掌握关键信息。同时,流程图也广泛应用于各种场景&#xf…

STM32HAL库-中断篇

中断 中断简介 中断是一种事件处理机制,可以暂停主程序的运行,转而处理特定事件程序。 中断的作用和意义: 实时控制 在确定事件内对响应事件做出相应 故障处理 检测到故障需要第一时间处理 数据传输 如串口通信,不确定数…

独家|暴雨推出基于国产X86芯片的四路服务器

伴随着智慧计算时代的到来和企业数字化转型的深入,人工智能、大数据、虚拟化等创新技术在应用普及的过程中,也在不断地细分和深化,使得企业的业务系统日趋复杂,数据量、数据类型更加庞大,对计算平台的性能要求“水涨船…

CET6级(笔试备考)

CET6笔试 做题技巧 备考注意 感觉考前一个月还是要多刷几套真题啊,刷个10套吧。 参考链接:https://blog.csdn.net/m0_57656758/article/details/130707582