Optimize the bundle size of an Angular application

แชร์
ฝัง
  • เผยแพร่เมื่อ 6 ธ.ค. 2024

ความคิดเห็น • 73

  • @Fireship
    @Fireship 3 ปีที่แล้ว +177

    Awesome video!

    • @antihuman007
      @antihuman007 3 ปีที่แล้ว +25

      Wonder who that voice is

    • @dr.d3600
      @dr.d3600 3 ปีที่แล้ว +5

      That voice always awesome 😆

    • @yurakhomitskyi8762
      @yurakhomitskyi8762 3 ปีที่แล้ว +5

      Looks like recursion

    • @smitpatel4124
      @smitpatel4124 3 ปีที่แล้ว +1

      Excellent job buddy. Doing a great work by sharing a very valuable knowledge. Please dont stop sharing.

    • @thesrinathkamath
      @thesrinathkamath 3 ปีที่แล้ว +3

      Bro, is dat you?

  • @yurakhomitskyi8762
    @yurakhomitskyi8762 3 ปีที่แล้ว +69

    We need more tutorials/guides from Angular. Fireship is great tutorial maker, I believe he can bring Angular to the next level.

  • @ОльгаЖуравльова-ь6з
    @ОльгаЖуравльова-ь6з 3 ปีที่แล้ว +93

    The voice sounds pretty familiar! 😉

  • @yurakhomitskyi8762
    @yurakhomitskyi8762 3 ปีที่แล้ว +11

    Would be cool having video about Best Practice/Anti-Pattern in Angular from Angular team

  • @yogenp
    @yogenp 3 ปีที่แล้ว +1

    Much needed video on Angular optimization. Awesome, Angular and Jeff.

  • @yurakhomitskyi8762
    @yurakhomitskyi8762 3 ปีที่แล้ว +7

    Hello, Fireship))

  • @shy1992
    @shy1992 ปีที่แล้ว

    Wow! Thank you for the video. I probably paused every 20 sec to check my code for mistakes. Really helpful stuff!

  • @omaralexandro2928
    @omaralexandro2928 3 ปีที่แล้ว +9

    The amazing Fireship 😉

  • @codeaperture
    @codeaperture 3 ปีที่แล้ว

    I never knew Jeff has another. Thanks to your Slack channel!

  • @u83rh4xor
    @u83rh4xor 3 ปีที่แล้ว +1

    Awesome tutorial! This is so great! Love that you covered specific fixes for moment and lodash.
    Code splitting at the feature level is awesome! Thanks for this easy-to-follow explanation of how it works. It will really help to teach my team. I would love a tutorial on the more advanced features of preload strategies for those bundles and code splitting at the component level. I'm sure those are coming! You all are doing awesome work with the videos! Keep it up!

  • @Omryking
    @Omryking 3 ปีที่แล้ว +2

    That voice from that dude from FireShip right?

  • @aram5642
    @aram5642 3 ปีที่แล้ว

    Proper way of customizing bootstrap or ailwaind deserves a separate video, IMO. Also, when should we re-export imported modules? And does that affect bundle size if you fail to re-export?

  • @VinsysVlogs
    @VinsysVlogs 3 ปีที่แล้ว +1

    Jeff... You are the one 👍👍👍

  • @baaaanan180
    @baaaanan180 3 ปีที่แล้ว +3

    what if one of my lazy loaded module use third dependency, e.g. quill.js. Right now I have this dependency inculded in my initial boundle, is there a way to incude it together with the lazy loaded module?

    • @vitale232
      @vitale232 3 ปีที่แล้ว

      I've had good luck using a service to wrap a dependency that's dynamically imported - pdfmake in my case
      Just wrap dynamic import (like you would a lazy loaded module) on a class method and set the lib as a service property when it's loaded. Then, once the promise has resolved, your service can be used yo access the dep

  • @MuhammadFaisal04
    @MuhammadFaisal04 3 ปีที่แล้ว +1

    That's awesome Jeff! ;)

  • @nhanth
    @nhanth 3 ปีที่แล้ว

    Really impressive and useful for everyone.

  • @FrietZakjeh
    @FrietZakjeh 2 ปีที่แล้ว +1

    Heey, currently our app has been really slow in building.
    Does tree shaking also improve build performance, since you have less to build?

  • @vatsalyasinghi438
    @vatsalyasinghi438 3 ปีที่แล้ว +1

    Hi please do a similar video on Ionic 5.. thanks !

  • @wks1706
    @wks1706 3 ปีที่แล้ว

    best angular tutorial video!

  • @luismpcunha
    @luismpcunha 3 ปีที่แล้ว +3

    How can we implement lazy loading at a component level instead of at the router level? It's common for a lot of components to not be routable.
    Also, even with specifying the packages, Firebase is still huge :/

    • @Afdac247
      @Afdac247 3 ปีที่แล้ว

      Windmillcode has a video on that

    • @Afdac247
      @Afdac247 3 ปีที่แล้ว

      m.th-cam.com/video/Mkv0JxDljfc/w-d-xo.html

  • @f19-x9k
    @f19-x9k 2 ปีที่แล้ว

    I learned a lot from this class. Obrigado!

  • @pranambhat7964
    @pranambhat7964 3 ปีที่แล้ว

    Keep going Angular 💯

  • @MartinOckovsky
    @MartinOckovsky 3 ปีที่แล้ว

    Thank you for your great work. Any resources for the style imports please?

  • @sujoyinnovates
    @sujoyinnovates 2 ปีที่แล้ว

    Hey man how to apply compression during build. You pointed out the problem, without suggesting any solution.

  • @IceBreakerGamer
    @IceBreakerGamer ปีที่แล้ว

    Bro, this is fireship!

  • @albijmadhikarmi4440
    @albijmadhikarmi4440 3 ปีที่แล้ว

    could you also tell about domino and how to handle window is undefined with angular packages with angular universal and it's solutions. it been months and i am still not able to use ssr with packages i've used during my development

  • @u83rh4xor
    @u83rh4xor 3 ปีที่แล้ว

    Does anyone have recommendations for a good target bundle size? What's the optimal size we want to set our budgets to?

  • @laurent356
    @laurent356 3 ปีที่แล้ว +1

    Jeff is the best !!!

  • @andylib
    @andylib 3 ปีที่แล้ว

    More fireship angular content 🔥

  • @airxperimentboom
    @airxperimentboom 2 ปีที่แล้ว

    I love it ! I wish I watched your video earlier

  • @narelehlohonolopapo9299
    @narelehlohonolopapo9299 2 ปีที่แล้ว

    which VS theme are you using?

  • @im.ajmalfaiz
    @im.ajmalfaiz 3 ปีที่แล้ว +4

    Hi fireship

  • @klutch4198
    @klutch4198 3 ปีที่แล้ว

    HEY THAT VOICE REMINDS ME OF THIS GRANDMASTER I KNOW

  • @georgiyzhuravlev9350
    @georgiyzhuravlev9350 3 ปีที่แล้ว

    Cool video, thanks!

  • @Zweierkomplement
    @Zweierkomplement ปีที่แล้ว

    The main issue even if you follow this things is that Angular is MASSIVE. It currently makes 50% of our production bundle

  • @devman5813
    @devman5813 2 ปีที่แล้ว

    Why do we need pwa while anybody out there got internet connection? Can somebody tell me why do we need to waiste time on such a thing?

  • @yijieli374
    @yijieli374 3 ปีที่แล้ว

    In my project, I have very similar dependencies to what you have in this tutorial, except that I don't have Lodash. But when I use source-map-explore to generate the bundle analyze, I still see that Lodash is there, any idea where it's from?

    • @dimitritsikaridze6220
      @dimitritsikaridze6220 3 ปีที่แล้ว

      it's probably because other dependencies depend on lodash

  • @SayantanDeyIshanz23
    @SayantanDeyIshanz23 3 ปีที่แล้ว +1

    Wo! Isn't this Jeff?

  • @g-luu
    @g-luu 3 ปีที่แล้ว +1

    Fireship in the house🤪

  • @thesrinathkamath
    @thesrinathkamath 3 ปีที่แล้ว +1

    is this @fireship who's speaking?

  • @009besim
    @009besim 3 ปีที่แล้ว

    if you wanna feel like you are in the fireship channel just put playback speed to 1.25

  • @smitpatel4124
    @smitpatel4124 3 ปีที่แล้ว

    its a fireship guy. Yayayayay

  • @theoneandonlysharan
    @theoneandonlysharan 3 ปีที่แล้ว

    Hi, recently watching your videos, they are really amazing but I am facing one huge problem from past 6 months and hoping that you may solve that.
    Created a web app in Angular and its bit huge app and main concern is about getting light house score very low. Already optimised my code according to this video including modules lazyLoad etc. Still getting score around 56. Please help if you can. Any help would be appreciated. Thanks.

    • @LucioLeandro1
      @LucioLeandro1 2 ปีที่แล้ว

      Make sure you are not running the test in development mode, ok? But if you so, configure angular to optimize in development mode as well.

  • @ibnShafee
    @ibnShafee 2 ปีที่แล้ว

    Is this Jeff of fireship?

  • @BonnerTheWeebcreator
    @BonnerTheWeebcreator 3 ปีที่แล้ว

    Here after getting >WARNING/ERROR in budgets, maximum exceeded for initial

  • @chrisfelix9065
    @chrisfelix9065 3 ปีที่แล้ว

    Why does this sound like Fireship 🧐

  • @sourishdutta9600
    @sourishdutta9600 3 ปีที่แล้ว +1

    Jeff!

  • @MrTungDev
    @MrTungDev 3 ปีที่แล้ว

    `ng build --prod` June 2021 🙄

  • @tsheskoelmaximus3784
    @tsheskoelmaximus3784 3 ปีที่แล้ว +1

    J A F A

  • @user-ms8ei9le7x
    @user-ms8ei9le7x 3 ปีที่แล้ว

  • @anirbandas12
    @anirbandas12 2 ปีที่แล้ว

    The voice is very suspicious 🤔