I am working on my website getmeroof.com, and I am using Angular 5. I have used many different packages due to which vendor size is too big now, now Is there any good way to figure out which library or package I am not using, because going through each and every file is taking too much time, any help?

  • 0
    Welcome, and the "devrant" tag is only for stuff related to this platform itself. "Developer rants" are just "rant" because there's no non-devs ranting.
  • 1
    Welcome, but did you not google this?

  • 0
    @Fast-Nop Yes but this is related to my personal thing, as I have been using angular from so long, and I have been facing this issue every time. Would you be bit specific, that what I am not supposed to do?
  • 0
    @C0D4 I did that and found lot of solutions, implemented some of them, but at the end, result is not that good, I hope i can find some genuine answers rather than obvious things
  • 1
    @punsa The category should have been "rant", not "devrant".

    The point is that you can filter rants by category, and if I want to check whether there's some news on devRant itself (e.g. new features), I can filter for posts with tag "devrant". That doesn't work anymore if people mistag their rants with "devrant".
  • 0
    Split your application into multiple modules, then the initial page load is not that big.
  • 1
    Not automagically, but grep can help (sed/awk as well, if you want to go deeper).

    Scan for ts files containing import:
    grep -r --include \*.ts ^import\* ^import

    It's automate-able over a set of packages as well, the second step conceptually would be to eliminate packages one by one. The following command will print number of matches scanning for a particular pattern:
    grep -r --include \*.ts ^import\* . | grep -c BrowserModule

    From there, remove a package, rebuild, test, rinse, repeat.

    Also seriously consider upgrading, as the new versions are a better development experience, and aid in mitigating this to an extent with better import management and some tree-ish shaking. The eventual holy grail of Ivy also promises more code path shaking, so it'll prepare for that as well.
  • 1
    @punsa And the website itself has literally huge issues. gtmetrix.com confirms the terrible loading time of 12.8s. While 2.69 MB in transfer and 69 requests is already heavy, that in itself doesn't explain the loading time.

    Looking into the waterfall, that's why: 917 kB of markup and 530 kB in stylesheets - that's easily TEN TIMES of what it should be! But that's still nothing compared to the batshit crazy 7.8 MB in JavaScript, on a page that should by and large not even need much JS.

    You know you have a problem when even counting the gzip compressed transfer, you have FIVE TIMES more script data than image data on a real estate page.
  • 0
    @SortOfTested Thanks a lot, I guess this will be helpful, I will try this out and will update!
  • 0
    @Fast-Nop I have tried multiple things here, I will be splitting code and will do lazy load, I guess that will reduce the javascript size in a big manner, but do you suggest me goto pointers, which I can try immediately, I am not too much aware about angular optimizations.
  • 1
    @punsa Also, your server is not configured properly - it uses HTTP/1.1 instead of HTTP/2, so that adds additional handshake delays especially for the https version, and even worse on mobile. That's the very first thing I'd fix because it should be quick and easy. Also, the expires headers for browser caching on static resources.

    As for the framework, I'd question whether you even need a client-side framework. Maybe I don't get the underlying point, but the page doesn't look as if it even needs much scripting?

    And you certainly don't need Bootstrap because CSS frameworks are a bad idea to begin with.
  • 0
    @Fast-Nop Okay thanks for server configuration, I will check that and fix that first.

    Talking about client side, this is classified portal, and it is going to be huge, lot of dyanamic links, which will be using same set of components once created. So thats why I picked angular framework, else I could have done pure MVC approach.

    Before starting this, I did a check on competitors websites. Few of them are - housing.com, commonfloor.com, magickbricks.com etc.

    If you think MVC approach would be better, can you tell me considerable points which I can keep in my mind to think of that in future. It would be very difficuilt right now to incorporate that,as it would require lot of changes, and we are primarily focusing ok business, but we need to give good user experience which will boost us for SEO.
  • 0
    @jespersh In that case check out the website.
Add Comment