如何分析创建反应应用程序构建大小并减少它？

Question

我一直在关注本指南：https ://create-react-app.dev/docs/analyzing-the-bundle-size/并且正要运行analyze命令以查看我的应用程序有多大。这是在 React/JS 中检查包/构建大小的最佳方法吗？还有一种方法可以不包含 prod 构建中的某些文件吗？喜欢测试？CRA 会自动处理吗？

Answer 1

根据官方 Create React App 文档（https://create-react-app.dev/docs/analyzing-the-bundle-size/）：

以下是步骤：

第 1 步：添加源地图资源管理器

npm install --save source-map-explorer

或者，您可以使用纱线：

yarn add source-map-explorer

第 2 步：包含 npm 脚本

"scripts": {
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "react-scripts start",
          "build": "react-scripts build",
               "test": "react-scripts test",

第 3 步：运行脚本以构建应用程序

npm run build

第 4 步：运行脚本以分析在第 3 步中创建的构建

npm run analyze

现在您应该会在浏览器中看到一个像这样打开的屏幕

Answer 2

你不需要弹出。试试这个：

1. 安装分析仪：

➜  simple-react-router git:(master) ✗ npm install webpack-bundle-analyzer --save-dev

创建一个新文件，我叫我的：sample.js

➜  simple-react-router git:(master) ✗ cat sample.js 

process.env.NODE_ENV = "production"

var BundleAnalyzerPlugin = require("webpack-bundle-analyzer")

  .BundleAnalyzerPlugin

const webpackConfigProd = require("react-scripts/config/webpack.config.prod")

webpackConfigProd.plugins.push(

  new BundleAnalyzerPlugin({

    analyzerMode: "static",

    reportFilename: "report.html",

  })

)

require("react-scripts/scripts/build")

使用节点运行

➜  simple-react-router git:(master) ✗ node sample.js                                

Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`

Creating an optimized production build...

Webpack Bundle Analyzer saved report to /Users/dixitk13/code/simple-react-router/build/report.html

Compiled successfully.

File sizes after gzip:

  54.49 KB  build/static/js/1.0ee1e308.chunk.js

  1.9 KB    build/static/js/main.73bea786.chunk.js

  763 B     build/static/js/runtime~main.229c360f.js

.

.

.

应该会为您打开一个新的浏览器选项卡。

Answer 3

脚步：

• 安装 webpack-bundle-analyzer 并在你的 webpack 配置中进行配置。

• 尝试使用 webpack 代码拆分功能来减少第一次加载时的文件大小。