How to analyze your JavaScript bundles

Рет қаралды 24,582

Күн бұрын

Learn how to analyze your bundled JavaScript code and to spot common issues that can easily bloat up your application size.
Related Playlist:
Day 1 → goo.gle/WDL20Day1
Subscribe to the Chrome Developers → goo.gle/ChromeDevs
Speaker:
Houssein Djirdeh
#webdevLIVE #javascript event: web.dev LIVE 2020; re_ty: Publish; fullname: Houssein Djirdeh; product: Chrome - General;

Пікірлер: 18

@linglingqiu475 4 жыл бұрын

To recap: 1. [Chrome dev tools] Network tab (js filter): find how big JavaScript bundles are downloaded 2. [Chrome dev tools] Coverage tab (ctrl + shift + P(Windows)/cmd+shift+P(Mac) and type "coverage"): find how much unused JavaScript code when loading the page 3. [Lib] Webpack-bundle-analyzer: visualize which module makes up the bundle, show size of each module and relations to each other 4. [Lib]Source -map-explorer: visualize treemap of the bundle and identify the problem (lazy load,duplicated, too large code etc) 5. Lighthouse: help analyze how much unused code, potential savings and polyfills that new browsers don't need etc, by using source map

@MaxCoplan 4 жыл бұрын

Isn't it ironic that Google isn't using KZfaq's new timestamp feature?

@Greatfulone 2 жыл бұрын

Thank you so much. Learned more than I ever expected to learn, and the content relevance to what I was after was spot on! Thank you for speaking clearly, and with great volume. Perhaps the best tutorial I've watched on youtube; ever!

@navin-moorthy 4 жыл бұрын

Great explanation. Learned a lot. Thanks!!

@fireystella 4 жыл бұрын

i love these lil videos, thanks so much hehe

@santicros 4 жыл бұрын

That was really great!! Thanks!!!

@alexanderk5399 4 жыл бұрын

excellent and very practical video!

@ajinkyax 2 жыл бұрын

In case anyone wondering how to get NPM Analyze web page. @4:06 he meant running "ANALYZE=true npm run build" which builds and opens this in your browser.

@eriboss11 4 жыл бұрын

Very useful , thanks :)

@chandrashekard.7543 4 жыл бұрын

Great stuff 👍

@jwolfe890 2 жыл бұрын

great video. thank you!

@cpramshadcp 2 жыл бұрын

Really useful info. Thanks.

@domaincontroller 3 жыл бұрын

02:29 coverage tab 03:33 webpack-bundle-analyzer, bundle-specific visualization tools 04:40 source maps explorer 06:18 lighthouse, source maps

@ekkarat6612 4 жыл бұрын

excellent

@hkjpotato 4 жыл бұрын

whats the diff between vis of bundles and source map?

@otololua3645 4 жыл бұрын

you can use "webpack-bundle-analyzer" if you are using webpack for your bundles.

@bren.r 4 жыл бұрын

Or just stop relying on all these heavy front end frameworks to begin with.

@bLd321 3 жыл бұрын

Yes! Let's go back to assembler. Sorry Brendan, but these heavy front end frameworks make a team working on app much more productive, less expensive and able to create code much more robust, easier to mantain and less buggy. Of course, choose to best tool for a job. You don't need Angular to write you simple, static website. But writing an application in 20+ team for 2+ year without those frameworks would be total failure on many layers.