如何配置webpack包分析仪进行反应？

Question

我正在为webpack包分析器配置我的webpack.config。看上去怎么样。

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

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

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

​

​

Answer 1

首先，npm安装--保存-dev webpack-bundle-分析器-第二，在webpack.config.js中添加一些配置--这是我在config /webpac.config.js中使用create应用程序时的配置

导入顶部的库

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运行报告“在您的终端。应该自动出现webpack包分析器用户界面

Answer 2

如果使用创建，更简单的方法是转到package.json并编辑npm脚本。

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

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

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

Answer 3

这样您就可以配置webpack-bundle-analyzer 而无需弹出您的React的

1. 通过执行npm install --save-dev progress-bar-webpack-plugin webpack-bundle-analyzer添加一些依赖项
2. 在React的根部创建一个名为scripts的新文件夹。
3. 在analyze_build_bundle.js文件夹中创建一个新文件scripts，并在该文件中添加以下代码

​

// 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);
  }
});

​

1. 在analyze-build-bundle文件中添加package.json命令以运行webpack-bundle-analyzer，如下所示：

​

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

​

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

​

​