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