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

Question

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

还有一种方法可以不包含产品构建中的某些文件吗？喜欢测试？ CRA 会自动处理吗？

原文由 Red Baron 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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

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

原文由 Varun Sukheja 发布，翻译遵循 CC BY-SA 4.0 许可协议