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

【问题标题】：How to analyze create react app build size and reduce it?如何分析创建反应应用程序构建大小并减少它？
【发布时间】：2020-06-22 01:29:57
【问题描述】：

我一直在关注本指南：https://create-react-app.dev/docs/analyzing-the-bundle-size/，并且正要运行analyze 命令来查看我的应用程序有多大。这是在 React/JS 中检查包/构建大小的最佳方法吗？

还有没有办法不包含 prod 构建中的某些文件？喜欢测试？ CRA 会自动处理吗？

【问题讨论】：

测试、cmets 和其他类似的杂项，被剥离出来。如果您对 CRA 分析不满意，请尝试：npmjs.com/package/webpack-bundle-analyzer。 Webpack 会自动删除你在代码库中没有引用的任何内容。
@dixitk13 这是否意味着我必须弹出？
如果以下内容有帮助，请告诉我。我已经创建了使用 CRA 投影的示例。

标签： javascript reactjs bundle

【解决方案1】：

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

以下是步骤：

第 1 步：添加 Source map explorer

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

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

【讨论】：

【解决方案2】：

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

安装分析仪：

➜  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
.
.
.

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

【讨论】：

这真的很有帮助！但是例如如何让它从构建过程中删除某些文件？
你能定义确定吗？此外，您可能需要弹出，但让我们先听听您要删除的内容。
我想从我的应用程序主包中删除与故事书相关的任何内容..
您可以使用 exclude 变量。 const path = require('path'); module.exports = { entry: './src/index.js', devtool: 'source-map', mode: 'development', module: { rules: [ { test: /\.js$/, exclude: [ './src/stories/' ] } ] }, output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') } };

【解决方案3】：

步骤：

安装 webpack-bundle-analyzer 并在您的 webpack 配置中进行配置。
尝试使用 webpack 代码拆分功能来减少第一次加载时的文件大小。

【讨论】：