配置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

更简单的方法是转到 package.json 并编辑 npm 脚本。

1. 运行 npm install --save-dev webpack-bundle-analyzer 以安装 webpack-bundle-analyzer
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 2

第一 npm install --save-dev webpack-bundle-analyzer 其次，在webpack.config.js中添加一些配置 这是在config / webpack.config.js中使用create react应用程序时的配置

将库导入顶部

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捆绑分析器用户界面