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

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 步:添加源 map 资源管理器npm install --save source-map-explorer或者，您可以使用 yarn :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现在您应该会在浏览器中看到一个像这样打开的屏幕