ReactJs项目中与源Map浏览器分析器混淆

svmlkihl  于 2023-03-08  发布在  React
关注(0)|答案(1)|浏览(136)

我有一个中等大小的React项目,main.xxxx.js文件的生产构建大小太大(19.3 MB),我正在尝试减小它。
在谷歌上搜索之后,我了解到第一步是分析我的构建文件,看看是什么代码导致了这个大小,所以我尝试了source-map-explorer
以下是生成的内容(裁剪以显示相关部分):

不知何故,objectWithoutPropertiesLoose.js占构建大小的86%,但当我去检查node_modules文件夹中的文件时,大小只有1KB,内容只是:

export default function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

我可能误解了什么,所以我需要一些指点。谢谢。
下面是我的package.json

{
  "name": "clientapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@microsoft/applicationinsights-react-js": "^3.3.4",
    "@microsoft/applicationinsights-web": "^2.8.4",
    "@microsoft/signalr": "^6.0.6",
    "@popperjs/core": "^2.11.5",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/react-hooks": "^8.0.1",
    "@testing-library/user-event": "^14.2.1",
    "@types/bootstrap": "^5.1.12",
    "@types/file-saver": "^2.0.5",
    "@types/jest": "^28.1.3",
    "@types/jquery": "^3.5.14",
    "@types/moment": "^2.13.0",
    "@types/node": "^18.0.0",
    "@types/popper.js": "^1.11.0",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "@types/react-pdf": "^5.7.2",
    "@types/react-redux": "^7.1.24",
    "@types/react-rnd": "^8.0.0",
    "@types/react-router-dom": "^5.3.3",
    "@types/reactstrap": "^8.7.1",
    "@types/resize-observer-browser": "^0.1.7",
    "@types/textarea-caret": "^3.0.1",
    "@types/video.js": "^7.3.42",
    "bootstrap": "^5.1.3",
    "country-state-city": "^3.0.1",
    "cropperjs": "^1.5.12",
    "enter-view": "^2.0.1",
    "file-saver": "^2.0.5",
    "jest-each": "^28.1.1",
    "jquery": "^3.6.0",
    "jquery-cropper": "^1.0.1",
    "rc-drawer": "^4.4.3",
    "react": "^18.2.0",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "^18.2.0",
    "react-pdf": "^5.7.2",
    "react-redux": "^8.0.2",
    "react-rnd": "^10.3.7",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "reactstrap": "^9.1.1",
    "redux": "^4.2.0",
    "source-map-explorer": "^2.5.2",
    "textarea-caret": "^3.1.0",
    "util": "^0.12.4",
    "video.js": "^7.19.2",
    "xss": "^1.0.13",
    "workbox-background-sync": "^6.5.3",
    "workbox-broadcast-update": "^6.5.3",
    "workbox-cacheable-response": "^6.5.3",
    "workbox-core": "^6.5.3",
    "workbox-expiration": "^6.5.3",
    "workbox-google-analytics": "^6.5.3",
    "workbox-navigation-preload": "^6.5.3",
    "workbox-precaching": "^6.5.3",
    "workbox-range-requests": "^6.5.3",
    "workbox-routing": "^6.5.3",
    "workbox-strategies": "^6.5.3",
    "workbox-streams": "^6.5.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build-sw": "react-scripts build && react-scripts start",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "copy-pdfjs-worker": "copy ./node_modules/pdfjs-dist/build/pdf.worker.js public/scripts/pdf.worker.js",
    "analyze": "source-map-explorer 'build/static/js/*.js'"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "source-map-loader": "^4.0.0",
    "ts-loader": "^9.3.1",
    "typescript": "^4.7.4",
    "webpack-cli": "^4.10.0"
  }
}
gstyhher

gstyhher1#

这里有一些方法可以有效地减少包的大小。但是首先,确保你使用的是生产版本。
1.如果源代码Map对你来说很混乱,你可以使用webpack analyzer。一旦你确定了更大的组件,你就可以优化它。比如使用替代包,删除不必要的包,等等。
1.你可以做的第二件事是在react应用中使用React.lazy()进行代码拆分。你可以阅读关于here的文章。对于初学者,你可以从Route基础代码拆分开始,然后进一步。
1.缩小也可以显著地减少包的大小。例如,如果有注解,大的变量名,白色等可以减少。你可以使用类似Terser的东西来缩小你的代码。
1.这种方法帮助我们大大减少了整体加载时间。你可以使用压缩技术来压缩包的大小,这样它就可以在更短的时间内通过网络。这种方法减少了超过70%的大小在我们的用例。一些著名的压缩算法是Gzip,Brotli等,这是广泛支持的所有类型的浏览器。

相关问题