Pourquoi mon application Shopify construite avec Next.js (React) est-elle si lente à charger ?
J'ai suivi ce tuto :https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react
Dès le début, mon application était extrêmement lente à charger, y compris lors du changement d'onglet, y compris lorsqu'elle était chargée via ngrok et exécutée sur localhost ou déployée sur le moteur d'application.
Qu'est-ce qui peut causer cela ?
PS : Je suis nouveau dans le développement de React, Next.js et Shopify App, donc la réponse pourrait être assez basique.
PPS : la sortie de construction semble indiquer que "First Load JS partagé par tous" est trop volumineux en fonction de la couleur rouge. Je ne sais pas comment enquêter sur cela et réduire la taille desdits morceaux bien qu'un simple 214 Ko ne puisse pas expliquer des temps de chargement aussi lents, n'est-ce pas ?
Construire
Profileur d'outils de développement React
@next/bundle-analyzer Sortie :
analysé
Gzippé
package.json
{
"name": "ShopifyApp1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "node server.js NODE_ENV=dev",
"build": "next build",
"deploy": "next build && gcloud app deploy --version=deploy",
"start": "NODE_ENV=production node server.js",
"analyze": "cross-env ANALYZE=true npm run build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@google-cloud/storage": "^5.2.0",
"@next/bundle-analyzer": "^9.5.2",
"@sendgrid/mail": "^7.2.3",
"@shopify/app-bridge-react": "^1.26.2",
"@shopify/koa-shopify-auth": "^3.1.65",
"@shopify/koa-shopify-graphql-proxy": "^4.0.1",
"@shopify/koa-shopify-webhooks": "^2.4.3",
"@shopify/polaris": "^5.1.0",
"@zeit/next-css": "^1.0.1",
"apollo-boost": "^0.4.9",
"cors": "^2.8.5",
"cross-env": "^7.0.2",
"dotenv": "^8.2.0",
"email-validator": "^2.0.4",
"extract-domain": "^2.2.1",
"firebase-admin": "^9.0.0",
"graphql": "^15.3.0",
"helmet": "^4.0.0",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.1",
"koa": "^2.13.0",
"koa-body": "^4.2.0",
"koa-bodyparser": "^4.3.0",
"koa-helmet": "^5.2.0",
"koa-router": "^9.1.0",
"koa-session": "^6.0.0",
"next": "^9.5.1",
"react": "^16.13.1",
"react-apollo": "^3.1.5",
"react-dom": "^16.13.1",
"react-infinite-scroll-component": "^5.0.5",
"sanitize-html": "^1.27.2",
"scheduler": "^0.19.1",
"store-js": "^2.0.4",
"tldts": "^5.6.46"
},
"devDependencies": {
"webpack-bundle-analyzer": "^3.8.0",
"webpack-bundle-size-analyzer": "^3.1.0"
},
"browser": {
"@google-cloud/storage": false,
"@sendgrid/mail": false,
"@shopify/koa-shopify-auth": false,
"@shopify/koa-shopify-graphql-proxy": false,
"@shopify/koa-shopify-webhooks": false,
"cors": false,
"email-validator": false,
"extract-domain": false,
"firebase-admin": false,
"graphql": false,
"helmet": false,
"isomorphic-fetch": false,
"koa": false,
"koa-body": false,
"koa-bodyparser": false,
"koa-helmet": false,
"koa-router": false,
"koa-session": false,
"sanitize-html": false,
"tldts": false
}
}
Onglet Réseau des outils de développement Chrome
ÉDITER:
npm run dev
Pour une raison quelconque, le temps de chargement de la ligne "webpack-hmr" ne cesse d'augmenter.
npm run build && npm run start
suivant.config.js
require("dotenv").config({path:"live.env"});
const withCSS = require('@zeit/next-css');
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const withBundleAnalyzer = require('@next/bundle-analyzer')({enabled: process.env.ANALYZE === 'true'})
const apiKey = JSON.stringify(process.env.SHOPIFY_API_KEY);
module.exports = withBundleAnalyzer(
withCSS({
distDir: 'build',
webpack: (config) => {
const env = { API_KEY: apiKey };
config.plugins.push(new webpack.DefinePlugin(env));
config.plugins.push(new webpack.DefinePlugin(new BundleAnalyzerPlugin()));
config.resolve = {
alias: {
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling'
},
...config.resolve
};
return config;
}
})
);
_app.js
import App from 'next/app';
import Head from 'next/head';
import { AppProvider } from '@shopify/polaris';
import { Provider } from '@shopify/app-bridge-react';
import '@shopify/polaris/dist/styles.css'
import translations from '@shopify/polaris/locales/en.json';
import Cookies from 'js-cookie';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
const client = new ApolloClient({
fetchOptions: {
credentials: 'include'
},
});
class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
const config = { apiKey: API_KEY, shopOrigin: Cookies.get("shopOrigin"), forceRedirect: true };
return (
<React.Fragment>
<Head>
<title>...</title>
<meta charSet="utf-8" />
</Head>
<Provider config={config}>
<AppProvider i18n={translations}>
<ApolloProvider client={client}>
<Component {...pageProps} />
</ApolloProvider>
</AppProvider>
</Provider>
</React.Fragment>
);
}
}
export default MyApp;
Index.js (client)
import {
Button,
Card,
Form,
FormLayout,
Layout,
Page,
Stack,
TextField,
DisplayText,
Toast,
Frame
} from '@shopify/polaris';
class Index extends React.Component {
state = {
emails: '',
domain: '' ,
alias: '',
err: '',
message: '',
active: false,
loadingDomainResponse: false,
loadingEmailResponse: false
};
componentDidMount() {
fetch(`/state`, {
method: 'GET'
}).then(response => response.json())
.then(result => {
if (result.err) {
this.setState({
err: result.err,
message: result.err,
active: true
})
}
else {
this.setState({
emails: result.emails,
domain: result.domain,
alias: result.alias
})
}
});
};
render() {
const { emails, domain, alias, err, message, active, loadingEmailResponse, loadingDomainResponse} = this.state;
const toastMarkup = active ? (
<Toast content={message} error={err} onDismiss={this.handleToast}/>
) : null;
return (
<Frame>
<Page>
{toastMarkup}
<Layout>
<Layout.AnnotatedSection
title="..."
description="..."
>
<Card sectioned>
<Form onSubmit={this.handleSubmitEmails}>
<FormLayout>
<TextField
value={emails}
onChange={this.handleChange('emails')}
label="..."
type="emails"
maxlength="200"
/>
<Stack distribution="trailing">
<Button primary submit loading={loadingEmailResponse}>
Save
</Button>
</Stack>
</FormLayout>
</Form>
</Card>
</Layout.AnnotatedSection>
<Layout.AnnotatedSection
title="..."
description="..."
>
<Card sectioned>
<DisplayText size="small"> {domain} </DisplayText>
<br/>
<Form onSubmit={this.handleSubmitDomain}>
<FormLayout>
<TextField
value={alias}
onChange={this.handleChange('alias')}
label="..."
type="text"
maxlength="50"
/>
<Stack distribution="trailing">
<Button primary submit loading={loadingDomainResponse}>
Save
</Button>
</Stack>
</FormLayout>
</Form>
</Card>
</Layout.AnnotatedSection>
</Layout>
</Page>
</Frame>
);
}
handleToast = () => {
this.setState({
err: false,
message: false,
active: false
})
};
handleSubmitEmails = () => {
this.setState({loadingEmailResponse:true});
fetch(`/emails`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
emails: this.state.emails
})
}).then(response => response.json())
.then(result => {
console.log("JSON: "+JSON.stringify(result));
if (result.err) {
this.setState({
err: result.err,
message: result.err,
active: true
})
}
else {
this.setState({message: "...", active: true});
}
this.setState({loadingEmailResponse:false});
});
};
handleSubmitDomain = () => {
this.setState({loadingDomainResponse:true});
fetch(`/domain`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body:
JSON.stringify({
alias: this.state.alias
})
}).then(response => response.json())
.then(result => {
console.log("JSON: "+JSON.stringify(result));
if (result.err) {
this.setState({
err: result.err,
message: result.err,
active: true
})
}
else {
this.setState({message: "...", active: true});
}
this.setState({loadingDomainResponse:false});
});
};
handleChange = (field) => {
return (value) => this.setState({ [field]: value });
};
}
export default Index;
serveur.js
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
app.prepare().then(() => {
const server = new Koa();
const router = new Router();
server.use(bodyParser());
server.use(session({ secure: true, sameSite: 'none' }, server));
server.keys = [SHOPIFY_API_SECRET_KEY];
router.get('/state', async (ctx) => {
let domain = ctx.session.shop;
let alias;
const snap = await global.db.collection("...").doc(ctx.session.shop).get();
if (snap.data().alias) {
alias = snap.data().alias;
}
let emails = snap.data().emails;
let emailString = "";
if (!emails) {
ctx.response.body = {err: "..."};
}
else if(emails.length < 4) {
for (email of emails) {
emailString += (","+email);
}
theEmailString = emailString.substring(1);
let response = {
domain: domain,
alias: alias,
emails: theEmailString
}
ctx.response.body = response;
}
else {
ctx.response.body = {err: "..."};
}
});
});
Éditer
J'ai fourni une première réponse, mais j'en cherche une meilleure si possible.
De plus, il semble possible de faire en sorte que les liens de navigation du pont de l'application Shopify utilisent le routeur next.js au lieu de déclencher des rechargements de page complets :
https://shopify.dev/tools/app-bridge/actions/navigation
Si quelqu'un partage comment faire cela pour next.js avec suffisamment de détails, ce serait mieux que ma réponse.
Réponses
Votre chargement initial sur l'index, selon la cascade de vos outils de développement, a pris près de 2 secondes pour seulement 18,5 Ko de données. C'est extrêmement lent et avant même que le reste de vos ressources ne soit atteint. Ma première pensée serait le décalage réseau/serveur. Hébergez-vous cela localement ou sur un serveur Web quelconque ?
Je le supprimerais autant que possible, peut-être même essayer de charger un simple fichier index.html avec seulement un en-tête. Si le chargement prend quelques secondes, vous devrez peut-être effectuer une mise à niveau ou migrer vers un meilleur hôte. Si vous hébergez localement, cela pourrait simplement être dû au fait que votre Internet a une faible vitesse de téléchargement. De nombreux plans Internet ont des téléchargements rapides mais des téléchargements lents et vous n'obtiendrez pas toujours ce que votre FAI promet.
essayez d'optimiser votre code en supprimant tout code inutile. Essayez d'utiliser une importation plus dynamique de sorte que vous obteniez un chargement initial rapide de la plaque bioler et que les codes lourds tels que les graphiques, les graphiques, les images et la vidéo se chargent ultérieurement du côté client. importez dynamique de "next/dynamic" , cela devrait donner au client une première vue de peinture rapide comme le fait youtube.
https://nextjs.org/docs/advanced-features/dynamic-import
essayez de réagir Formik (un contrôleur de formulaire optimisé pour les petites applications) et essayez également d'utiliser des composants de fonction sur des composants de classe. En utilisant Next, vous pouvez effectuer la plupart de vos appels de base de données dans getStatiProps, getServerSideProps, getStaticPaths. pour la récupération périodique en cache, utilisez le crochet SWR.
J'ai partagé les temps de chargement mesurés à l'aide de npm run dev dans ma question, mais voici également quelques informations sur les temps de chargement en mode prod.
L'exécution de l'application en mode prod ( npm run buildet npm run start) après avoir supprimé l'intégration dans l'interface utilisateur d'administration Shopify montre que l'application prend un total d'environ 2 secondes pour se charger en mode prod, ce qui semble toujours très lent (l'interface utilisateur Shopify ajoutait environ 3 secondes).
Les liens de navigation de la mariée de l'application Shopify feraient des rechargements de page complets lorsqu'ils seraient cliqués au lieu de changer de page comme le feraient les liens Next.js.
Remplacement des liens de navigation de l'application par des liens suivants.
Pourtant, 1,86 seconde pour le premier chargement est très lent et je suis ouvert à de meilleures solutions.