Tree shaking in JavaScript (Optimize the bundle size of your application) | Complete Example + Setup

แชร์
ฝัง
  • เผยแพร่เมื่อ 15 ต.ค. 2024
  • Explore how to optimize your JavaScript application and improve web performance with the use of tree shaking.

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

  • @xplodivity
    @xplodivity  9 หลายเดือนก่อน

    16 Intermediate/Advanced JavaScript Projects to Dominate Your Next Technical Interview
    Get it now- xplodivity.graphy.com/courses/16-js-projects-65883553e4b08ebe75f39885
    - Lifetime access
    - Full video explanations of building each project from scratch
    - 10+ hours of premium content
    - No bullshit, No time waste
    - This project list Should get you ready for any JavaScript live coding interview round.
    - Extremely cheap (less than $10)
    Content list:
    1. File Explorer (similar to vs-code)
    2. Infinitely Nested comments
    3. Advanced Custom Toast notification from scratch
    4. Drag & Drop, Swap, Add and delete elements using JavaScript
    5. Custom Calendar/Date-picker
    6. Multi-Select dropdown with support to add & remove elements
    7. Build a Memory game with all rules integrated
    8. Build an analog clock with smooth animation
    9. Dynamic Progress bar with custom input support
    10. Build a Star rating system with dynamic hover effects
    11. Build a tic tac toe game with best practices
    12. Advanced To-Do List with Local Storage support
    13. Accordion with smooth transition effects
    14. Countdown timer & days remaining timer
    15. Create a custom modal
    16. Build an optimised Chessboard

  • @yashsolanki069
    @yashsolanki069 4 หลายเดือนก่อน +1

    After tree shaking, shouldn't the Gzipped size be smaller than the parsed size?

  • @fullStackInKannada
    @fullStackInKannada 2 หลายเดือนก่อน

    Very nice explanation, thank you :)

  • @spiral_memory
    @spiral_memory 3 หลายเดือนก่อน

    Hey, awesome video! I had a lot to learn.
    I need some help. Initially, the project I'm working on had a 'components' folder containing all the Box, Button, Input, etc. My project simply used those components.
    We decided to move to a monorepo approach. I successfully used Rollup to create that bundle. The bundle size in its unzipped form is around 132 KB. However, when I include it in our project and import Buttons or Inputs in many files, and try to build this project (since it's also a React library), the bundle size increases exponentially. After replacing all occurrences with component imports and building it, my bundle size increased by 16 MBs. I've tried what I could, but I really need help to resolve this. For now, I've simply marked it as external, but I want to understand the root cause of this problem and how we can fix it.
    I would really appreciate your help if possible !

  • @elskared3720
    @elskared3720 11 หลายเดือนก่อน

    Thank you for this video !

  • @Tony.Nguyen137
    @Tony.Nguyen137 3 หลายเดือนก่อน

    „UsedExports: true“ isn‘t necessary anymore , is it?

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

    This is amazing! Got it!

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

      Glad you got it!! Thank you.

  • @suryanshgupta7518
    @suryanshgupta7518 7 หลายเดือนก่อน

    Thank you for this video !