webpack-bundle-analyzer分析打包文件

水深无声 2022-12-24 01:52 91阅读 0赞

1.  安装：

`npm install --save-dev webpack-bundle-analyzer`

1.  在`vue.config.js`中配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    
    module.exports = {
        chainWebpack: config => {
            // 打包分析
            if (process.env.IS_ANALYZ) {
              config.plugin('webpack-report')
                .use(BundleAnalyzerPlugin, [{
                  analyzerMode: 'static',
                }]);
            }
        }
    }

配置的时候可以根据实际需要修改分析报告，参考：[https://github.com/webpack-contrib/webpack-bundle-analyzer][https_github.com_webpack-contrib_webpack-bundle-analyzer]，比如：

config.plugin('webpack-report')
            .use(BundleAnalyzerPlugin, [{
              analyzerMode: 'server',
              analyzerHost: '127.0.0.1',
              analyzerPort: 8889,
              reportFilename: 'report.html',
              defaultSizes: 'parsed',
              openAnalyzer: true,
              generateStatsFile: false,
              statsFilename: 'stats.json',
              statsOptions: null,
              logLevel: 'info'
            }])

1.  生成打包模块大小相关的报告：

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-29fWDHa6-1606368724247)(https://images.fengjiaheng.top/images/20190829/report.gif)\]

[https_github.com_webpack-contrib_webpack-bundle-analyzer]: https://github.com/webpack-contrib/webpack-bundle-analyzer

发表评论取消回复

表情：

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

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

相关阅读

相关 jenkins自动打包设置打包文件脚本

jenkins自动打包.user.js // ==UserScript== // @name jenkins自动打包 // @name

灰太狼/ 2023年10月05日 16:40/ 0 赞/ 42 阅读

相关 webpack 打包html文件

webpack 打包html文件 `webpack.config.js`配置文件内容为： / loader: 1. 下载 2. 使用（配置）

一时失言乱红尘/ 2023年01月09日 03:43/ 0 赞/ 245 阅读

相关 webpack-bundle-analyzer分析打包文件

1. 安装： `npm install --save-dev webpack-bundle-analyzer` 1. 在`vue.config.js`中配置：

水深无声/ 2022年12月24日 01:52/ 0 赞/ 92 阅读

相关 maven打包丢失文件

resource文件下有json文件和yml配置文件，在项目集成了mybatis后打包，发现项目启动不了，也没有日志，发现pom文件配置问题在pom文件的build中，添加

以你之姓@/ 2022年11月12日 02:53/ 0 赞/ 222 阅读

相关 Idea打包Jar文件

前言 > 如何使用Idea把多个可执行的Class文件，打到一个Jar包里，使用Java命令执行不同的Class文件呢？还有，如何打成直接可执行的Jar包呢？下面进行说明

左手的ㄟ右手/ 2022年07月12日 10:23/ 0 赞/ 221 阅读

相关简易文件打包程序

对指定目录下面的文件进行打包。简易解包程序参考博客另外一篇文章： [http://blog.csdn.net/yi\_ming\_he/article/details/

逃离我推掉我的手/ 2022年06月09日 06:23/ 0 赞/ 173 阅读

相关 webpack打包原理和manifest文件分析

打包工具要解决的问题：文件依赖管理梳理文件之间的依赖关系资源加载管理处理文件的加载顺序（先后时机）和文件的加载数量（合并、嵌入、拆分）效率与优

Myth丶恋晨/ 2022年05月27日 13:26/ 0 赞/ 341 阅读

相关 Idea 打包war文件

最近由于粗心导致花费了半天打包war部署到tomcat后，访问提示404。在Idea调试的时候是正常的。现在总结下步骤 1. SpringBootStartApplicati

野性酷女/ 2022年05月10日 14:08/ 0 赞/ 222 阅读

相关 webpack打包文件过程

webpack打包 1)安装webpack $ npm install webpack webpack-cli --save-dev 2)添加配置文件 we

快来打我*/ 2022年05月08日 06:14/ 0 赞/ 327 阅读

相关 tar 打包隐藏文件

前言：先说一下遇到的场景：前段时间在配合做 DevOps，组内有块代码是 php 的，需要用 tar 命令打包归档上传到 nexus 库，后来发现解压出来的包居然缺失了...

测试账号/ 2021年01月19日 17:33/ 0 赞/ 1063 阅读