Optimizando Angular con Lighthouse
Laboratorio de Angular: Optimización Web con Lighthouse y SSR
Recursos
Resumen
npm run start:prod
Optimizando Angular con Lighthouse
Laboratorio de Angular: Optimización Web con Lighthouse y SSR
Contenido del curso
npm run start:prod
jose zuñiga
Jorge Caloir
Agustin Cammarota Muti
Les dejo algunas consideraciones y datos de esta clase:
npm install -g http-servercompress.mjs
import imagemin from 'imagemin'; import pngquant from 'imagemin-pngquant'; import imageminWebp from 'imagemin-webp'; import webp from 'imagemin-webp'; const directory = "./src/assets/image/*.{webp, png}"; (async () => { const files = await imagemin([directory], { destination: "./src/assets/image/", plugins: [pngquant({ quality: [0.8, 0.8]}), imageminWebp({ quality: 80}), webp({ quality: 80})], }) console.log('Images optimized', files); })(); ```resize.mjs ```js import sharp from "sharp"; import * as fs from "fs"; const directory = "./src/assets/image"; fs.readdirSync(directory).forEach(async (file) => { try { const image = sharp(`${directory}/${file}`); const name = file.split(".")[0]; const { format } = await image.metadata(); if ( !name.includes ("small") && !name.includes("medium") && !name.includes ("large") && (format === "png" || format === "webp") ) { image .resize(450) // width .toFile(`${directory}/${name}-small.${format}`); image .resize(750) // width .toFile(`${directory}/${name}-medium.${format}`); image .resize(1800) // width .toFile(`${directory}/${name}-large.${format}`); } }catch(error){ console.log("Error: ", error); console.log(file); } }) ```7. Este es el ts del componente img ```js import { Component, Input, AfterContentInit } from '@angular/core'; interface Source { path: string; media: string; } @Component({ selector: 'app-img', templateUrl: './img.component.html', styleUrls: ['./img.component.scss'] }) export class ImgComponent implements AfterContentInit{ srcset: string = ''; media: string = ''; sources: Source[] = []; @Input() path: string = ''; @Input() alt: string = ''; ngAfterContentInit(): void { this.generateSizes(); } generateSizes(){ // Descomposición de nombre de imagen, path y extensión const splitPath = this.path.split('/'); const fullName = splitPath.pop(); const path = splitPath.join('/'); const splitName = fullName?.split('.') ?? []; const ext = splitName.pop(); const name = splitName.pop(); // Ruta de imagenes this.sources = [ { path: `${path}/${name}-large.webp`, media: '(min-width: 2000px)', }, { path: `${path}/${name}-medium.webp`, media: '(min-width: 640px)', }, { path: `${path}/${name}-small.webp`, media: '(min-width: 200px)', }, { path: `${path}/${name}-large.${ext}`, media: '(min-width: 2000px)', }, { path: `${path}/${name}-medium.${ext}`, media: '(min-width: 640px)', }, { path: `${path}/${name}-small.${ext}`, media: '(min-width: 200px)', }, ]; } } ```y este su html: ```js <picture> <source srcset="source.path" media="source.media" *ngFor="let source of sources" > <img [src]="path" alt="alt" loading="lazy" decoding="async"> </picture>
no entiendo nada!
Es bastante avanzado algunos cosas que se están tocando, performance, accesibilidad, CEO... Te recomiendo que lo dejes para el final de la ruta de aprendizaje