[$100] Optimize production builds to reduce size

[maxceem]

Currently, production builds are not optimized:

We should configure webpack in such a way that npm run build create a minified file. Note, that this application is configured to be a microapp inside a Single SPA application, so it cannot be run as a standalone application. And it has a special custom webpack config which we can extend in https://github.com/topcoder-platform/taas-app/blob/feature/api-integration/webpack.config.js#L3.

Development build should not be minified.

For minifying, we can use the same approach as our Topcoder Community App config https://github.com/topcoder-platform/topcoder-react-lib

• JS files should be minified
• CSS should be minified

In this task we only need to optimize the built for the TaaS App. Later we would apply the same approach for the Navbar App.

[maxceem]

Contest https://www.topcoder.com/challenges/30160318 has been created for this ticket.

This is an automated message for maxceem via Topcoder X

[yoution]

@maxceem please assign to me

[maxceem]

Contest https://www.topcoder.com/challenges/30160318 has been updated - it has been assigned to yoution.

This is an automated message for maxceem via Topcoder X

[maxceem]

@yoution nice catch with APPMODE I haven't noticed that this have been already implemented. We don't need to add a new command "build:prod": "webpack --mode=${APPMODE:-production} --env.config=${APPENV:-prod}", as we just set environemtn variable APPMODE before running npm run build to production and it works.

Meanwhile, we should still minify CSS classnames:

At the moment generated classnames via CSS Modules have long names like teams_src-routes-PositionDetails-PositionCandidates-styles-module___table-row___2fH15n they should be minified to short classnames like _2fH15n.

See how it looks for Connect App or Community App:

So we have to config CSS Modules to use short classnames in production mode.

[maxceem]

Please, work on this issue as the last one, this has small priority and other issues are more important.

[yoution]

@maxceem please review

[maxceem]

Payment task has been updated: https://software.topcoder.com/review/actions/ViewProjectDetails?pid=30160318

This is an automated message for maxceem via Topcoder X

[maxceem]

Reopen for tracking purposes.

[maxceem]

QA Guide:
We have to check that CSS and JS is minified but functionality is not broken. Very quick smoke testing is enough. Just check a few pages if they open and looks correctly and nothing is visually broken. The same time we have to check that code is minified.

1. CSS: See how to check that CSS is optimized https://monosnap.com/file/SSJR2VaI7op4LnWn8065W10jjgWRjf. See how NOT-optimized CSS looks like https://monosnap.com/file/IHOMugVkEbgHZJxfFrlnbWWonTCK3k
2. JS: See hot to check that JS is optimized https://monosnap.com/file/qgfs7YXCGOM6vGGd7r2W8dufiPxclO. See how NOT-optimized JS looks like https://monosnap.com/file/MPNjKJn9XAaYjxSWULkgGymsCdnuXN

[sandhiyakavi]

CSS and JS both are optimized.

@maxceem Not able to do smoke test as the changes done in api are not reflecting in Front End.

[sandhiyakavi]

@maxceem Changes done in api are reflecting now in FE. Completed smoke testing. Everything is fine.

[sandhiyakavi]

Fixed: 🆗 in Production via milestone v1.5