webpack-bundle-analyzer文件大小分析工具

清疚 2023-06-21 05:56 3阅读 0赞

### 1、安装分析工具： ###

npm intall webpack-bundle-analyzer -D

### 2、webpack.prod.config.js 中添加如下代码 ###

if (config.build.bundleAnalyzerReport) {
      const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
      webpackConfig.plugins.push(new BundleAnalyzerPlugin())
    }

如图所示：![在这里插入图片描述][20191211145004350.png]

### 3、运行命令查看各文件大小 ###

**方式一**：执行命令：npm run build --report

**方式二**：  
1）package.json中scripts对象添加如下命令

scripts:{
    	... //省略无关代码
    	"analyz": "cross-env NODE_ENV=production cross-env npm_config_report=true npm run build"
    }

2）执行命令：npm run analyz

分析界面图如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70]

[20191211145004350.png]: https://img-blog.csdnimg.cn/20191211145004350.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191211150134465.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack-bundle-analyzer文件大小分析工具

1、安装分析工具： npm intall webpack-bundle-analyzer -D 2、webpack.prod.config.js 中添加如下代

清疚/ 2023年06月21日 05:56/ 0 赞/ 4 阅读

相关 vue文件大小

单位换算 <div class="size">{ { itemson.fileSize | fileSize}}</div> filters:

淩亂°似流年/ 2023年01月08日 13:26/ 0 赞/ 99 阅读

相关查看文件大小

1、最简单的查看方法可以使用ls -ll、ls-lh命令zhi进行查看，当使用ls -ll，会显示成字节大小，而ls- lh会以KB、MB等为单位进行显示，这样比较直观一些。

我会带着你远行/ 2023年01月04日 11:54/ 0 赞/ 129 阅读

相关文件大小换算

1 byte = 8 bits \[1\] 1KiB= 1,024 bytes \[1\] 1MiB= 1,048,576 bytes \[1\]

你的名字/ 2022年11月15日 06:15/ 0 赞/ 353 阅读

相关 Golang 文件大小可视化ls工具

源码地址 [点我][Link 1] ls 文件大小可视化ls工具（适合初学者练手） Usage git clone git@github.com:vua

红太狼/ 2022年10月10日 15:45/ 0 赞/ 114 阅读

相关文件大小转换

B转KB，MB，TB，PB public static String convertSize(long size) { DecimalForm

╰+哭是因爲堅強的太久メ/ 2022年08月03日 15:52/ 0 赞/ 132 阅读

相关 java 获取文件夹大小，文件大小，文件个数

http://blog.sina.com.cn/s/blog\_45096c6a0100btse.html package tony; i

拼搏现实的明天。/ 2022年05月14日 03:49/ 0 赞/ 219 阅读

相关 C#开发WinForm之文件实际大小和占用磁盘大小工具类FileSizeUtil

C\开发WinForm之文件实际大小和占用磁盘大小工具类FileSizeUtil 文章目录 C\开发WinForm之文件实际大小和占用磁盘大小工具类Fi

谁践踏了优雅/ 2022年04月08日 08:46/ 0 赞/ 473 阅读

相关 linux 二进制文件分析工具

语法：ldd参数文件作用：输出共享库的依赖信息例如： ldd /bin/cat libc.so.6 => /lib/tls/li

分手后的思念是犯贱/ 2021年11月10日 06:22/ 0 赞/ 272 阅读

相关获得二进制文件里符号的工具以及减少目标文件大小的工具

一获得二进制文件里符号的工具 1 代码 include<iostream> using namespace std; class Test{

冷不防/ 2021年09月19日 09:52/ 0 赞/ 195 阅读