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

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

你不需要弹出。试试这个：安装分析仪：➜  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")  .BundleAnalyzerPluginconst 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.htmlCompiled 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 代码拆分功能来减少第一次加载时的文件大小。