I am using ParcelV2 to create bundles for my typescript React application. Below are my details,
/// package.json
"scripts": {
"start:dev": "REACT_APP_MODE=dev parcel public/index.html --open --port 3000",
"start": "rimraf .parcel-cache && parcel public/index.html --open --port 3000",
"build:widget": "rimraf widget .parcel-cache && parcel build src/index.tsx --dist-dir widget",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"prepare": "husky install",
"format": "prettier \"./src/**/*.{js,jsx,ts,tsx,scss,html,md,json,test.jsx,test.tsx,test.js,test.ts}\" --write",
"test": "jest --coverage",
"test:watch": "jest --watchAll"
},
"dependencies": {
"@popperjs/core": "^2.10.2",
"antd": "^4.20.3",
"axios": "^0.24.0",
"constate": "^3.3.0",
"date-fns": "^2.26.0",
"date-fns-tz": "^1.3.1",
"i18next": "^21.6.14",
"query-string": "^7.1.1",
"rc-select": "^14.1.0",
"react": "^17.0.2",
"react-datepicker": "^4.3.0",
"react-dom": "^17.0.2",
"react-error-boundary": "^3.1.4",
"react-i18next": "^11.16.2",
"react-infinite-scroll-component": "^6.1.0",
"react-popper": "^2.2.5",
"react-router-dom": "^6.0.2",
"react-table": "^7.7.0",
"styled-components": "^5.3.5"
},
"devDependencies": {
"@babel/core": "^7.17.8",
"@parcel/compressor-brotli": "2.4.0",
"@parcel/compressor-gzip": "2.4.0",
"@parcel/transformer-inline-string": "2.4.0",
"@parcel/transformer-svg-react": "^2.4.0",
"@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^12.1.4",
"@types/jest": "^27.0.3",
"@types/react": "^17.0.43",
"@types/react-datepicker": "^4.3.2",
"@types/react-dom": "^17.0.14",
"@types/react-router-dom": "^5.3.2",
"@types/react-table": "^7.7.10",
"@types/styled-components": "^5.1.15",
"@typescript-eslint/eslint-plugin": "^5.16.0",
"@typescript-eslint/parser": "^5.16.0",
"babel-eslint": "^10.1.0",
"eslint": "^8.12.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jest": "^25.3.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-testing-library": "^5.1.0",
"husky": "^7.0.4",
"jest": "^27.5.1",
"lint-staged": "^12.3.7",
"parcel": "^2.4.0",
"prettier": "^2.6.1",
"process": "^0.11.10",
"ts-jest": "^27.1.4",
"typescript": "^4.6.3"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": "> 0.5%, last 2 versions, not dead",
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"pre-push": "yarn run test"
}
},
"lint-staged": {
"*.{js,jsx,ts,tsx,scss,html,md,json,test.jsx,test.tsx,test.js,test.ts}": "yarn run format",
"*.{js,jsx,ts,tsx}": "yarn run lint:fix"
},
"resolutions": {
"eslint-plugin-import/tsconfig-paths/minimist": "^1.2.6"
}
And below is my parcel configurations,
/// .parcelrc
{
"extends": "@parcel/config-default",
"transformers": {
"*.svg": [
"...",
"@parcel/transformer-svg-react"
]
},
"compressors": {
"*.{html,css,js,svg,map}": [
"...",
"@parcel/compressor-gzip",
"@parcel/compressor-brotli"
]
}
}
ISSUE:
If I run the production build for files when Antd Library is used, the build size is more than expected, [Check the FinanceOverview.920671fd.js file]
But if I removed Antd library, then build size will be dropped drastically. See the below screenshot,
STEPS TAKEN:
I tried to use React Lazy import to create a separate chunks and it helps to reduce the size from MB to kb but still it is greater than 500Kb.
I checked the Parcel docs where they mentioned tree shaking, multiple small chunks, etc will be done automatically during the production build. But it's not happening right now.
EXPECTED: Multiple chunk files with minimal size
Below is the the screenshot from Bundle Buddy Report,
I didn't see any issue with Antd library in this report.
I am not sure why the bundle size is drastically changing with/without Antd Library. So kindly anyone help me how we can optimize this production build and reduce the file?
