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

清疚 2023-06-21 05:56 22阅读 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 条评论，22人围观）

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

相关阅读

相关 iOS-dSYM 文件分析工具

来到新公司后，前段时间就一直在忙，前不久项目终于成功发布上线了，最近就在给项目做优化，并排除一些线上软件的 bug，因为项目中使用了友盟统计，所以在友盟给出的错误信息统计中

约定不等于承诺〃/ 2023年10月17日 20:12/ 0 赞/ 20 阅读

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

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

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

相关 java获取文件大小_Java获取文件大小

java获取文件大小 Today we will look into different ways to get file size in Java. 今天，我们将研究使用

梦里梦外;/ 2023年02月28日 08:39/ 0 赞/ 23 阅读

相关 vue文件大小

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

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

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

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

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

相关文件大小转换

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

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

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

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

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

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

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

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

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

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

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

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

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

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