包文件分析器 Webpack Bundle Analyzer
webpack-bundle-analyzer 是一个非常有用的工具,用于可视化和分析 Webpack 打包生成的文件。这使得开发者能够更好地理解应用的依赖关系、包的大小,以及优化打包的机会。以下是关于 webpack-bundle-analyzer 的详细介绍,包括它的安装、使用以及如何解读生成的报告。文档。
安装
你可以通过 npm 或 yarn 安装 webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer
或者使用 yarn:
yarn add --dev webpack-bundle-analyzer
配置
webpack-bundle-analyzer 可以通过多种方式使用,以下是常见的几种:
1. 在 Webpack 配置中使用
在你的 Webpack 配置文件中引入 webpack-bundle-analyzer 插件,并将其添加到 plugins 数组中。
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');module.exports = {// 其他配置...plugins: [new BundleAnalyzerPlugin({// 这里可以设置一些选项analyzerMode: 'static', analyzerPort: 8888,reportFilename: 'report.html', // 打包后的报告文件名openAnalyzer: true, // 自动打开报告generateStatsFile: true, // 生成 stats.json 文件statsFilename: 'stats.json', // stats 文件名称}),// 其他插件...],
};
运行Webpack并生成分析报告:
npx webpack --mode production
这将在dist目录下生成一个report.html文件,打开这个文件,你将看到一个交互式的图表,显示了你的包的大小分布。
在上述配置中,analyzerMode 可以选择 server、static 或 disabled:
server:在本地服务器上启动一个分析器,默认在http://localhost:8888。static:生成一个静态的 HTML 文件,默认文件名为report.html。disabled:禁用分析器。
2. 通过命令行使用
你可以在命令行中使用 webpack-bundle-analyzer,通过运行以下命令来生成报告:
npx webpack-bundle-analyzer <path-to-your-stats-file>
首先,你需要生成 Webpack 的 stats 文件。可以通过在 Webpack 配置中添加 --json 选项来生成:
webpack --json > stats.json
然后运行分析器:
npx webpack-bundle-analyzer stats.json
3. 在 Vue CLI 项目中使用
如果你在使用 Vue CLI 创建的项目,你可以在 vue.config.js 中配置 webpack-bundle-analyzer:
// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.exports = {configureWebpack: {plugins: [// 配置包分析器new BundleAnalyzerPlugin({analyzerMode: 'static',// analyzerMode: 'server',// analyzerMode: 'disabled',// analyzerHost: '127.0.0.1',// analyzerPort: 8888,reportFilename: 'report.html',defaultSizes: 'gzip',generateStatsFile: true, // 如果为true,则Webpack Stats JSON文件将在bundle输出目录中生成openAnalyzer: false, // 默认在浏览器中自动打开报告statsFilename: 'stats.json', // 如果generateStatsFile为true,将会生成Webpack Stats JSON文件的名字statsOptions: { source: false }})]}
}
在 package.json 中,找到 scripts,添加
"analyz": "cross-env NODE_ENV=production vue-cli-service build --mode production",
或
"analyz": "cross-env NODE_ENV=production npm run build",
然后构建打包,完成后,我们发现在 dist 文件夹里生成了一个 report.html 文件与stats.json 文件
npm run analyz
这种方式会生成 stats.json 文件(很大,部署时需要移除),除此之外,还能看到每一个文件的 Stat size、Parsed size、Gzipped size三种格式的文件大小
webpack-bundle-analyzer的主要配置项及其作用:
-
analyzerMode:
- 类型:
string - 默认值:
'server' - 说明: 指定分析模式。可选值:
'server': 在服务器上启动 HTTP 服务并打开浏览器窗口显示报告(默认)。'static': 生成一个包含报告的单个 HTML 文件。'json': 生成 JSON 格式的报告文件。'disabled': 不生成任何报告或开启服务器。
- 类型:
-
reportFilename:
- 类型:
string - 默认值:
'report.html' - 说明: 当
analyzerMode为'static'时,这个选项决定了生成的 HTML 报告文件的名称与路径。
- 类型:
-
openAnalyzer:
- 类型:
boolean - 默认值:
true - 说明: 是否在构建完成后自动打开报告页面。
- 类型:
-
generateStatsFile:
- 类型:
boolean - 默认值:
false - 说明:是否在生成报告的同时也生成一个 stats.json 文件,该文件包含了打包过程中的详细信息。
- 类型:
-
statsFilename:
- 类型:
string - 默认值:
'stats.json' - 说明: : 当
generateStatsFile设置为true时,这个选项用于指定生成的 stats 文件的名称。
- 类型:
-
statsOptions:
- 类型:
object - 默认值:
null - 说明: 用于配置生成
stats文件的选项。可以传入 Webpack 的 Stats 选项,以便定制化包含的信息。
- 类型:
-
openAnalyzer:
- 类型:
boolean - 默认值:
true - 说明: 是否在完成构建后自动打开分析报告。
- 类型:
-
excludeAssets:
- 类型:
array - 默认值:
[] - 说明: 允许通过正则表达式或函数来排除特定资源不被包含到报告中。
- 类型:
-
analyzerHost 和 analyzerPort:
- 类型:
number - 默认值:
8888 - 说明: 分别指定运行本地 HTTP 服务器的主机名和端口。当你选择
'server'模式时,这些配置将决定你通过哪个地址访问分析报告。
- 类型:
-
defaultSizes:
- 类型:
string - 默认值:
'parsed' - 说明: 报告中默认显示的大小类型。可选值:
'stat': 包含原始大小。'parsed': 包含解析后的大小(即去除了压缩后的大小)。'gzipped': 包含 Gzip 后的大小。- :brotli 压缩后的大小
- 类型:
查看报告
如果你选择了 static 模式,报告将生成在指定的文件中(如 bundle-report.html)。打开文件时,你会看到如下内容:
- 包大小:每个模块的大小,以及整个应用的总大小。
- 依赖树:显示各个模块之间的依赖关系,可以展开和收缩查看。
- 颜色编码:模块的颜色通常表明其大小,帮助你快速识别大包。

