Skip to content

JS Bundle Analysis Module

Module ID: js_bundle | Type: Conditional | Profiles: full

The JS Bundle Analysis module performs HTML-level JavaScript analysis: counting external scripts, detecting heavy libraries, measuring inline script size, identifying bundler patterns, and checking for async/defer and ES module usage.


What It Checks

Check What It Looks For
External script count Number of <script src="..."> tags
Heavy libraries Known heavy libraries (jQuery, Moment.js, Lodash, etc.)
Inline script size Total bytes of inline <script> content
Async/defer usage Scripts using async or defer attributes
Module scripts <script type="module"> usage
Bundler patterns Webpack, Vite, Parcel, Rollup chunk patterns in URLs
Duplicate scripts Same library loaded multiple times
Legacy polyfills Unnecessary polyfills for modern browsers
Script placement Scripts in <head> vs end of <body>

Scoring Breakdown

Criterion Deduction Condition
Heavy library detected -5 per library jQuery, Moment.js, Lodash full bundle
Excessive external scripts -5 More than 15 external scripts
No async/defer on scripts -5 Head scripts without async/defer
Large inline scripts -5 Inline JS exceeds 100KB
Duplicate libraries -10 Same library loaded twice
Legacy polyfills -3 per polyfill Unnecessary polyfills detected
No module scripts -3 No ES module usage

Example Findings

P1 HIGH: jQuery detected (87KB minified)
  jQuery adds significant page weight. Most jQuery functionality is
  available natively in modern browsers.
  Fix: Consider replacing jQuery with vanilla JS. Use
       youmightnotneedjquery.com for equivalent native code.
  Effort: High

P2 MEDIUM: Moment.js detected (67KB minified)
  Moment.js is a heavy date library with better lightweight alternatives.
  Fix: Replace with date-fns (tree-shakeable) or dayjs (2KB).
  Effort: Medium

P2 MEDIUM: 8 scripts without async or defer
  Scripts in <head> without async/defer block page rendering.
  Fix: Add defer to scripts that don't need immediate execution.
  Effort: Low