No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Optimizando Angular con Lighthouse
5/8Recursos
npm run start:prod
Aportes 2
Preguntas 0
Ordenar por:
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!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?