如何为反应配置 webpack-bundle-analyzer？

Question

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

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

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

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

Answer 1

首先 npm install --save-dev webpack-bundle-analyzer 其次，在 webpack.config.js 中添加一些配置这是我在 config/webpack.config.js

中使用 create react app 时的配置

导入顶部的库

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

还添加一些验证，以便您的构建脚本在部署到生产环境时不会出现问题

const withReport = process.env.npm_config_withReport

在插件中添加此代码

plugins:[
  withReport ? new BundleAnalyzerPlugin() : '',
]

最后，在包内添加一个新脚本 JSON

"report": "npm run build --withReport true"

在您的终端中转到运行 "npm run report"。应该会自动出现 webpack bundle analyzer UI

Answer 2

如果您使用 Create React App，更简单的方法是转至 package.json 并编辑 npm 脚本。

运行 npm install --save-dev webpack-bundle-analyzer 安装 webpack-bundle-analyzer
在"build"脚本命令的末尾添加一个--stats标志
添加一个名为 "analyze" 的新脚本，如下所示

"scripts": {
  ...
  "build": "react-scripts build --stats",
  "analyze": "webpack-bundle-analyzer build/bundle-stats.json",
},

接下来，运行 npm run build 然后 npm run analyze。

Answer 3

对于运行带有可选参数的插件，对我来说，关于以下主题的解决方案效果更好：

I fixed this by making a couple changes to my webpack.config.js.

First I changed the way I declare withReport. Then I changed the way I instantiate BundleAnalyzerPlugin, to instead use concat after the other plugins:

...
const withReport = process.env.npm_config_withReport ? true : false;
...
plugins: [
...
].concat(withReport ? [new BundleAnalyzerPlugin()] : []),
...

Answer 4

通过这种方式，您可以配置 webpack-bundle-analyzer 无需弹出 您的 React 应用程序

通过执行 npm install --save-dev progress-bar-webpack-plugin webpack-bundle-analyzer
在 React 应用程序的根目录下创建一个名为 scripts 的新文件夹。
在 scripts 文件夹中创建一个新文件 analyze_build_bundle.js 并在该文件中添加以下代码

// script to enable webpack-bundle-analyzer
process.env.NODE_ENV = 'production';
const webpack = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const webpackConfigProd = require('react-scripts/config/webpack.config')(
  'production'
);

const ProgressBarPlugin = require('progress-bar-webpack-plugin');

webpackConfigProd.plugins.push(new BundleAnalyzerPlugin());
webpackConfigProd.plugins.push(
  new ProgressBarPlugin({
    format: `analyzing... [:bar] [:percent] [:elapsed seconds] - :msg`,
  })
);

// actually running compilation and waiting for plugin to start explorer
webpack(webpackConfigProd, (err, stats) => {
  if (err || stats.hasErrors()) {
    console.error(err);
  }
});

将 package.json 文件中的 analyze-build-bundle 命令添加到运行和 webpack-bundle-analyzer 中，如下所示：

"scripts": {
    "analyze-build-bundle": "node scripts/analyze_build_bundle.js",
    "start": "react-scripts start",
    .....
    ...
}

现在执行命令npm run analyze-build-bundle。这将构建您的应用程序，然后启动分析器本地服务器，您应该能够看到如下图所示的屏幕

如何为反应配置 webpack-bundle-analyzer？

How to configure webpack-bundle-analyzer for react?

reactjs

webpack

webpack-bundle-analyzer