Ten en cuenta que en las ciencias informáticas cualquier problema casi siempere puede tener diversas soluciones, no obstante nosotros te compartimos lo más óptimo y mejor.
Solución:
El problema es cuando un static El archivo se almacena en caché, se puede almacenar durante largos períodos de tiempo antes de que termine por caducar. Esto puede ser una molestia en el caso de que actualice un sitio; sin embargo, dado que la versión en caché del archivo se almacena en los navegadores de sus visitantes, es posible que no puedan ver los cambios realizados.
La eliminación de caché resuelve el problema de almacenamiento en caché del navegador mediante el uso de un identificador de versión de archivo único para decirle al navegador que hay una nueva versión del archivo disponible. Por lo tanto, el navegador no recupera el archivo antiguo de la memoria caché, sino que realiza una solicitud al servidor de origen para el nuevo archivo.
Angular cli resuelve esto proporcionando un --output-hashing indicador para el comando de compilación.
Consulte el documento oficial: https://angular.io/cli/build
Ejemplo (versiones anteriores)
ng build --prod --aot --output-hashing=all
A continuación se muestran las opciones que puede pasar --output-hashing
- ninguno: no se ha realizado hash
- medios: solo agregue hashes a los archivos procesados a través de [url|file]-cargadores
- paquetes: solo agregue hashes a los paquetes de salida
- all: agregue hashes tanto a los medios como a los paquetes
Actualizaciones
Para la versión más nueva de angular (por ejemplo, Angular 10), el comando ahora se actualiza:
ng build --prod --aot --outputHashing=all
para mí agregando:
ng build --aot --output-hashing=all
a los comandos de compilación no es suficiente, cuando tiene su aplicación detrás de un CDN y una buena configuración de nginx de caché.
1- Lo primero fue quitar la caché de archivos html (nginx):
location ~ .(html)$
add_header Pragma "no-cache";
add_header Cache-Control "no-store";
add_header strict-transport-security "max-age=31536000";
add_header X-Frame-Options "SAMEORIGIN";
try_files $uri $uri/ /index.html;
Para el static archivos (js/css…) dejan el caché funcionando (rendimiento/usabilidad de la red):
location ~ .(css|htc|less|js|js2|js3|js4)$
expires 31536000s;
add_header Pragma "public";
add_header Cache-Control "max-age=31536000, public";
try_files $uri $uri/ /index.html;
2- Deje las compilaciones de desarrollo/producción exactamente iguales, con fines de prueba. El comando de desarrollo de compilación final:
ng build --env=dev --aot=true --output-hashing=all --extract-css=true
3- Necesitamos que, en cada implementación, el navegador del cliente cargue todos los archivos javascript del servidor, no de la memoria caché, incluso si la implementación fue una actualización menor. Es como si angular tuviera algunos errores con esto: https://github.com/angular/angular-cli/issues/10641 y me pasó a mí.
Terminé usando el poder de bash, estos son mis scripts para eliminar el caché en cada desarrollo (prod/dev) usando el archivo package.json:
"scripts":
...
"deploy_dev": "ng build --env=dev --aot=true --output-hashing=all --extract-css=true && npm run add_date",
"deploy_prd": "ng build --prod && npm run add_date",
"add_date": "npm run add_date_js && npm run add_date_css && npm run rm_bak_files",
"add_date_js": "for i in dist/*; do if [ -f $i ]; then LC_ALL=C sed -i.bak 's:js":js?'$(date +%H%M%m%d%y)'":g' $i; fi done",
"add_date_css": "sed -i.bak 's:css":css?'$(date +%H%M%m%d%y)'":g' dist/index.html",
"rm_bak_files": "find dist -name '*.bak' -exec rm -Rf \;"
,
explicación de los comandos:
add_date_js: busca y reemplaza todos los archivos “js” con “js?date+%H%M%m%d%y”
add_date_css: buscar y reemplazar en dist/index.html “css” con “css?date+%H%M%m%d%y”
rm_bak_files: elimina todos los archivos .bak (rendimiento de la red)
Esos comandos sed funcionan tanto en GNU/BSD/Mac.
Enlaces:
Angular: Prod Build no genera hashes únicos
indicador in situ sed que funciona tanto en Mac (BSD) como en Linux
Error RE: secuencia de bytes ilegal en Mac OS X
En línea si script de shell
Cómo recorrer los archivos en el directorio y cambiar la ruta y agregar el sufijo al nombre del archivo
¿Es posible crear un archivo CSS separado con angular-cli?
Aquí tienes las comentarios y puntuaciones
Puedes añadir valor a nuestra información añadiendo tu veteranía en los comentarios.