Cosmos optimizations

[Kawanaao]

Pull, so far only in the work stage

In this pull request, I plan to optimize the page loading speed as much as possible by optimizing bundles

Bundler	Previous Full Size	Current Full Size	Previous Max File Size	Current Max File Size
WebPack	5.6 MiB	4.2 MiB	4.1 MiB	3.3 MiB
Vite	4.3 MiB	4.7 MiB	3.3 MiB	3.7 MiB

I think that there are errors in this measurement, since there are additional installed libraries that affect the size of both WebPack and Vite, but they are related to WebPack and are necessary for debugging, so it is quite problematic to exclude them from the final sizes

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[Kawanaao]

Bundler	Previous Full Size	Current Full Size	Previous Max File Size	Current Max File Size
WebPack	4.2 MiB	4.0 MiB	3.3 MiB	2.7 MiB
Vite	4.7 MiB	Err	3.7 MiB	Err

Changes:

• Added babel direct import plugin to reduce imported data, regardless of the code in the client
• Added long-term page hash caching
• Enabled code chunking to optimize overlapping libraries
• Added a debugging plugin - DuplicatesPlugin, necessary for analyzing duplicate dependencies for adding them to peerDependencies
• Replaced ts-loader with a single preset in Babel

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[Kawanaao]

Bundler	Previous Full Size	Current Full Size	Previous Max File Size	Current Max File Size
WebPack	4.0 MiB	3.7 MiB	2.7 MiB	1.9 MiB
Vite	Err	Err	Err	Err

Changes:

• Added lazy imports for charts for proper chunking (in theory, charts is simply not needed on most pages)
• Removed ESLint, because... well, 800 errors... not nice...
• Forced webpack to ignore the fs package as unnecessary, as part of unused whiskers functions
• Path import optimization for react-colors

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[azukaar]

Damn you've been working hard, looking forward to the complete PR :) are you planning on removing Vite altogether? I'm ok with it, as long as the webpack does not take 10 min lol Also if the demo build/dev still work ofc Thanks for your work either way!

[Kawanaao]

Damn you've been working hard, looking forward to the complete PR :) are you planning on removing Vite altogether? I'm ok with it, as long as the webpack does not take 10 min lol Also if the demo build/dev still work ofc Thanks for your work either way!

Thank you :) I will try to give you full results as soon as possible :)

In fact, I haven’t even tested the client itself yet, cause Vite didn’t like the first changes made and left without the possibility of recovery :\

I wanted to use Vite, webpack only as a good analyzer, but the more optimizations I use, the more it becomes clear that Vite is no longer applicable here

For now, I’m trying to move the web server for development to webpack and make all the build commands work as with Vite, I haven’t touched the build speed yet, but the build takes me 19 seconds in release mode, in Vite 17 seconds under the same conditions , so I think it will be a pleasure to develop Glad to try to help :)

[Kawanaao]

Yeeey it works :D

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[azukaar]

Yeeey it works :D

well done haha

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[Kawanaao]

Added myself as contributors @cla-bot check

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

The cla-bot has been summoned, and re-checked this pull request!

[Kawanaao]

Since WebPack cannot understand what demo files are (which I told the web pack not to check at all in prod mode) i added a preprocessor for the code, perhaps you can also use it for something, rather than passing env variables and interpreting them in code

[azukaar]

oh no no you should have kept the env var, webpack doe not need to know what demo are, you just need to set the NODE_ENV to deom and let it rolland it will work

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[Kawanaao]

oh no no you should have kept the env var, webpack doe not need to know what demo are, you just need to set the NODE_ENV to deom and let it rolland it will work

Do you mean checking NODE_ENV instead of creating an additional process.env.isDemo? or abandon preprocessing in favor of leaving everything as it was?

[Kawanaao]

I think @cla-bot doesn't like me :0

[Kawanaao]

I expanded the existing lazy loading in MainRoutes, now all routes in MainRoutes are loaded lazily, I also added several new rules for organizing modules for maximum efficiency of their requests, now the bundle map looks like this

I don’t think it’s possible to further optimize further, only if we look for replacements for libraries, I would like to replace js-yaml and bcrypt in favor of solutions that are easier for the browser environment

At the moment the entire frontend takes up 2.84 MiB (gzip 864 KiB)

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[azukaar]

Do you mean checking NODE_ENV instead of creating an additional process.env.isDemo? or abandon preprocessing in favor of leaving everything as it was?

Abandon preprocessing, I think it's an unnecessary additional component in the build pipeline

Remember that while I appreciate the work you are doing (I really do) simplicity is much MUCH more important than optimizing the bundle size, and that is why Vite was a nice options, with less than 10 lines of config everything was running smoothly. Remember once you're done optimizing, I still need to maintain this software afterward :)

(also about BCrypt you cannot remove it it has to be BCrypt for OpenID to work)

[Kawanaao]

Do you mean checking NODE_ENV instead of creating an additional process.env.isDemo? or abandon preprocessing in favor of leaving everything as it was?

Abandon preprocessing, I think it's an unnecessary additional component in the build pipeline

Remember that while I appreciate the work you are doing (I really do) simplicity is much MUCH more important than optimizing the bundle size, and that is why Vite was a nice options, with less than 10 lines of config everything was running smoothly. Remember once you're done optimizing, I still need to maintain this software afterward :)

(also about BCrypt you cannot remove it it has to be BCrypt for OpenID to work)

Thank you for your nice words, glad to help :)

I removed preprocessing, it’s really not needed, since you can replace it with a regular check with process.env.NODE === “demo” and treeshaking will automatically remove all unnecessary imports

As for modules - it’s scary to touch them, JS after 6 years of development on TS without JS seems like something like assembler :D

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[Kawanaao]

Found a bug when starting the server and client for development

When the first installation occurs, all messages receive a NEW_INSTALL response, which breaks other systems (in my case, the notifications response received an object NEW_INSTALL instead of an array)

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[Kawanaao]

Can I ask for further help? since I can’t do much more, optimizations work, in demo mode, in release mode, the development server works fine, but the backend refuses to work

1. Tried to launch => backend replied that a new installation was needed
2. I switched to a new installation - at the stage of creating the database everything died with the error assignment to entry in nil map in Networks
3. I fixed this error by making the Networks declaration, but then the backend simply did not find the database, with the error cosmos-mongo-BGj:27017 ... cannot lookup on 192.168.1.1:53: no such host, cosmos created the network, but remained on bridge

I can’t check because of these errors, do you have any ideas what I’m doing wrong?

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[Kawanaao]

For now - I think everything is working perfectly, without a cache, loading a page takes about 20 kb of traffic without caching, excluding the market page, when the unstable is ready - I will do a rebase on it, now the stable one is being used to check the overall operation of the cosmos server

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.