How to analyze your JavaScript bundles

preview_player
Показать описание
Learn how to analyze your bundled JavaScript code and to spot common issues that can easily bloat up your application size.

Related Playlist:

Speaker:
Houssein Djirdeh

  1. Chrome for Developers
  2. type: Conference Talk (Full production);
  3. purpose: Educate
Рекомендации по теме
How to analyze 0:08:33

How to analyze your JavaScript bundles

Javascript Code Analysis 0:48:48

Javascript Code Analysis with Esprima

DAST - Javascript 0:08:25

DAST - Javascript Dynamic Analysis

Manual JavaScript Analysis 0:44:42

Manual JavaScript Analysis is a Bug

Program Analysis for 0:50:28

Program Analysis for JavaScript - Challenges and Techniques, Anders Møller

Learning JavaScript Frameworks 0:23:07

Learning JavaScript Frameworks in 2024

Data Analysis with 0:43:30

Data Analysis with JavaScript

JavaScript based Static 0:12:19

JavaScript based Static Code Analysis Tools comparison

What is the 0:00:34

What is the primary purpose of data chunking in the RAG framework?

How To Think 0:11:00

How To Think And Problem Solve In Coding

Performing JavaScript Static 0:57:48

Performing JavaScript Static Analysis by Lewis Ardern

Dynamic Code Analysis 0:24:48

Dynamic Code Analysis for JavaScript - Ariya Hidayat

D3.js in 100 0:02:20

D3.js in 100 Seconds

3. Data Analysis 0:18:18

3. Data Analysis with JavaScript - Nathan Epstein

Javascript Code Review 0:15:05

Javascript Code Review - Reviewing and Refactoring Students Code

Code Review with 0:10:03

Code Review with a Jr JavaScript Developer - Here's What I Found!

Code Review - 0:23:43

Code Review - JavaScript Interactive Web Page

Source Code Analysis 0:05:10

Source Code Analysis and Javascript

Code Review - 0:13:50

Code Review - Small JavaScript Projects

How to Easily 0:04:56

How to Easily Analyze a Malicious Javascript Attachment

My Review of 0:08:37

My Review of the New JavaScript Course From Dan Abramov (Just JavaScript)

Measuring Execution Time 0:00:13

Measuring Execution Time of Functions: JavaScript Techniques for Performance Analysis

Web Scraping and 0:10:33

Web Scraping and Sentiment Analysis with Javascript

javascript code analysis 0:05:15

javascript code analysis online

Комментарии
Автор

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

linglingqiu
Автор

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!

Greatfulone
Автор

Great explanation. Learned a lot. Thanks!!

navin-moorthy
Автор

i love these lil videos, thanks so much hehe

fireystella
Автор

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.

ajinkyax
Автор

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

domaincontroller
Автор

whats the diff between vis of bundles and source map?

hkjpotato
Автор

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

bren.r