标签: webpack-bundle-analyzer

我想了解我的 angular 代码是如何捆绑的以及哪些块文件。因此我使用“Webpack 包分析器”。对于某些模块，它在报告中写为：router.js + "12 Modules"。

我如何确定 的内容12 Modules？我点击了这条线，但没有帮助。

我运行以下命令来创建stats.json:

ng build --prod --stats-json

在此之后我执行下面的代码:

webpack-bundle-analyzer dist/stats.json

一旦我执行它,我在终端中收到以下错误:

'webpack-bundle-analyzer'不被识别为内部或外部命令,可操作程序或批处理文件.

我已经安装了webpack-bundle-analyzer.

在Package.json文件中它可用

"webpack-bundle-analyzer":"^ 2.11.1"

请帮我解决.

注意:Stats.json在dist文件夹中可用

我是 webpack 的新手，我有一个使用vue cli. 在使用 分析 webpack 包（在生产模式下使用 构建vue-cli-service build）时webpack-bundle-analyzer，我发现一个特定文件bn.js被多次包含在包中。运行时npm ls bn.js我发现它的父依赖是webpack它本身。

`-- webpack@4.44.1
  `-- node-libs-browser@2.2.1
    `-- crypto-browserify@3.12.0
      +-- browserify-sign@4.2.1
      | +-- bn.js@5.1.3
      | +-- browserify-rsa@4.0.1
      | | `-- bn.js@4.11.9
      | +-- elliptic@6.5.3
      | | `-- bn.js@4.11.9
      | `-- parse-asn1@5.1.6
      |   `-- asn1.js@5.4.1
      |     `-- bn.js@4.11.9
      +-- create-ecdh@4.0.4
      | `-- bn.js@4.11.9
      +-- diffie-hellman@5.0.3
      | +-- bn.js@4.11.9
      | `-- miller-rabin@4.0.1
      |   `-- bn.js@4.11.9
      `-- public-encrypt@4.0.3
        `-- bn.js@4.11.9

所以我的问题是，当 webpack …

我需要将捆绑文件大小作为命令输出获取或将其写入文件。

我已经考虑过webpack-bundle-analyzer，但命令和 JSON 文件输出似乎做了很多与我的用例无关的事情。

我也考虑过该bundlesize包，但它主要进行比较检查并将失败或成功状态报告为命令输出。

如果有人对哪些相关工具、命令或标志可以帮助实现这一目标有任何想法。我们将不胜感激。

干杯

我正在为我的 Angular 7 应用程序运行 Webpack Bundle Analyzer，它产生如下输出：

根据此处的故障排除部分使用 webpack.optimize.ModuleConcatenationPlugin 时，这是一个已知的警告。他们对 Angular CLI < 6 提出了建议。我也在这里找到了建议注释掉 ModuleConcatenationPlugin 的建议，但是，它没有确定应该在哪里注释掉。

您知道如何修复为 Angular CLI 7.1.0 连接的模块吗？谢谢你的时间。

我正在尝试为我的 Angular 6 应用程序生成 stats.json 文件。下面的事情我已经尝试过了，但根本没有生成文件。我的系统需要在每个 angular cli 命令之前运行“npm run”。

1. 我已经运行了"npm run ng build --prod --stats-json"以及"npm run ng build --prod --stats-json=true"。

2. 我已经运行了“npm run ng build --stats-json”以及“npm run ng build --stats-json=true”（没有构建命令）。

3. 通过参考 cli 文档使用“npm run ng build --statsJson=true”。

但是仍然没有生成 stats.json 文件，我想使用 webpack 包分析器读取该文件。欢迎在这方面提供任何帮助、建议或更正。

下面是我的 package.json 中的脚本。

“脚本”：{

"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"gulp": "gulp",
"bundle-report": "webpack-bundle-analyzer dist/stats.json", …

我正在尝试使用https://www.npmjs.com/package/@next/bundle-analyzer来减小我网站的包大小

此刻，当我npm analyze与

"analyze": "cross-env ANALYZE=true next build",

它不输出具有所需可视化效果的 html 文件。

这是我的 next.config.js

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')


const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
  })

module.exports = withPWA({
  pwa: {
    dest: 'public',
    runtimeCaching,
  },
  poweredByHeader: false,
},
withBundleAnalyzer(),

)

使用这个nextjs-analyze-app-bundle 教程。

出了什么问题？

刚刚开始使用下一个捆绑分析器。我无法理解这些随机数是什么，它们被赋予 Next 应用程序的特定页面。

例如：1883.js. 1883年是什么？

这是我的webpack设置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;


const SOURCE_DIR = './src';
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: SOURCE_DIR + '/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = env => {
  console.log(`Environment Configs: ${JSON.stringify(env) || 'Default'}`);
  console.log(`
  Available Configs:
  --env.watch = true / false //for allow webpack to watch build
  `)
  let environment = env || {};
  const {
    watch,
    analyze,
  } = environment;

  const configedAnalyzer = new BundleAnalyzerPlugin({
    // Can be `server`, `static` or …

我正在尝试为 webpack-bundle-analyzer 配置我的 webpack.config。这是它的外观。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

它只显示 index.js、main.js 和 src 文件夹。如何查看我所有的其他依赖项？