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
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.
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!
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.
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
Isn't it ironic that Google isn't using RUclips's new timestamp feature?
02:29 coverage tab 03:33 webpack-bundle-analyzer, bundle-specific visualization tools 04:40 source maps explorer 06:18 lighthouse, source maps
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.
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!
Great explanation. Learned a lot. Thanks!!
i love these lil videos, thanks so much hehe
whats the diff between vis of bundles and source map?
you can use "webpack-bundle-analyzer" if you are using webpack for your bundles.
That was really great!! Thanks!!!
excellent and very practical video!
great video. thank you!
Really useful info. Thanks.
Very useful , thanks :)
Great stuff 👍
excellent
Or just stop relying on all these heavy front end frameworks to begin with.
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.