No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Aprende Inglés, Programación, AI, Ciberseguridad y mucho más.

Antes: $249

Currency
$209
Suscríbete

Termina en:

3 Días
21 Hrs
3 Min
22 Seg

Optimizando Angular con Lighthouse

5/8
Recursos

npm run start:prod

Aportes 2

Preguntas 0

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

Les dejo algunas consideraciones y datos de esta clase: 1. Los algoritmos de compresión solo aceptan formatos de imágenes png y webp. Debes tener tu imagen original en los dos formatos. 2. Si vas a usar el servidor para build como en la clase es necesario instalar de manera globlal `npm install -g http-server` 3. Prefiero usar ng serve --configuration=production 4. El nombre de la carpeta src/images debe coincidir con el de los dos scripts de compress.mjs y resize.mjs 5. El directorio de scripts debe estar al mismo nivel del directorio src no adentro de el. 6. Estos son los dos scripts: compress.mjs ```js 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" > alt </picture> ```
no entiendo nada!