Expérimentation perfs : Gridsome #273
Conversation
| @@ -1,7 +1,7 @@ | |||
| # ==== | |||
| # Development | |||
| # ==== | |||
| FROM node:16.3-slim AS development | |||
| FROM node:16-bullseye-slim AS development | |||
There was a problem hiding this comment.
Correction d'un soucis avec Sharp & Archi M1 : lovell/sharp#2482
| @@ -33,7 +33,7 @@ USER node | |||
| WORKDIR /home/node/app/ | |||
|
|
|||
| COPY --from=development --chown=root:root /home/node/app/node_modules ./node_modules | |||
| COPY . . | |||
| COPY --chown=node:node . . | |||
There was a problem hiding this comment.
Correction d'un soucis au build où le yarn build n'avait pas les permissions pour créer un dossier .temp
| @@ -1,6 +1,6 @@ | |||
| #!/bin/sh | |||
|
|
|||
| ENV_FILE=$(find /usr/share/nginx/html/js/index.*.js) | |||
| ENV_FILE=$(find /usr/share/nginx/html/assets/js/app.*.js) | |||
There was a problem hiding this comment.
Correction de l'initialisation des variables coté front
| @@ -1,6 +1,7 @@ | |||
| server { | |||
| listen 80; | |||
| server_name localhost; | |||
| absolute_redirect off; | |||
There was a problem hiding this comment.
Correction d'un soucis sur la conf nginx
https://preprod.resorption-bidonvilles.beta.gouv.fr/stats renvoyait une 301 avec comme location http://rb_frontend/stats/
|
|
||
| const { VUE_APP_SENTRY_RELEASE } = require("./src/js/env.js"); | ||
|
|
||
| module.exports = { |
There was a problem hiding this comment.
C'est globalement le meme fichier que vue.config.js
packages/frontend/src/formatDate.js
Outdated
| @@ -0,0 +1,84 @@ | |||
| if (process.isClient) { | |||
There was a problem hiding this comment.
Cela fait partie du fichier main.js qui est chargé au lancement de n'importe quelle page. J'ai repris cela du fichier de /src/js/index.js
packages/frontend/src/main.js
Outdated
| @@ -0,0 +1,157 @@ | |||
| const routes = require("./js/app/routes"); | |||
There was a problem hiding this comment.
Fichier qui est chargé au lancement de n'importe quelle page
| @@ -0,0 +1,443 @@ | |||
| const path = require("path"); | |||
There was a problem hiding this comment.
Voici comment sont définis les routes maintenant (les routes commentés étant ceux posant des problèmes à cause de window/document)
packages/frontend/src/main.js
Outdated
| }); | ||
| appOptions.store = initStore(Vue); | ||
|
|
||
| router.beforeEach((to, from, next) => { |
There was a problem hiding this comment.
On execute les guards au lancement de l'app
| }, | ||
| setCurrentPage(state, page) { | ||
| state.towns.currentPage = page; | ||
| export default function(Vue) { |
There was a problem hiding this comment.
Le fichier main.js expose une fonction avec Vue en paramètre. J'ai du transformer l'initialisation du store en fonction pour pouvoir définir Vue.use(Vuex) depuis le Vue passé en paramètre
Le seul impact est aux endroits dans le code ou on utilisait le store depuis ce fichier. Il faut maintenant passer par this.$store
🛠 Description de la PR
Expérimentation de passer le projet de vue-cli à Gridsome pour gagner en performances avec en tete les sujets suivants:
Ce que j'ai fait
Ajouter Gridsome + Arriver à faire un yarn gridsome develop/build avec uniquement la Landing page
J'ai fait un POC séparé du projet pour voir à quoi ressemblait la structure de gridsome et je l'ai ensuite intégré au projet + réglé quelques qui faisait que le yarn installait fonctionnait pas à cause de Sharp et de l'archi m1. J'ai du changé d'image docker + forcer la résolution de sharp dans le package.json. J'ai aussi recréer un fichier main.js qui permet de charger du js au chargement de l'app à la place de
src/js/index.jsCorriger le code splitting
Je me suis rendu compte que meme en ayant que la LandingPage +
fichier main.jsen point d'entrée, on buildait tout le javascript. J'ai corrigé cela en éliminant les références vers #router dans des sous dépendances du fichier main.jsModifier le routing pour gérer le prerendering + guardians
De base, Gridsome attend des fichier .vue situés dans
/src/pages/pour le routing et la génération des pages. Une autre possibilité est de générer les pages via un fichier de configgridsome.server.js. J'ai essayé cette approche. Cela fonctionne globalement bien meme si il y'a quelques soucis au niveau des pages connectés à corriger (getConfig qui est null au moment de la géneration des pages + les composants qui dépendent de window/document qui posent soucis.).Rename le dossier public en static
Le site fonctionnait en local mais les assets étaient cassés car gridsome attend un dossier
/staticet non/public(à voir dans la doc si il y'a moyen de changer ça)Déployer sur la préprod
J'ai essayé de déployer sur la préprod au plus vite pour essayer de déminer le terrain. J'ai du corriger quelques soucis de permissions (le yarn build génère un dossier .temp qui avait pas les permissions). Les variables coté front n'étaient plus définis car le fichier js avait changé etc. J'ai aussi du corriger un soucis au niveau de la conf nginx qui faisaient que les URLS qui ne terminaient pas par un slash redirigeaient vers https://rb_frontend/stats/
Récap des principaux changements:
TODO