Covid19india-react: Create a build using webpack and do treeshaking to reduce the size of the build

[faisal3389]

Is your feature request related to a problem? Please describe.
There are many places in the code where we are importing all the modules from the dependent library, even the ones which are not required. Eg:
import * as d3 from 'd3';
import * as Icon from 'react-feather';
import * as topojson from 'topojson';

here 'import *' imports all the modules which will bloat the size of the application.

Describe the solution you'd like
We could use a bundler such as rollup, which will help to treeshake and minify the js to reduce the build size

Describe alternatives you've considered
A more elaborate solution would be using webpack and building the js bundle through it.

[ThePiyushGupta]

We can use webpack to build the js bundle through it . It is very easy but involves some manual verification . The documentation is descriptive enough https://webpack.js.org/guides/tree-shaking/ .

[ThePiyushGupta]

/claim

[sreetamdas]

Doesn't create-react-app support tree shaking by default?
Also, @ThePiyushGupta are you looking at rewriting the app to use webpack? its using react-scripts right now, and I'd love to help with the rewrite :)

[ThePiyushGupta]

Yes u are correct create-react-app supports treeshaking by default.
Even after ejecting the project and rebuilding using webpack and making little config changes there were no changes.

Apart from it the parsing time is very less as can be seen

We need to focus on other other areas to make the fronted snappy
Maybe caching some static files can be an option

[jeremyphilemon]

@ThePiyushGupta @faisal3389 @sreetamdas +1 on the bundle size analysis, we're trying our best to minimize dependency on other packages, and trying to use vanilla js as much as we can.

With respect to using webpack, I'm assuming that would mean ejecting from create-react-app. This is a nice article addressing that, I feel besides reducing the bundle size, it could lead to increasing the complexity of the project configuration. But I'd like to hear from you if that's not the case.

We definitely need to look at different strategies too in order to have a faster frontend. #923 also addresses this.

cc @tannakartikey

[ThePiyushGupta]

The actual react code execution is taking a lot of time due to many compnents

As we can see the dom size of the home page is very large .
Code utlization is consistanly above 50 % for all the chunks .
Simplifying the code is I feel the only way.
The largest peices of chunk are :
charts.js
jquery
primer
react-dom
Reducing the bundle size depends on removing these chunks

[tannakartikey]

I don't think we need to re-write the config and hence eject the default config. The tree-shaking and minifications are configured in create-react-app(CRA) out of the box.

create-react-app (CRA) comes with tree-shaking and minifications out of the box. So I don't think it makes sense to eject the config. As @faisal3389 suggested, If we are importing the whole module instead of just the required parts then we can identify those parts in the app and work on that.
@ThePiyushGupta or @faisal3389 if you are interested then we can move in that direction.

CRA has source maps enabled by default. That is the area to increase the performance by a bit. But I support DHH (article) in not doing that. @jeremyphilemon your call here.

Above all, I would love to see us removing unnecessary dependencies like jQuery/moment, and as @jeremyphilemon mentioned we are already making progress in that direction.

[sreetamdas]

Is this issue still up for claims? Would love to implement tree-shaking if it is.

[faisal3389]

@tannakartikey @sreetamdas, you are right. it looks like CRA does the tree-shaking and minification out of the box.

Here for the react-feather module, it only imports the icons which are used although we import it using, "import * as Icon from 'react-feather';"

So, modifying the code to remove the unused imports might not have an effect on the performance or build size.

As @ThePiyushGupta suggested, to optimize the frontend performance we could still do a few things as suggested by the google chrome audit and #923
Apart from this, we could also look into adding lazy loading, service-workers.

[jeremyphilemon]

How about using PostCSS to minify the css, or is that also handled during the build process?

We're in the process of removing redundant libraries, #1581 is dropping dependency on moment.js.

Would it be possible to treeshake libraries that do not support tree shaking, like primer? I'm limited in knowledge about that, hence I would like to know if someone could help me understand that.

Regarding other issues like multiple DOMs, let me know if anyone's got a potential solution and I shall assign you to work on it :)

[ThePiyushGupta]

I don't think so that we can remove moment as moment is a dependency for charts.js

[tannakartikey]

@jeremyphilemon CSS minification is already there:
https://github.com/facebook/create-react-app/blob/e89f153224cabd67efb0175103244e0b7f702767/packages/react-scripts/config/webpack.config.js#L262

[ThePiyushGupta]

Though lazy loading is not reducing the size of the bundle however reloads / revisits have a much less transfer size due to caching
before lazy loading

After lazy loading

I think skiping effects might work like displaying the table before the maps on the home page may give our page a cosmetic speed boost

[shubhamjain2998]

How about removing all the culprits that are increasing the bundle size, like

• Replacing chartjs with a library like rechart that uses react and d3, or simply D3 which is already used to make all the charts. so now we can remove moment also.
• We can also remove jquery and do that stuff with React only, I don't think we need jquery in the react app.
• Remove primer which is only used to make a breadcrumb dropdown, the same thing can be done with material UI library, also primer installed octicons as a dependency which is used nowhere and can be removed.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.