skills.rest
Esdeveniments
EsdevenimentsOFFICIAL
Explore all skills by this author →
Website𝕏@esdeveniments_GitHub

bundle-optimization

Minimize JavaScript bundle sizes and optimize image delivery in Next.js applications.

2|Updated Apr 9, 2023
Search Tags:#performance#nextjs#server-components#lazy-loading#bundle-analysis#image-optimization#core-web-vitals
One-click install
npx skills add https://github.com/Esdeveniments/esdeveniments-frontend --skill bundle-optimization-esdeveniments
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bundle-optimization
Source: https://github.com/Esdeveniments/esdeveniments-frontend/tree/main/.github/skills/bundle-optimization
Command: npx skills add https://github.com/Esdeveniments/esdeveniments-frontend --skill bundle-optimization-esdeveniments

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Bundle Optimization Skill helps developers reduce JavaScript bundle sizes and optimize image delivery to improve page speed and Core Web Vitals in Next.js apps.

Core Features & Use Cases

  • Image optimization: apply quality caps and responsive sizing to reduce bandwidth while preserving visual quality.
  • Bundle analysis workflow: perform comprehensive client and server bundle analyses and identify optimization opportunities.
  • Server Components best practices: leverage server components by default and use client components only when necessary to minimize client JS.

Quick Start

Run the following steps to start optimizing:

  • yarn analyze
  • yarn analyze:browser
  • yarn analyze:server
  • yarn analyze:experimental
  • Use the helper utilities in @utils/image-quality.ts to set quality and sizes, and preload critical images with @utils/image-preload.ts as needed.

Frequently Asked Questions about bundle-optimization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I reduce JavaScript bundle size in a Next.js application?▼

You can reduce JavaScript bundle size in Next.js by running bundle analysis commands to identify opportunities, leveraging server components by default, and restricting client components to only when necessary to minimize client JS.

What's the best way to optimize images for Core Web Vitals in Next.js?▼

The best way to optimize images for Core Web Vitals in Next.js is applying quality caps, configuring responsive sizes, preloading critical images, and implementing caching strategies across client and server boundaries to improve LCP.

How do I analyze Next.js server and client bundles?▼

Analyze Next.js bundles by executing commands such as yarn analyze, yarn analyze:browser, yarn analyze:server, and yarn analyze:experimental to perform comprehensive client and server bundle analysis.

When should I use client components instead of server components?▼

Use client components in Next.js only when necessary, defaulting to server components to minimize client JavaScript bundle sizes and improve overall page speed.

How do I set optimal image quality and sizes in Next.js?▼

Set optimal image quality and sizes in Next.js by using helper utilities like getOptimalImageQuality and getOptimalImageSizes to reduce bandwidth while preserving visual quality.

Does bundle optimization work without external dependencies?▼

Bundle optimization works without external dependencies by relying on built-in repository utilities for image quality, sizes, and preloading to enforce best practices across Next.js client and server boundaries.

Related Skills

Explore More Software Engineering Skills→
jota-batutajota-batuta

performance-testing

Establish performance baselines and budgets for APIs and web applications.

Community
Advanced
fratilanicofratilanico
7

performance-optimization

Profile and optimize React/Next.js web apps to improve Core Web Vitals.

Community
Advanced
PatternsDevPatternsDev
235

bundle-splitting

Split JavaScript bundles into smaller chunks with Webpack or Rollup.

Official
Intermediate
ngxtmngxtm

Next.js Rendering Strategies

Explain Next.js rendering strategies including SSG, ISR, SSR, and PPR.

Community
Intermediate