解读报告
在分析报告中,你可以找到以下信息:
- 模块大小:可以查看各个模块的实际大小,识别出哪些包过大,需要优化。
- 依赖关系:可以很直观地看到各个模块是如何相互依赖的,便于理解整个应用的结构。
- 第三方库:可以查看第三方库(如 React、Lodash 等)的大小,帮助你决定是否需要使用更轻量的替代库。
优化
根据分析结果,你可以采取以下措施来优化你的打包:
- 代码分割:使用动态导入(
import())来分割较大的模块,从而按需加载。 - 懒加载:将不必要的模块懒加载,只有在需要时再加载它们。
- 移除未使用的依赖:检查并删除不再使用的依赖包。
- 使用轻量库:如果某些库的大小过大,考虑使用更小的替代库。
相关文章:
包文件分析器 Webpack Bundle Analyzer
webpack-bundle-analyzer 是一个非常有用的工具,用于可视化和分析 Webpack 打包生成的文件。这使得开发者能够更好地理解应用的依赖关系、包的大小,以及优化打包的机会。以下是关于 webpack-bundle-analyzer 的详细介绍,包括它的安装、使用以…...
代码随想录day14
二叉树的反转,采用迭代,只能用前序和后序遍历 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(i…...
react19新API之use()用法总结
React use() Hook 使用指南 概述 use() 是 React 19 引入的新 Hook,它允许你在组件内部直接使用 Promise、Context 和其他可订阅的值。它是一个更通用的数据获取和订阅机制。 基本语法 const value use(resource);主要用途 1. Promise 处理 function UserDet…...
67,【7】buuctf web [HarekazeCTF2019]Avatar Uploader 2(未完成版)
进入靶场 和上一题一母同胞,先把上一题的答案拖进去看看 区别在于上一题这块直接显示了flag,这里并没有 看看源码 加载不出来,ctrlu <!-- 上传头像的提示信息,说明上传要求 --><p>Please upload a PNG image less th…...
ANSYS HFSS 中的相控天线阵列仿真方法
概述 相控天线阵列系统广泛使用,从国防雷达应用到商业 5G 应用。设计这些天线阵列涉及复杂的数学运算,需要全波仿真。Ansys HFSS 全场 3D 电磁仿真软件可以在合理的时间内以较低的计算成本仿真复杂的相控阵天线系统,同时考虑复杂激励、环境&…...
stm32 L051 adc配置及代码实例解析
一 cude的设置: 1. 接口的基本设置: 2. 参数的设置: 二 代码的逻辑: 1. 上面的直接生成代码,然后使用下面源码即可读到adc的数据: void adc_battery_start(void) {uint32_t ADC_value 0;HAL_ADC_Start(&…...
KUKA示教器仿真软件OfficeLite8.6.2,EthernetKRL3.1.3通信
一、准备软件。 1、vmware17.6.1 2、OfficeLite8.6.2 3、EthernetKRL3.1.3 4、KUKA Router 5、EthernetKRL_Server 通过网盘分享的文件:库卡相关软件 链接: https://pan.baidu.com/s/1NwvR3RVP0edLBeZnnnCYvw 提取码: smys 二、安装vmware17.6.1 1、找到下载…...
Erlang语言的并发编程
Erlang语言的并发编程 引言 并发编程是现代软件开发中的一个重要领域,尤其是在面对需要高效处理大量任务的应用时。Erlang是一种专门设计用于并发编程的编程语言,由于其在电信和即时通信系统中的广泛应用,逐渐引起了开发者的关注。Erlang的…...
【数据挖掘实战】 房价预测
本次对kaggle中的入门级数据集,房价回归数据集进行数据挖掘,预测房屋价格。 本人主页:机器学习司猫白 机器学习专栏:机器学习实战 PyTorch入门专栏:PyTorch入门 深度学习实战:深度学习 ok,话不多…...
我的创作纪念日,纪念我的第512天
目录 年末 年初 入围 博客 变动 生活 期待 年末 很快,2024年已经过去了,本想在跨年夜的时候营造一点小小的仪式感,结果也因为身体的原因放弃了,浑身感觉疼痛,躺在床上,闭上眼睛,什么也不…...
【科研建模】Pycaret自动机器学习框架使用流程及多分类项目实战案例详解
Pycaret自动机器学习框架使用流程及项目实战案例详解 1 Pycaret介绍2 安装及版本需求3 Pycaret自动机器学习框架使用流程3.1 Setup3.2 Compare Models3.3 Analyze Model3.4 Prediction3.5 Save Model4 多分类项目实战案例详解4.1 ✅ Setup4.2 ✅ Compare Models4.3 ✅ Experime…...
PHP语言的网络编程
PHP语言的网络编程 网络编程是现代软件开发中不可或缺的一部分,尤其是在日益发展的互联网时代。PHP(Hypertext Preprocessor)是一种广泛使用的开源脚本语言,专门用于Web开发。它的灵活性、易用性以及强大的社区支持使得PHP在网络…...
计算机的错误计算(二百一十八)
摘要 大模型能确定 sin(2.6^100) 的符号吗?实验表明,大模型给的结论是正确的,但其证明过程是错误百出。大模型的推理实在是不敢恭维。 就同样题目,测试一下另外一个大模型。 例1. 能确定 sin(2.6^100) 的符号吗? 下…...
《鸿蒙Next原生应用的独特用户体验之旅》
界面设计与交互方面 简洁性与一致性:iOS界面以简洁统一著称,而鸿蒙Next的界面设计同样主打简洁,各部件采用悬浮效果,营造出空间感,如天气App的展示更加逼真。安卓系统由于不同厂商的定制化程度较高,导致用户…...
MDX语言的字符串处理
MDX语言的字符串处理 引言 MDX(Multidimensional Expressions)是一种专门用于多维数据库查询和分析的语言,特别是在Microsoft SQL Server Analysis Services(SSAS)中使用广泛。MDX不仅用于查询多维数据,还…...
游戏AI,让AI 玩游戏有什么作用?
让 AI 玩游戏这件事远比我们想象的要早得多。追溯到 1948 年,图灵和同事钱伯恩共同设计了国际象棋程序 Turochamp。之所以设计这么个程序,图灵是想说明,机器理论上能模拟人脑能做的任何事情,包括下棋这样复杂的智力活动。 可惜的是…...
Java 设计模式 二 单例模式 (Singleton Pattern)
单例模式 (Singleton Pattern) 是一种常见的设计模式,属于创建型模式。它的核心思想是确保一个类只有一个实例,并提供一个全局访问点来获取该实例。通常用于那些需要全局控制的场景,比如配置管理、日志系统、数据库连接池等。 1. 单例模式的…...
Java 中 final 关键字的奥秘
目录 一、final 修饰类:封印的 “永恒之石” 二、final 修饰变量:锁定的 “不变之值” 三、final 修饰方法:不可撼动的 “坚固堡垒” 四、总结 在 Java 编程的世界里,final 关键字就像一把神奇的 “锁”,一旦使用&…...
C# 通用缓存类开发:开启高效编程之门
引言 嘿,各位 C# 开发者们!在当今快节奏的软件开发领域,提升应用程序的性能就如同给跑车装上涡轮增压,能让你的项目在激烈的竞争中脱颖而出。而构建一个高效的 C# 通用缓存类,无疑是实现这一目标的强大武器。 想象一…...
电脑办公技巧之如何在 Word 文档中添加文字或图片水印
Microsoft Word是全球最广泛使用的文字处理软件之一,它为用户提供了丰富的编辑功能来美化和保护文档。其中,“水印”是一种特别有用的功能,它可以用于标识文档状态(如“草稿”或“机密”)、公司标志或是版权信息等。本…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
网络编程(Modbus进阶)
思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候,写过一篇简单实现,后期随着对该模型的深入研究,本次记录涉及到prophet 的公式以及参数调优,从公式可以更直观…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
Linux离线(zip方式)安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1:修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本:CentOS 7 64位 内核版本:3.10.0 相关命令: uname -rcat /etc/os-rele…...
