web-dev-qa-db-fra.com

Différence entre "ionic serve" et "ionic build browser"

Je travaille sur un projet visant à créer une version d'application mobile d'un site Web (site Web déjà déployé et en service). Nous utilisons Ionic v1.7.16.

Mes supérieurs ont examiné si nous pouvions travailler sur un projet Ionic, puis le déployer également sur le Web (en remplacement de la version Web précédente), afin d’avoir une interface et une expérience utilisateur identiques, à la fois sur mobile et sur navigateur.

J'ai lu quelque chose à propos de "Ionic Browser Platform", je l'ai un peu expérimenté et je n'ai pas rencontré de problème.

Mes questions sont les mêmes que le titre. Existe-t-il une différence entre "service ionique" et "navigateur de construction ionique"?

Mes observations:

  • Lors de l'ajout de "navigateur" en tant que plate-forme à un projet, des versions de navigateur de plug-ins cordova sont ajoutées, ce qui évite les incohérences entre les plates-formes.
  • Je fais face avec une interface et une fonctionnalité totalement identiques entre "ionic serve" et "ionic run browser". J'ai également utilisé "python -m SimpleHTTPServer" pour voir/émuler ce que ce serait si nous déployions jamais la version du navigateur, et c'est également la même chose que les deux précédents.

La plate-forme de navigateur ionique est toujours en version bêta et je n'ai pas rencontré beaucoup de sources, comme c'est le cas pour la plate-forme ionique Android. Les FAQ/sources sur la plate-forme de navigation ionique de toutes sortes sont également appréciées.

cordovabrowserionic-framework
8
BLZBLST

Je travaille avec ma première application Ionic2 RC1 avec deux plates-formes ajoutées (Android et Browser) et j'apprécie les différences entre ces commandes ...

Cela génère (dans mon cas) ceci produit:

  1. Servir construit un environnement dev avec prise en charge du rechargement en direct et sans réduction
$ ionic serve browser

myproject_root 
| - www (13 Mo) 
| - assets _ (1,40 MB) 
| - build _ (11,5 Mo) 
| - main.css (729.90 KB) 
| - main.js (3,50 Mo) 
| - main.js.map (7.10 Mo) 
| - polyfills.js (84.10 KB) 
| - index.html (1,20 KB) 
| - manifest.json (313 B) 
| - service-worker.js (3.60 KB) 

  1. Build construit un environnement prod 
$ ionic build browser

myproject_root 
| - www (5.60 MB) 
| - assets _ (1,40 MB)
| - build _ (4,20 MB) 
| - main.css (636.70 KB) 
| - main.js (1,60 Mo) 
| - main.js.map (1,90 MB) 
| - polyfills.js (84.10 KB) 
| - index.html (1,20 KB) 
| - manifest.json (313 B) 
| - service-worker.js (3.60 KB) 

De plus, je trouve cette autre sortie déployable:

myproject_root 
| - plateformes 
| - navigateur 
| - www (5,70 MB) 
| - assets _ (1,40 MB)
| - build _ (4,20 MB) 
| - main.css (636.70 KB) 
| - main.js (1,50 Mo) 
| - main.js.map (1,80 Mo) 
| - polyfills.js (84.10 KB) 
| - cordova-js-src (9.40 KB) 
| - confighelper.js (3,00 Ko) 
| - exec.js (4.70 KB) 
| - platform.js (1,60 Ko) 
| - plugins _ (17.60 KB) 
| - cordova-plugin-device (5.70 KB) 
| - cordova-plugin-splashscreen (6.00 KB) 
| - cordova-plugin-statusbar (5.10 KB) 
| - ionic-plugin-keyboard (643 B) 
| - config.xml (1.40 KB) 
| - confighelper.js (3,00 Ko) 
| - cordova_plugins.js (2.00 KB) 
| - cordova.js (59.00 KB) 
| - exec.js (4.70 KB) 
| - platform.js (1,60 Ko) 
| - index.html (1.30 KB) 
| - manifest.json (313 B) 
| - service-worker.js (3.60 KB) 

Résumé

Je peux déployer tous ces 3 dossiers sur mon serveur Web avec différents temps de chargement.

Voici un résumé de mes tests avec les caches désactivés

  1. sortie _ ​​./www du service ionique

    • Safari Desktop 10.0.1
      • Télécharge 10 ressources de 4,26 Mo en 12,02 secondes. 
    • Chrome Desktop 54.0.1
      • Téléchargements 13 ressources de 3,60 MB en 9,06 secondes. 
      • La console de Chrome indique 'main.js: 47628 Native: vous avez essayé d'appeler t.styleDefault, mais Cordova n'est pas disponible. Assurez-vous d'inclure cordova.js ou de l'exécuter dans un appareil/simulateur'

  2. construction ionique _ ​​./www sortie

    • Safari Desktop 10.0.1
      • Téléchargements 20 ressources de 2,39 Mo en 7,08 secondes. 
    • Chrome Desktop 54.0.1
      • Télécharge 23 ressources de 1,80 Mo en 5,47 secondes.
      • La console de Chrome indique '' DEVICE READY FIRED APRES 218 ms '&' StatusBar n'est pas pris en charge '

  3. construction ionique _ ​​./platforms/browser/www output

    • Safari Desktop 10.0.1
      • Télécharge 10 ressources de 2,31 Mo en 6,66 secondes. 
    • Chrome Desktop 54.0.1
      • Télécharge 13 ressources de 1,80 Mo en 5,09 secondes.
      • La console de Chrome indique 'main.js: 47628 Native: vous avez essayé d'appeler t.styleDefault, mais Cordova n'est pas disponible. Assurez-vous d'inclure cordova.js ou de l'exécuter dans un appareil/simulateur' 

Seulement pour référence: le .apk Android pèse 3,70 Mo

Mes conclusions

  • «service ionique» génère un environnement de développement qui n'est pas prêt pour la production.
  • 'ionic build' génère 2 environnements de production légèrement différents et un seul d'entre eux semble charger correctement les plug-ins de périphérique Cordova natifs. Si quelqu'un de l'équipe Ionic lit ceci, peut peut-être nous donner une raison ...

AVERTISSEMENT: J'ai récemment lu que Ionic Team réfléchissait au changement rollup pour webpack, donc tout cela pourrait changer dans les futures versions d'Ionic 2.

15
JavierFuentes

L'un des développeurs Ionic a déclaré que sa production pour la construction de navigateur était toujours en cours. Vous pouvez voir les commentaires de Harrington ici:

https://github.com/ionic-team/ionic/issues/10635

Il recommande d'utiliser npm run build --prod pour l'instant. 

Je recommande également de réduire, de compresser et d’ajouter un numéro de version aux fichiers .js et autres, pour forcer l’actualisation du navigateur.

Je remarque que Angular 2/4 est plus avancé dans son processus de production. Je me demande si ng build --prod est l'endroit où l'équipe d'Ionic essaie d'aller, et si vous pouvez l'utiliser pour construire également le projet ionique.

Angular présente l’avantage de changer d’inclusion sur index.html pour avoir des nombres aléatoires à la fin, ce qui oblige les navigateurs des utilisateurs à actualiser des fichiers tels que main.js, ce qui est essentiel.

3
Dmitri R117