2

Criei uma aplicação multiplataforma usando Ionic 2 + Angular 2 de acordo com a Get started da documentação do Ionic. O comando básico para criar um projeto com menu lateral é desta forma abaixo:

$ionic start myApp sidemenu

Tem alguma coisa que está incomodando muito que é a inicialização do aplicativo, na plataforma Android, que hoje está demorando em torno de 14(mega, master, hiper, ultra) segundos (o Rubens Barrichello daria 5 voltas no Circuito de Mônaco).

Pesquisei um pouco e encontrei algo falando que acontece isso quando o app está em modo debug, porém gerei uma versão de release e continua lento na inicialização. Testei no IOS e a velocidade de carregamento é muito rapida, que seria o normal acontecer. Alguém já deparou com isso? Existe alguma configuração que precisa ser realizada para resolver o problema?

7
  • Já tentou colocar no main.ts o seguinte código? enableProdMode(); Commented 6/12/2017 às 15:44
  • @DiegoAugusto mas qual seria a justificativa? Vou tentar ver aqui.
    – viana
    Commented 6/12/2017 às 15:46
  • Ele desabilita o 'hotdeploy', ou seja não ficará escutando as mudanças no código e recarregando-as Commented 6/12/2017 às 15:46
  • Outra dúvida, vc não fez nenhuma alteração ainda no template que foi baixado? Ou está fazendo seu aplicativo em cima dele? Commented 6/12/2017 às 15:48
  • @DiegoAugusto já tentei sim, mas sem sucesso! Continua lento. Estou fazendo em cima do aplicativo que foi gerado a partir do starter.
    – viana
    Commented 6/12/2017 às 15:49

1 Resposta 1

4

Para melhorar o desempenho do seu aplicativo você pode utilizar uma técnica secreta milenar chamada LazyLoading (Carga preguiçosa). No ionic a aplicação deste modelo consiste em carregar os módulos necessários pra cada página no momento do carregamento da mesma, evitando carregar todos os módulos, providers, etc no inicio do app.

Vamos supor que você tem um component/page chamada home, eu teria a seguinte estrutura de arquivos:

home.ts
home.scss
home.html

Para implementar o lazy é necessário a criação de mais um arquivo, que é o arquivo que vai importar o que você precisar.

home.module.ts

Para utilizar o lazy também é necessário fazer alguns ajustes, no seu arquivo home.ts você precisar utilizar o decorator @IonicPage(). Exemplo:

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class Home {}

Já no seu arquivo home.module.ts:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Home } from './home';

@NgModule({
  declarations: [
    Home,
  ],
  imports: [
    IonicPageModule.forChild(Home),
  ],
  exports: [
    Home
  ]
})
export class HomeModule {}

Quando você chamar sua página Home, consecutivamente o HomeModule será chamado e o mesmo irá carregar seus componentes.

Uma coisa importante, você não precisa mais utilizar o component importado para fazer o roteamento, você só precisar passar a string com o nome do mesmo, exemplo: this.nav.push('Home');

Observação, você pode importar seus providers tbm no home.module.ts, é só adicionar o atributo providers: [] na estrutura do NgModule

7
  • Então você já passou por isso é resolveu o problema assim?! Faz muito sentido o que você está dizendo. Vou fazer um teste e te falo. Desde já, agradeço.
    – viana
    Commented 6/12/2017 às 17:55
  • Sim, consegui reduzir o tempo de inicialização do app consideravelmente. Commented 6/12/2017 às 18:19
  • Cara, demorei pra ajustar tudo mas foi. Porém não melhorou tanto assim. Achei que aquela tela branca de início praticamente iria sumir. huehuhe... mas ainda estou perdendo um pouco de performance. Você teria outra dica ?!
    – viana
    Commented 8/12/2017 às 11:01
  • Já tentou compilar pra produção? ionic cordova run android --prod --release Commented 8/12/2017 às 11:23
  • Eu fiz isso antes mesmo de fazer a alteração que vc sugeriu. Ai tinha diminuido um pouco o tempo. Agora depois ainda não tentei compilar como prod. Vou fazer isso e te aviso.,
    – viana
    Commented 8/12/2017 às 11:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .