Nuxt et iFrame : Fuite de mémoire

a marqué ce sujet comme résolu.

Bonsoir, :)

J’ai un souci avec Nuxt. J’ai créé un projet vierge pour les tests, et le résultat est le même que sur un projet réel (où j’ai le problème là aussi).

Voici une capture d’écran de l’outil de Chrome (onglet Memory) sur un site Nuxt vierge, fraîchement créé, sans iFrame :

Capture d’écran 2021-02-28 à 22.13.31.png
Capture d’écran 2021-02-28 à 22.13.31.png

Je n’ai jamais utilisé cet outil avant, mais si je comprend bien, le but c’est que toutes les barres soit grises.

Donc ici, j’imagine que tout va bien.

Voici maintenant une capture d’écran du même outil Chrome, mais avec une iFrame dont l’URL de l’iFrame pointe vers une page du même projet Nuxt :

Capture d’écran 2021-02-28 à 22.13.38.png
Capture d’écran 2021-02-28 à 22.13.38.png

Et enfin, une troisième capture ou l’iFrame pointe vers un autre site, ici, OpenStreetMap :

Capture d’écran 2021-02-28 à 22.13.45.png
Capture d’écran 2021-02-28 à 22.13.45.png

De ce que j’en vois, j’ai l’impression que mon iFrame qui pointe vers le projet est source de fuite de mémoire. Je pense que c’est cela qui cause des crash fréquent de mon serveur démarré avec npm rue dev.

Je me demande donc comment réglé ce problème. Je n’ai absolument rien trouvé sur internet. Mais quand je dis rien, c’est vraiment rien.

Ce qui peut aussi régler mon problème, c’est de ne plus utiliser d’iFrame. En réalité, j’ai besoin d’une iFrame car je dois afficher un composant Vue de manière responsive. C’est à dire que l’utilisateur doit avoir le choix entre deux modes de Prévisualisation : Mode mobile ou mode PC.

Et je n’ai trouvé que l’astuce de l’iFrame pour que le contenu s’affiche de la bonne façon, juste redimensionner la div ne fonctionne pas, car les Media Query et Vuetify ne prennent pas en compte la largeur de la div.

Donc si vous avez une solution pour ça, sans utiliser d’iFrame, je suis preneur et ça peut vraiment me sauver la vie. ^^

Merci !

+0 -0

Hi,

Pourrais tu nous dire quels composants Vuetify te pose problème ?


Personnellement je bannis les iFrame, car ce n’est pas une bonne pratique.

J’ai étais confronté à un problème similaire sur un de mes projets, où je voulais laisser le choix à l’utilisateur d’afficher un tableau soit en mode tableau, soit en mode « carte » lorsqu’il sont sur téléphone.

La solution à donc étais de faire deux affichage différents (l’UI c’est du Tailwind, avant c’étais du Bulma/Buefy).

+0 -0

Bonjour et merci pour ta réponse.

Malheureusement, ce n’est pas juste "afficher un tableau", mais bien afficher une preview mobile de tout le site.

Je ne peux pas faire deux affichage pour chaque éléments du site, il faut un preview réel (de plus que je ne l’ai pas dit, mais on doit aussi avoir un aperçu tablette).

+0 -0

Ce que chrome t’affiche c’est l’utilisation en mémoire de la page (chez le client). ^^ npm utilise une autre mémoire. Celle du serveur, pas du client.

Du coup, ce n’est pas lié. Une fuite de mémoire JS ne provoquera pas de problème au niveau du serveur.

+0 -0

Ah, je vois… donc le problème ne viens pas de l’iFrame alors, mais… d’où dans ce cas ? :D

J’ai en effet le serveur de Nuxt qui crash. Existe-t-il un moyen d’identifier la source du problème ?

Je suppose que le problème doit venir d’une méthode "fetch" ou quelque part dans un code appelle côté serveur.

+0 -0

C’est possible effectivement. Sans le code, on peut pas trop te dire.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte