Careeroza

5. Assets and Production Build

Images and Bundles

  • Use modern formats (WebP/AVIF), correct sizes, and loading="lazy" on images below the fold.
  • Import only what you use: import debounce from "lodash/debounce", not all of lodash.
  • Analyse the bundle (rollup-plugin-visualizer, source-map-explorer).
  • Always deploy npm run build output (minified, dead code removed) behind a CDN with gzip/brotli.
  • Use SSR/SSG (Next.js) for faster first paint and SEO when needed.

Example

Build and preview the production bundle:

npm run build
npm run preview

Example output

dist/index.html                  0.46 kB │ gzip:  0.30 kB
dist/assets/index-DiwrgTda.css   1.39 kB │ gzip:  0.72 kB
dist/assets/index-C8xH2qX1.js  143.61 kB │ gzip: 46.11 kB
✓ built in 1.12s