如何在创建反应应用程序中构建 bundle-stats.json？

Question

我需要构建 bundle-stats.json 来使用 webpack-bundle-analyzer。 这是我尝试构建它的方式，但它不会创建任何文件。

npm run build -- --stats

你能帮帮我吗

Answer 1

stats 已从 CRA see 中删除

建议使用source-map-explorer

npm i -g source-map-explorer
source-map-explorer 'build/static/js/*.js'.

Answer 2

--stats 标志已添加回 CRA 中的 this PR。

所以你可以再次使用webpack-bundle-analyzer。

Answer 3

您可以使用 @craco/craco 来完成，这是一个使用自定义 webpack 配置和 Create React App 的工具。

如this article 所述：

1. 安装@craco/craco和webpack-bundle-analyzer

   npm install @craco/craco webpack-bundle-analyzer --save-dev
   

2. 在项目文件夹的 root 中创建一个名为 craco.config.js 的文件，其中包含以下内容：

   const BundleAnalyzerPlugin =
     require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
   
   module.exports = function () {
     return {
       webpack: {
         plugins: [new BundleAnalyzerPlugin({ analyzerMode: "server" })],
       },
     };
   };
   

3. 将此“分析”脚本添加到您的package.json 脚本部分：

   {
     ...
     "scripts": {
       "start": "react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject",
   +   "analyze": "craco build"
     }
   }
   

4. 现在运行：

   npm run analyze
   

因为您在craco 配置中将analyzerMode 设置为“server”，所以您将自动打开浏览器并将结果用作网页（如果您想要输出而不涉及浏览器）

Answer 4

首先，将 webpack-bundle-analyzer 添加到您的开发依赖项中：

yarn add -D webpack-bundle-analyzer

然后你可以顺序运行命令：

yarn build -- --stats

yarn webpack-bundle-analyzer ./build/bundle-stats.json

或者，为了您的方便，您可以将脚本添加到您的 package.json：

"scripts": {
  ...
  "analyze": "yarn build -- --stats && yarn webpack-bundle-analyzer ./build/bundle-stats.json"
}

您可以使用 npm 代替 yarn，只需相应地编辑命令即可。

然后你可以像我一样使用yarn analyze 或 VS Code 中可用的脚本运行器 UI 运行脚本。如果在创建新文件夹之前已经存在，您还可以添加用于删除构建文件夹的脚本。为此，根据您的平台，您可以使用 cmd 或 bash 命令：

• cmd：if exist build\\ ( rmdir /s /q .\\build )
• 重击：[ -d 'build' ] && rm -r build

所以最终的解决方案是这样的：

"scripts": {
  ...
  "analyze": "yarn remove_build && yarn build -- --stats && yarn webpack-bundle-analyzer ./build/bundle-stats.json",
  "remove_build": "if exist build\\ ( rmdir /s /q .\\build )"
}