Ionic-framework: 초기 로딩 속도 향상

안녕하세요 @dheran 입니다. 시작 시간은 우리가 이야기하면서 줄이기 위해 열심히 노력하고 있는 것입니다(: . 우리는 현재 Ionic 앱을 훨씬 더 작게 만들고 오프라인 템플릿 컴파일을 포함할 새로운 빌드 체인에 대해 작업하고 있습니다. 이 두 가지 개선 사항을 통해 기대할 수 있습니다. 시작 시간이 크게 향상되었습니다. StackOverflow 또는 포럼(forum.ionicframework.com)에서 네이티브 앱 내부에 있는 webview를 "사전 로드"하는 방법에 대해 물어볼 것입니다. Ionic을 사용해 주셔서 감사합니다!

@jgw96 안녕하세요, 기존 기능 요청이나 문제가 있습니까? 따라서 구현 후 후속 조치를 쉽게 수행하고 사용할 수 있습니다.

@dheran 좋은 질문입니다! 현재로서는 매우 초기 단계이기 때문에 이에 대한 좋은 추적 문제는 없지만 우리에게는 최우선 순위이며 ionic-cli 팀은 이에 대해 많은 진전을 이루고 있습니다. 이 문제가 더 진전되면 진행 상황과 함께 이 문제를 업데이트하여 예상되는 내용을 알 수 있도록 하겠습니다(:

@jgw96 그럼 그때까지 열어두지 않겠습니까?

@jgw96 빌드 프로세스 동안 사용하지 않는 CSS를 제거하는 것도 많은 기여를 합니다.

나는 ionic2를 사용하여 모바일 웹 사이트를 구축한 다음 Android 4.4 브라우저를 사용하여 열 때 매우 느립니다. 나에게 좋은 제안이 있습니까?
웹사이트: https://zhaoxie.net/static/weixin/index.html

코르도바 CLI: 6.1.1
Ionic 프레임워크 버전: 2.0.0-beta.6
Ionic CLI 버전: 2.0.0-beta.31
Ionic 앱 라이브러리 버전: 2.0.0-beta.17
iOS 배포 버전: 1.8.5
ios-sim 버전: 5.0.6
OS: 맥 OS X 엘 캐피탄
노드 버전: v5.3.0
Xcode 버전: Xcode 7.2 빌드 버전 7C68

@jgw96 어떤 버전이 이 기능을 사용할지 알 수 있습니까?

안녕하세요 @dheran입니다 ! 좋은 질문! 우리는 며칠 전 웹팩 2로 트리쉐이킹을 구현했으며 여전히 오프라인 컴파일러를 사용하기 위해 노력하고 있습니다. 오늘 Angular 팀의 회의 노트를 읽은 후 Angular 2 rc 4까지는 오프라인 템플릿 컴파일러를 "안정적"이라고 부르지 않을 것 같지만 그 전에 오프라인 컴파일러를 구현할 수 있기를 바랍니다.

@jgw96 이미 문제를 종료한 것 같습니다. https://github.com/angular/angular/issues/3605
Angular RC 4는 거의 33% 완료되었습니다(마일스톤에서).
ionic 베타 10 또는 11에서 새로운 컴파일러를 기대할 수 있습니까?

안녕하세요 @dheran , 우리는 적극적으로 작업 중입니다. 이것은 우리에게 매우 우선순위가 높은 항목이므로 가능한 한 빨리 완료될 예정이니 안심하시기 바랍니다.

감사 해요,
단

@danbucholtz 공식 솔루션이 나올 때까지 초기 렌더링 시간을 줄이기 위한 임시 해결 방법을 제안해 주시겠습니까? 이 문제를 수정하거나 네이티브 코드로 동일한 것을 삭제하고 빌드해야 하는 두 가지 선택이 내게 주어졌기 때문입니다.

안녕하세요 @dheran ,

죄송합니다. 현재로서는 해결 방법이 없기 때문에 제공하지 않습니다. 😄 우리는 베타 단계에 있으며 오프라인 템플릿 컴파일 및 축소를 좋은 상태로 전환하기 위해 Angular를 기다리고 있음을 기억하십시오. 그들이하는 일을 모방하십시오. 이것은 우리가 최대한 빨리 빌드 프로세스에 들어가는 것이 매우 중요하지만 아직 준비가 되지 않았습니다.

감사 해요,
단

+1

rc4까지 기다릴 수 있지만 오프라인 템플릿 컴파일을 높은 우선 순위로 유지하십시오. 참고로, 우리 앱의 초기 시간은 약 8초이지만 다른 기본 앱의 초기 시간은 약 1-4초입니다. 초기 시간을 단축해야 합니다.

마지막으로 작업에 감사드립니다.

@grapemix 확실히 높은 우선 순위입니다! 우리는 평균 앱 크기를 훨씬 더 작게 만들 수 있도록 트리 쉐이킹 및 공격적인 축소와 함께 Ionic과 함께 작동하는 오프라인 템플릿 컴파일을 얻기 위해 Angular 팀과 지속적으로 협력하고 있습니다. 위에서 언급했듯이 Angular에는 현재 기다리고 있는 몇 가지 변경 사항이 있지만 확실히 완료될 것입니다(:

+1

+1

@jgw96 @danbucholtz 여러분, 이것에 진전이 있습니까? 베타 11에서 수정할 수 있습니까?

+1

어떤 저장소에서 이것을 추적하고 있습니까?
웹팩에 대해 조금이나마 도움이 될 수 있을 것 같습니다

@prijindal ,

@jthoms1 이 이 지점에서 작업을 하고 있다고 생각합니다.
https://github.com/driftyco/ionic/tree/adding-offline-template-compiling

감사 해요,
단

@jthoms1님 , 베타 11 이전에 변경 사항이 마스터와 병합됩니까?

네 저도 오프라인 컴파일을 기다리고 있습니다. 하지만 지금은 만들 수 있습니다.
우리 사이트는 완전히 Ionic2 beta.8에 있습니다.
http://m.sherpadesk.com/

나는 하이브리드 앱도 가지고 있으며 일부 최적화를 수행하고 습니다 .
보고서 보기 https://tools.pingdom.com/#!/DW6Td/http://m.sherpadesk.com/17
또한 사이트 크기가 600% 감소했습니다
사용자 상호작용 응답 속도 2000% 향상

좋은 추천: http://blog.angular-university.io/how-to-run-angular-2-in-production-today/36

모든 꿀꺽 꿀꺽 설정과 앱스토어 링크를 여기에 게시하겠습니다. http://www.sherpadesk.com/blog/

@Evgeniynet 아주 좋습니다.

몇 가지 질문:

1. 앱을 설치하면 즉시 열리지만. 프로필을 로드했는데 5초 동안 멈춘 것 같습니다. 왜요?
2. 오프라인 컴파일 없이 로딩 시간을 어떻게 최적화했습니까?
3. 귀하의 모바일 웹사이트는 ionic2입니까?
4. 데스크탑 웹사이트가 ionic2입니까?

ionic 2를 사용하려고 생각하고 있지만 webapp 프로젝트 + 모바일 ionic2 프로젝트를 관리해야 하는 유일한 문제입니다.

감사 해요

@evgeniynet 노드에서 제공합니까?
미리 컴파일 된 것 같습니다. 그러나 대부분의 경우 장치 스토리지 호스팅(phonegap 애플리케이션)이 됩니다.

@dheran , 아니요, Azure 웹 사이트에서 호스팅되며 ionic 2 gulp 빌드 작업으로 생성된 일반 html 및 js 파일만 있습니다.

@justme1

1. 예, 나는 http://www.bennadel.com/blog/3105-creating-a-pre-bootstrap-loading-screen-in-angular-2-rc-1.htm으로 속임수를

귀하의 모바일 웹사이트는 ionic2입니까?
예

데스크탑 웹사이트가 ionic2입니까?
예

내 ios 앱은 webview에서 사이트를 로드할 뿐 그 이상은 아닙니다.

iOS, Android 및 Windows Phone, 웹 앱, Chrome 확장 프로그램 및 Apple iWatch를 위한 단 하나의 코드베이스

gap:// 오류를 방지하기 위해 코르도바 로드를 중지하는 특수 플래그를 설정했습니다.

http://www.sherpadesk.com/blog/ 에 이에 대한 완전한 가이드를 작성 중입니다

@evgeniynet

1. 이것이 사실이라면 실제로 더 빠른 로딩이 아닌 것 같습니다 :-)

하나의 코드베이스에 대해:

내가 이해 한 바에 따르면 ionic2는 브라우저에서 완전히 지원되므로 데스크톱 웹 사이트로 사용해서는 안됩니다. 이 문제가 마음에 들지 않습니까?

이 기능을 기다리는 동안 저를 믿으십시오.

안녕하세요, 이것에 대한 업데이트가 있습니까?
나는 버전을 사용하고 있습니다 :
코르도바 CLI: 6.3.0
Ionic Framework 버전: 2.0.0-beta.10
Ionic CLI 버전: 2.0.0-beta.35
Ionic 앱 라이브러리 버전: 2.0.0-beta.19
LG 넥서스 5(OS 6.0)
사이드 메뉴 튜토리얼 앱 v1은 3초 만에 로드됩니다.
--v2 사이드 메뉴 로드 6초

사전 컴파일 기능은 베타 12에서 제공됩니다. 그러면 초기 로드 속도가 크게 빨라지고 번들 크기가 크게 줄어듭니다. 베타 11을 출시할 예정이므로 다음 단계입니다. 이것이 우리의 최우선 과제입니다. 우리는 지점에서 작업하고 있으므로 가깝습니다.

감사 해요,
단

처음으로 정말 느립니다. 최적화를 기다리는 중

@danbucholtz 또는 누구나 이 문제를 베타 12 마일스톤에 추가합니다.

@danbucholtz 브랜치 코드를 사용할 수 있나요? 죄송합니다. 베타 12 릴리스까지 기다릴 수 없습니다. :-(
빨리 풀어주세요..

@dheran ,

이 변경 사항에는 아직 출시되지 않은 Angular RC 5가 필요합니다. 베타 12가 준비되는 대로 출시할 것입니다. 준비가 될 때까지 출시하지 않을 것입니다.

좋은 단기 수정은 아래와 같이 인라인 템플릿을 사용하도록 전환할 수 있습니다. 이것은 단기적으로 더 빠를 것입니다. 그것을 시도하고 그것이 당신을 위해 일을 가속화하는지 보십시오.

@Component({
   template: `
   <ion-content>
      <div>content</div>
   </ion-content>
  `
})
export MyClass {
}

감사 해요,
단

@danbucholtz 인라인은 실제로 많은 도움이 됩니다.
빌드하는 동안 수행하는 gulpfile.js에 작은 코드를 작성했습니다.

gulp.task('build', ['build:prequel'], function(done) {
  glob('./www/build/**/*.html', function(e,files) {
    var indexPath = './www/build/js/app.bundle.js'
    var js = fs.readFileSync(indexPath, 'utf8');

    async.eachSeries(files, function(file, callback) {
      filename = file.substr(6)
      var html = fs.readFileSync(file, 'utf8');
      js = js.replace("templateUrl: '" + filename + "'", "template: `" + html +"`")
      callback()
    }, function() {
      fs.writeFile(indexPath, js, 'utf8', function(err, data) {
        done()
      });
    })
  })
})

예, 이것은 깨끗하지 않으며 그렇게하는 가장 좋은 방법이 아닙니다.
그러나 그것은 매력처럼 작동합니다.

추신: 인라인은 초기 시작에 많은 도움이 되지 않습니다(최대 0.5초). 그러나 페이지 전환 사이 또는 구성 요소를 동적으로 로드할 때마다 더 부드럽게 만듭니다.

@prijindal , 좋아요! 굉장해! 베타 12에서 제공되는 AoT 컴파일러를 사용하면 템플릿이 인라인인지 외부 파일인지는 중요하지 않습니다. 빌드 프로세스의 일부로 순수 JS로 변환됩니다. 그것을 알아내는 좋은 일!

감사 해요,
단

안녕하세요, Angular 페이지를 확인했는데 RC5가 출시된 것을 확인했습니다. "rc5가 나올 때까지"는 무슨 뜻인가요?

@kLkA , @dheran Ionic 팀에게 휴식을 주십시오 - 그들은 가능한 한 빨리 베타를 치는 것은 어떤 식으로든 도움이 되지 않습니다. 그들은 Angular에서 Google과 직접 작업하고 있으며 Angular2 rc5가 종료되었음을 확실히 알고 있어야 합니다.

예, Google은 불과 몇 시간 전에 rc 5를 출시했습니다.
나는 그들이 릴리스를 알고 있고 베타 12에 들어가기 위해 뭔가를 하고 있다고 확신합니다.

@아스테 정말요? 당신이 우리의 입장이 아니기를 바랍니다.
이 문제로 인해 게시되지 않습니다. 이 위치에 있습니까?
제 댓글을 잘 읽어보시면. Ionic 팀에게 AoT 패치 + 우선 순위가 아닌 기타 버그 수정 대신 AoT 패치(danbucholtz는 별도의 분기에서 수행되었다고 함)를 빠른 릴리스로 릴리스할 수 있는지 물었습니다. 이것이 귀하에게 우선순위가 아니고 우리의 댓글이 스팸을 발송했다면 구독 취소를 제안합니다.

@dheran , 저는 초기 베타에서 귀하의 입장에 있었습니다. 거의 다

이것은 귀하의 필요와 경험을 게시하는 스레드가 아닙니다. 주제에 충실하거나 그대로 두십시오. 👍

ionic2 beta12를 기대합니다. 최고의 팀입니다 :)

안녕하세요 @dheran! 죄송합니다. 좌절감을 느꼈습니다. 우리는 이 작업을 수행하기 위해 최선을 다하고 있으며 현재 매우 가깝고 몇 가지 다른 중요한 버그와 함께 beta.12 릴리스에 포함될 것이라고 기쁘게 말할 수 있습니다. 수정. 우리는 이것을 더 일찍 공개하고 싶었지만 우리는 aot 컴파일이 작동하지 않게 하는 일부 버그를 수정하기 위해 지난 몇 주 동안 angular와 함께 작업했습니다. 또한 먼저 새로운 aot 컴파일을 위해 Ionic을 최적화하고 두 번째로 Angular 2 RC5와 함께 작동하는 데 필요한 모든 변경 사항을 적용하는 데 시간이 좀 걸렸습니다. 위에서 언급한 브랜치를 사용하는 것을 추천할 수 없는 이유는 앱을 실제로 빌드하기 위한 꿀꺽꿀꺽 작업이 아직 완전히 완료되지 않았기 때문입니다. 따라서 기술적으로 사용할 수는 있지만 실제로 앱을 빌드할 수는 없습니다. 우리는 잠시 동안 Angular 2 rc5의 시험판 버전으로 작업해 왔지만 포함된 릴리스를 편안하게 느끼기 전에 다른 모든 사람들처럼 해당 릴리스가 공개될 때까지 기다려야 합니다. 우리는 아직 베타 단계에 있으며, 이는 작업 중이며 변경될 것임을 의미하며 베타 소프트웨어와 관련하여 게임의 이름일 뿐입니다. 마지막으로, 커뮤니티의 다른 사람들과 교류할 때 행동 강령 을 염두에 두시겠습니까? Ionic을 사용해 주셔서 감사합니다! 또한 어떤 작업이 진행 중인지 알고 싶다면 회의 노트 (트위터에서도 공유됨)와 로드맵을 확인할 수 있습니다.

확실하지 않지만 아마도 ionic 속도를 높이는 주요 진전은 ngmodule 분기 에서 하고 있습니다. 내가 잘못?

좋은 자리 @msaelices ! 사실, 이 프레임워크 측면의 대부분은 현재 https://github.com/driftyco/ionic/commits/deeplinks-ngmodule 에서 수행되고 있습니다. 감사 해요!

나에게 문제는 초기 로딩(부트스트래핑 동안)이 아니라 사용자가 방문하지 않은 페이지로 이동할 때마다 발생합니다.

이 AoT 컴파일러가 ionic이 되기를 기다리는 동안 모든 구성 요소(모든 @Component )를 사용하는 TemplatePrecompiler 라는 _splash_ 화면(앱 로고가 있는 ionic 페이지)을 추가했습니다 @Component 내 앱의
사용자가 스플래시 화면을 보기만 하면 시간이 오래 걸리지만(내 앱의 경우 ~5초) 로드되면 모든 화면이 빠르게 이동하기 때문에 정말 유용합니다. 그리고 그 시작 화면에 진행률 표시줄을 넣을 수도 있습니다.

여기에 요점을 만들었습니다. https://gist.github.com/voliva/eb0242743661000896054601af72d1fd

모든 사람에게 최신 정보를 제공하기 위해 적극적으로 작업하고 있습니다. 우리가 예상했던 것보다 더 큰 노력이 있었지만 우리는 앞으로 나아가고 더 가까이 다가가고 있습니다. 우리는 AoT에 필요한 모든 변경 사항이 있는 마스터보다 거의 200개 정도 커밋 된 분기 를 가지고 있습니다 😄

이것은 곧 나올 것입니다. 우리는 이것을 내부적으로 테스트하기 시작하는 지점에 이르렀습니다. 아직 공개 테스트를 할 준비가 되지 않았습니다. 이것은 우리의 가장 높은 우선순위 항목이며 전체 프레임워크 팀이 이 작업을 올바르게 수행하기 위해 열심히 노력하고 있습니다. 아직 타임라인은 없지만, 우리가 거기에 도달하고 있다고 말할 수 있으며 새로운 정보가 있는 대로 이 스레드를 계속 업데이트할 것입니다.

감사 해요,
단

+1

그리고 내 app.bundle.js는 3.8MB입니다.

+1
베타12는 몇시에 출시되나요? @danbucholtz

템플릿을 Component에 넣는 @prijindal 의 접근 방식과 관련하여 오프라인 컴파일에서 예상되는 것과 동일한 최적화 수준이 될까요?
이 접근 방식을 시도했는데 템플릿을 가져오기 위한 HTTP 요청 시간을 절약할 수 있지만 첫 번째 보기 로드에는 여전히 지연이 있습니다. Angular가 첫 번째 뷰 로드에서 템플릿의 사용자 정의 html을 컴파일하기 때문에 이런 일이 발생한다고 가정합니다.

나는 angular에 아주 익숙하지 않으며 누군가가 이것을 나에게 명확히 할 수 있다면 감사하겠습니다.

@moatazelgamal ,

AoT 컴파일은 상당한 속도 향상을 가져올 것입니다. 일반적인 앱용 컴파일러를 미리 실행하는 데 몇 초가 걸리므로 런타임에서 시간이 단축됩니다. 일반적인 앱의 경우 얼마나 빠를지 말하기 어렵습니다. 우리는 아주 기본적인 샘플에서만 테스트했으며 시작 시간은 ~3초에서 ~300ms로 늘어났습니다. 우리는 일반적인 앱에 어떤 종류의 숫자가 표시되는지 알기 위해 충분한 테스트를 수행하지 않았지만 가장 확실하게 더 빠를 것입니다.

AoT에 대한 변경 사항은 프레임워크에 적용되었으며(지금까지는... 너무 좋았습니다 😄) 이제 빌드 프로세스를 A) 간단하고, B) 확장 가능하고, C) 최대한 빠르게 만드는 방향으로 전환하고 있습니다. 팀과 저는 이 리포지토리 에서 함께 작업하고 있습니다.

곧 더 많은 소식을 들을 수 있을 것으로 기대합니다.

감사 해요,
단

@moatazelgamal 내 접근 방식은 오프라인 컴파일이 아니라 단순히 템플릿을 인라인하는 것입니다.
오프라인 컴파일은 초기 로딩을 훨씬 더 빠르게 할 것입니다.

모두,

현재 내부적으로 이를 철저히 테스트하고 있습니다. 이번 주에 큰 진전을 이루었습니다.

감사 해요,
단

안녕하세요,
Ionic2 RC0이 출시된 것을 보니 베타12가 예상되는 건가요? RC0의 변경 로그 에는 AOT 컴파일에 대한 언급이 없습니다. 이 기능은 체인지로그에서 놓치기에는 너무 좋은 것 같아요 :)

"출시"되었습니다. 우리는 여전히 😄 변경 로그 등으로 공백을 채우고 있습니다. 오늘 나중에 공식 세부 정보를 기대하세요. 어제 기술적인 어려움에 부딪혀 조금 늦어졌습니다.

감사 해요,
단

안녕하세요 아이오닉팀입니다! 당신의 노고에 감사드립니다!

이것에 대해 매우 흥분됩니다. 나는 그것에 대해 처음 읽은 이후로 트윗을 멈출 수 없습니다.
아이오닉 팀을 응원합니다.

2016년 9월 29일 목요일 04:19 gisinaction [email protected]에서 다음과 같이 썼습니다.

안녕하세요 아이오닉팀입니다! 당신의 노고에 감사드립니다!

—
이 스레드에 가입했기 때문에 이 메시지를 받고 있습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/driftyco/ionic/issues/6776#issuecomment -250346182,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AAxEjznTYrcKZKFD2rElIqKkWrGIvvUrks5quxIvgaJpZM4Iuokt
.

우선, 이 엄청난 발전에 감사드립니다!
저는 새 버전을 테스트해 왔으며 이제 초기 로딩이 더 빠르게 느껴집니다.

저사양 안드로이드 4.4.4에서도 성능차이를 더 잘 느끼며 아이오닉 1과 비교해서 테스트 해봤습니다.
Ionic 2-rc0을 사용하여 다음과 같은 대략적인 결과를 찾았습니다.

| 프로젝트 | 콜드 부팅 | 핫 부팅 |
| --- | --- | --- |
| ionic1-탭 | 4.5초 | 3초 |
| ionic2 탭 | 5초 | 3.5초 |
| ionic1 사이드 메뉴 | 5초 | 3.5초 |
| ionic2 사이드 메뉴 | 5초 | 3.5초 |
| 시계(네이티브 앱) | 1초 | <1초 |

• 다음 명령으로 생성된 프로젝트:

ionic start myTabs1 tabs
ionic start myTabs2 tabs --v2
ionic start mySidemenu1 sidemenu
ionic start mySidemenu2 sidemenu --v2

프로젝트가 완전히 동일한 구현은 아니지만 비교를 위한 출발점을 제공합니다.

ionic 2-rc0을 사용하더라도 기본 프로젝트는 콜드에서 로드하는 데 약 5초가 필요하고 이전에 이미 로드된 경우에는 약 3.5초가 필요합니다. 이것은 Ionic 1 버전에서 찾은 시간과 거의 같습니다.
Ionic2 RC0을 소개 하는

남은 초가 어디에 소비되는지 알고 있습니까? (예: Javascript 엔진/webview 시작, Cordova 플러그인, Angular 2 로딩, ...)?

기본 앱에 더 가까운 경험을 제공하도록 이 시간을 최적화할 수 있습니까?

@SynerG , 좋은 정보입니다. 지금은 다른 것들로 인해 약간 부족하지만 곧 더 많은 피드백을 받게 될 것입니다. 정리해주셔서 감사합니다!

감사 해요,
단

사이드 메뉴가 있는 새로운 ionic2 rc-0 프로젝트를 만들었습니다. 저는 ionic serve --lab을 사용했는데 헤더바 왼쪽에 있는 아이콘을 클릭해도 메뉴가 나오지 않습니다. 슬라이드하거나 슬라이드하는 메뉴 도구 버튼을 클릭할 때만

@danbucholtz RC0을 출시한 Ionic 팀에 감사 인사를 전하고 싶습니다! 모든 변경으로 인해 내 앱을 마이그레이션하는 데 약간의 시간을 투자해야 했지만 내 앱의 시작 시간이 크게 향상되었습니다! 예를 들어, 3년 된 Samsung Galaxy 4에서 베타 11의 시작 시간은 ~6초였으며 RC0은 ~3초로 단축되었습니다! 개선이 너무 잘 되어있어요:)

@abhayastudios , w00t! 감사 해요!

더 많은 개선 사항과 최적화 기능도 준비되어 있습니다!

감사 해요,
단

우리도 로드 시간을 약 50% 단축했습니다. 잘했어. 이 프레임워크로 작업하는 것을 정말 좋아합니다.

나는 이것이 도움이되지 않는다는 것을 알고 있지만 최근에 ionic에 뛰어 들었고 2.0.0-rc.2를 사용하고 있습니다. 초기로드가 1.1.1에 구축 된 앱과 비교하여 얼마나 느린지 알았습니다.

@geocine 이전 v1 앱에서 시작 시간이 매우 좋지만 Ionic v2가 훨씬 더 나은 프로그래밍 환경을 제공하는 반면 시작 시간은 내 앱에서 매우 느립니다(릴리스 빌드에서 5초 이상 상대적으로 Android 6.0이 설치된 빠른 장치). Webpack 빌드가 트리 쉐이킹을 수행합니까?

실제로 로드하는 데 시간이 걸리는 경우 로드하는 동안 1초 이내에 표시할 수 있는 스플래시 화면을 적어도 표시할 수 있는 방법이 있습니까?

@geocine 그래서 보통 cordova 스플래시 화면 플러그인(https://github.com/apache/cordova-plugin-splashscreen)을 사용하고 DeviceReady에서 숨깁니다.

앱 시작 시간을 쉽게 프로파일링할 수 있는 방법이 있습니까? Chrome 원격 디버거를 사용하여 앱을 프로파일링하고 있지만 이미 초기화된 후에만 앱에 연결할 수 있고(따라서 시작을 프로파일링할 수 없음) 앱을 종료할 때 닫히므로 앱을 다시 실행하고 프로파일링할 수 없습니다. 이 방법으로 시작합니다.

Android에서 앱 시작 시간이 5초를 초과하는 데 문제가 있어서 이렇게 질문합니다.
평범한 Ionic 2 튜토리얼 앱을 사용해도 상대적으로 성능이 좋은 기기(Sony Z3 compact, 6.0.1)에서 4-5초 후에 시작됩니다.
그것은 정말 느립니다(몇 개의 플러그인이 있는 제 예전 Ionic 1 앱은 시작하는 데 3초 미만이 걸립니다).

Ionic 2 앱 시작 시간을 (상당히) 줄일 계획이 있습니까?
Ionic 2로 개발하는 것은 훌륭하지만 그렇지 않으면 다른 프레임워크로 전환해야 할 것 같습니다 :-(

Lazy loading에 대한 지원을 추가할 계획이 있습니까? 이는 초기 로드 시간을 줄이는 데도 도움이 될 수 있습니다. webpack을 사용하는 Angular cli는 이제 Lazy 로딩을 지원하며 AoT를 사용하면 잘 설계된 Angular 앱으로 로드 시간을 크게 줄일 수 있습니다. Ionic에서도 webpack을 사용하기 때문에 Ionic에서도 가능하다고 생각합니다.

지연 로딩이 시급합니다.

ionic 팀 회의 의사는 그들이 treeshaking 에서 작업하고 있으므로 아마도 번들 크기가 줄어들고 부팅 시간이 약간

나무를 흔드는 것은 위대하지만 그 정도밖에 할 수 없습니다. Lazy loading은 중요한 별개의 관심사이며, 지금까지 ionic 팀은 다른 문제(예: https://github.com/driftyco/ionic/issues/8102)에서 본 의견에 따라 이에 대해 많은 관심을 표명하지 않았습니다. ). 불행히도 많은 사람들은 모바일 앱에서도 매우 유용할 수 있지만 웹 앱에서만 유용하다고 생각하는 것 같습니다.

@rob3c 및 기타,

지연 로딩은 우리가 보고 있고 더 탐구하고 싶은 것입니다. 앞으로 몇 달 안에 이 주제에 대해 더 많이 들을 수 있을 것입니다.

감사 해요,
단

@danbucholtz ,
지연 로딩 외에 시작 시간을 크게 줄일 수 있는 다른 솔루션을 찾고 있습니까?

바로 지금 이것이 우리가 새로운 프로젝트에서 Ionic 2를 채택하지 않는 가장 큰 이유입니다.
진행 중인 작업에 대한 정보를 공유해 주실 수 있는지 모르겠습니다.
감사 해요!

글쎄 이것은 일반적으로 자바 스크립트의 문제이며 ionic에만 국한되지 않습니다. 다른 프레임워크가 이에 대해 무엇을 하고 있는지 보는 것은 흥미롭습니다. 예를 들어 시작 성능을 크게 향상시키기 위해 v8 엔진에서 "코드 캐싱" 이라고 불리는 것을 사용하는 "경쟁적인" 프레임워크 웹사이트에서 관련 기사를 우연히 발견했습니다.

AoT로 인해 Angular 2가 모듈로 전환된 후 시작 시간이 훨씬 더 나빠졌습니다. 시작 시간이 오래 걸리는 문제도 있는 NativeScript에서는 Angular 2가 없어도 괜찮은 것 같습니다(https://github.com/NativeScript/nativescript-cli/issues/371). 6월에 내 앱은 비교적 빠르게 시작되었지만 Ionic 2가 Angular 2의 최신 버전으로 전환된 후 이제는 5초 이상 걸리며 프로덕션에 사용할 수 없습니다. 이를 개선하기 위해 진행 중인 Angular 2 개선 사항이 있거나 트리쉐이킹과 지연 로딩이 유일한 방법이라는 사실을 알고 계십니까?

@Kobzol ,

이상하게도 AoT는 확실히 훨씬 더 빠른 시작 시간을 가져옵니다(일반적으로 어쨌든 극단적인 경우가 있다고 확신합니다).

@시너지 ,

시작 시간은 AoT로 꽤 빠릅니다. AoT로 테스트한 것이 확실합니까? 번들 크기는 여전히 상대적으로 크며 이를 줄이기 위해 노력하고 있습니다. 많은 큰 라이브러리를 가져오지 않는 한 완전히 크지는 않습니다. 종종 중첩된 종속성으로 인해 작은 라이브러리가 거대해집니다.

감사 해요,
단

내가 잘못하고 있는지 모르겠지만 웹팩과 롤업을 모두 사용하여 Ionic 2 튜토리얼 스타터 템플릿의 AOT prod 빌드를 실행하려고 했으며 내 장치에서 시작하는 데 > 5초가 걸립니다(Android의 Sony Z3 Compact 6.0.1) 반면 이전 Ionic 1 앱은 3초 만에 시작됩니다.
Angular 2가 모듈 시스템으로 전환된 지난 몇 달 동안 시작이 더 나빠졌습니다(Angular 전환 후 속도가 느려진 내 nativescript 앱에서도 동일한 일이 발생했습니다). 아마도 지연 로딩이 도움이 될 수 있습니다.

비교에 사용할 수 있는 벤치마크 숫자가 있습니까?

5초는 내가 본 것에 비해 그렇게 나쁘지 않습니다. 시간 초과가 발생하지 않도록 config.xml에서 시간 초과 제한을 높여야 했습니다(기본값은 20초입니다!).

그것은 느린 4.4 장치에 대한 것이지만. Sony Xperia E5 6.0에서는 여전히 10-15초입니다.

iPhone 7 plus는 2초 미만입니다.

당신의 묶음은 얼마나 큽니까? 타사 라이브러리를 많이 사용하고 있습니까?

감사 해요,
단

안녕 댄!

내가 생각하기에 너무 미친 것은 없습니다.

webpack과 AoT를 사용하는 내 번들 크기는 1.9MB입니다.

package.json의 Deps

...
  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@biesbjerg/ng2-translate-po-loader": "^0.1.3",
    "@ionic/app-scripts": "0.0.46",
    "@ionic/storage": "1.1.6",
    "@ngrx/core": "1.2.0",
    "@ngrx/effects": "2.0.0",
    "@ngrx/store": "2.2.1",
    "angular2-uuid": "1.1.0",
    "ionic-angular": "nightly",
    "ionic-native": "2.2.7",
    "ionicons": "3.0.0",
    "ng2-translate": "^4.1.0",
    "ngrx-store-freeze": "0.1.4",
    "ngrx-store-logger": "0.1.7",
    "pofile": "^1.0.2",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@biesbjerg/ng2-translate-extract": "^0.1.1",
    "@ionic/app-scripts": "0.0.46",
    "@types/cordova-plugin-media": "0.0.3",
    "del": "^2.2.2",
    "fs": "0.0.1-security",
    "path": "^0.12.7",
    "typescript": "2.0.10"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard",
    "cordova-plugin-globalization",
    "cordova-plugin-media",
    "cordova-plugin-file",
    "cordova-plugin-compat",
    {
      "locator": "https://github.com/EddyVerbruggen/cordova-plugin-backgroundaudio",
      "id": "nl.x-services.plugins.backgroundaudio"
    },
    "cordova-plugin-app-version",
    "cordova-plugin-x-socialsharing",
    {
      "locator": "https://github.com/biesbjerg/cordova-plugin-inapppurchase.git",
      "id": "cordova-plugin-inapppurchase"
    },
    {
      "locator": "https://github.com/driftyco/cordova-plugin-wkwebview-engine.git",
      "id": "cordova-plugin-wkwebview-engine"
    },
    "cordova-plugin-google-analytics",
    "cordova-sqlite-storage"
  ],
...

안녕하십니까,
시작 시간과 함께 내 정보를 공유하고 싶습니다.
사실 저는 오래된 Ionic V1을 V2로 옮기고 있습니다(처음부터 모든 것을 다시 작성).

횡단 보도가 있는 내 이전 응용 프로그램은 3-4초에 시작됩니다(장치에 따라 다름).
새 응용 프로그램에는 6~7초가 필요합니다(7초가 더 높음).

야간 빌드(Ionic Framework 버전: 2.0.0-rc.3-201612021933)뿐만 아니라 RC3도 시도했습니다.

Package.json:
{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.6",
    "ionic-angular": "^2.0.0-rc.3-201612021933",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "moment": "2.15.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.44",
    "typescript": "2.0.9",
    "webpack-bundle-analyzer": "^1.5.3"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "o2: An Ionic project"
}

내 자산 폴더(타사 플러그인/이미지)는 약 2.14MB입니다.
6개의 다른 타사 플러그인(jQuery, moment, hammer, jquery 3.1, fullcalendar, svg-panzoom, fontawesome)을 사용하고 있습니다.

APK 크기: 6.58MB
압축을 푼 이 패키지는 15MB입니다.

접는:

• 자산 : 10.1MB
  -> www/assets : 2.93MB
  -> www/build: 7.07MB
  -> www/build/main.js: 3.003MB
  -> www/build/main.js.map: 3.790MB(프로덕션에 필요한가요?)
• 해상도: 1.73MB
• class.dex: 3.07MB
• 리소스.arsx: 0.13MB

Ionic 버전 정보:

Your system information:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3-201612021933
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.44
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v6.9.1
Xcode version: Not installed

아마도 도움이 될 것입니다. @danbucholtz / @jgw96 이 실제 프로젝트를 사용하여 이 문제를 디버깅할 수 있다면 기꺼이 공유하겠습니다(비공개).

인사말
자몽

프로덕션 빌드에서는 소스맵을 비활성화해야 한다고 생각합니다. Angular CLI는 최근에 비활성화하는 옵션을 추가했습니다. https://github.com/angular/angular-cli/pull/3262

Graphefruit 앱의 구성 요소 수와 지시문도 공유해 주시겠습니까?

안녕하세요 @naveedahmed1 ,
여기 우리가 간다:

• 서비스: 10
• 파이프: 3
• 페이지: ~49
• 맞춤 구성: 1
• 지시문: 0 ( ;) )

인사말
자몽

@naveedahmed1 그 문제는 소스 맵을 인라인하지 않는 것에 관한 것인데, 아마도 프로덕션에서 가장 좋은 아이디어가 아닐 것이라는 데 동의합니다. 그러나 프로덕션 자산에 대한 외부 맵 파일은 유용할 수 있으며 배포된 파일에 작은 설명만 추가할 수 있습니다. 프로덕션 빌드를 위한 외부 지도 파일을 생성할 수 있기를 바랍니다.

@rob3c ,

구성할 수 있습니다.

감사 해요,
단

@danbucholtz , 부팅 시간 개선이 정말 필요합니다. 내 Samsung Galaxy S4 Android 버전 5.0.1에서는 플레이 스토어에서 다운로드한 ionic-conference-app조차도 9-10초가 걸립니다.
이것은 내가 다운로드한 앱입니다 --- https://play.google.com/store/apps/details?id=io.ionic.conferenceapp

페이지 수가 적은 내 앱의 부팅 시간은 동일한 전화에서 약 7-8초입니다.

그래서 저는 개발자 도구를 통해 저를 첨부하려고 시도했고 꽤 좋은 타임라인 결과를 얻었습니다.
첨부 때문에 처음부터 추적할 수 없었지만 다음과 같은 상황이 발생했습니다.

컴파일 스크립트는 약 500ms가 소요되며 평가 스크립트는 0ms에서 5000ms 사이입니다.

필요한 경우 @danbucholtz @jgw96 이에 대해 저장된 타임라인을 보내드릴 수 있습니다.

어떻게 이것을 프로파일링할 수 있었습니까? 앱이 완전히 시작될 때까지 앱에 연결할 수 없습니다.

BTW 그것이 당신에게 좋은 결과인지는 모르겠지만 슬프게도 내 클라이언트의 경우 > 5/6초 시작 시간은 용납할 수 없습니다.

@Kobzol 좋은 결과가 아닙니다. 페이지에도 7초 ~가 필요합니다.
내가 한 일: 페이지를 열고 연결된 장치 목록을 확인하고 앱을 처음으로 정상적으로 시작하고 "검사기"를 열어 타임라인 탭으로 전환합니다.
지금 앱을 닫고 검사기, 이제 앱을 다시 시작하고 검사를 누르고 타임 라인 탭에서 초고속 녹화 버튼을 누릅니다 ;)
앱이 시작될 때 처음 1-2초는 나도 연결할 수 없지만 나머지는 약간의 빠른 손가락으로 가능합니다.

업데이트: Ionic1을 사용하면 시작 시간이 3-4초로 꽤 괜찮았습니다.

AoT 건물을 짓고 있습니까? 그 시간들이 더디게 느껴진다.

감사 해요,
단

@danbucholtz , 제 경우에는 플레이 스토어에서 ionic-conference-app을 다운로드 여기에서 제 의견을 참조

@savanvadalia ,

실제로 AoT 번들로 제공되지 않았기 때문에 플레이 스토어에서 꺼냈습니다. 개발자가 게시하기 전에 실수를 했습니다. 곧 새 버전을 다시 게시하겠습니다.

최신 버전의 ionic CLI 및 앱 스크립트를 설치할 수 있습니까?

npm install -g ionic<strong i="9">@latest</strong>
npm install @ionic/app-scripts<strong i="10">@latest</strong>

그리고 ionic build android --prod --release ? 이렇게 하면 최적화된 APK가 포함된 AoT 빌드가 제공됩니다. 느린 장치에서도 9초보다 훨씬 빠르게 시작해야 합니다.

감사 해요,
단

@Dan 어떤 장치에서 이것을 테스트하고 있습니까? 모든 패키지가 업데이트되어도 6초 미만이 걸리지 않으며 여기에서 본 것으로 다른 사람들도 비슷한 경험을 하고 있습니다.

최신 앱 스크립트를 설치한 사람이 있습니까?

업데이트 문제:

최신 앱 스크립트를 설치하려고 하면 다음 오류가 발생합니다. (이전에 ionic @latest 를 설치했습니다)

C:\Users\graphefruit\Documents\o3>npm install @ionic/app-scripts<strong i="9">@latest</strong>
ionic-hello-world@ C:\Users\graphefruit\Documents\o3
`-- @ionic/[email protected]  invalid
  +-- [email protected]
  +-- [email protected]
  `-- [email protected]
    +-- [email protected]
    `-- [email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.0.15: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"
})

이 후 동일한 오류로 ionic start o4 --v2 완전한 새 프로젝트를 시작했습니다.

업데이트 메커니즘을 이해하지 못할 수도 있습니다. package.json node_modules 폴더를 직접 잡아야 합니까 아니면
수동으로 설정된 앱 스크립트를 업데이트하고 npm install을 실행하려고 시도했지만 충돌했습니다.
package.json도 0.47 자동 업데이트되지 않았습니다.

이제 0.0.45 및 --prod --release 프로젝트를 빌드합니다.

_ 그리고 시작 시간도 7-8초였습니다. _

@danbucholtz 어디선가 ngfactory 파일을 본 기억이 나서 지금까지 항상 AOT를 사용해 왔다고 생각합니다. 현재 버전 0.0.46이 적절한 작업을 수행하고 있기 때문에 현재 최신 앱 스크립트 버전으로 이동하는 데 여전히 약간의 저항이 있습니다. 그러나 어쨌든 나는 당신의 말을 받아들이고 0.0.47로 업데이트하고 무슨 일이 일어나는지 알려줄 것입니다.

사반

@danbucholtz 최신 ionic-app-scripts로 업데이트하고 이 오류를 받기 시작했습니다(아래 스크린샷 참조).
또한 릴리스 노트에 언급된 업그레이드 절차를 엄격하게 따랐습니다.

도와주시겠습니까?

감사 해요
사반

@graphefruit 최신 ionic-cli를 설치하고 프로젝트 수준에서 npm 패키지를 설치하는 데 문제가 없었습니다. 여기 에서 릴리스 절차를 따르시기 바랍니다. 그러나 위에서 언급한 것처럼 다른 런타임 오류가 발생합니다. "예기치 않은 값 'undefined'가 'AppModule' 모듈에 의해 선언되었습니다."

또한 실행 0.0.45 가진 --prod --release 하지 않습니다 도움이됩니다. Dan은 0.0.47 에서 0.0.47 버전으로 실행해 달라고 요청했으며 앞으로 이것이 프로덕션 빌드를 생성하는 방법이 될 것입니다. 이전 ionic-app-script 버전에서는 ionic run android 가 기본적으로 프로덕션 빌드를 생성했습니다.

@savanvadalia 귀하의 피드백에 감사드립니다. 절차에 많이 작성되지 않았습니다.
저도 새로운 프로젝트를 시작했고 이전에 npm install -g ionic@latest 를 했습니다.
방금 프로젝트 폴더에서 두 명령을 모두 실행했습니까? 아니면 구체적으로 하셨나요?
내가 말했듯이 이미 node_modules 폴더를 제거하려고 시도했고 나중에 npm-install 했습니다.
그러나 제 생각에는 package.json 가 최신 앱 스크립트 버전으로 업데이트되지 않으면 도움이 되지 않습니다. 0.47 하지만 수동으로 하면 더 많이 충돌합니다...

일반적으로 변경 로그에 최신 package.json과 업데이트할 내용을 게시합니다.

업데이트, 마지막으로 다음 명령으로 해결하도록 관리했습니다.

npm install ionic-angular<strong i="18">@nightly</strong> --save
npm install @ionic/app-scripts<strong i="19">@latest</strong> --save-dev

빌드를 시작합니다.

빌드 테스트

그래서 빌드가 완료되었습니다. 재미있는 사실입니다. ngc-started가 10분 이상 표시되기 때문에 "strg +c"가 필요했습니다. 그 후 빌드가 계속되었고 두 번째로 문제 없이 실행되었습니다.

크기: 9.2MB
main.js.map 는 프로덕션용으로 빌드할 때 여전히 존재합니다.

앱을 시작하는 데 7~10초(기기에 따라 다름)가 필요하므로 이전보다 더 나빠진 것처럼 보입니다.
(주1, 주2)

Google Pixel XL에서 시작 시간은 약 4.5~5초였습니다.
내 이전 앱 버전과 비교하면 여전히 1-2초 느립니다(시작 시간 3.5초).

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3-201612142137
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v6.9.1
Xcode version: Not installed

업데이트 2:

방금 이전 빌드의 크기를 0.45 및 0.47과 비교했습니다. main.js의 크기는 (거의 ~10kb) 3MB입니다. - 이것도 영향을 받아야 하는지 모르겠습니다.

업데이트3:

15분 동안 로딩을 시도한 후 가장 좋은 스냅샷입니다.

@danbucholtz 런타임 오류를 직접 해결

그러나 내 Samsung Galaxy S4 Android 버전 5.0.1에서 오류를 수정하고 ionic run android --prod --release 를 실행한 후 초기 로드는 여전히 7-8초입니다. 최신 ionic-app-scripts 버전으로 업데이트 한 후 초기에 변경 사항이 전혀 없습니다.

초기 로드 시간을 개선해야 합니다. 저는 개인적으로 제가 사용하고 있는 휴대폰과 안드로이드 버전이 부팅 시간이 그렇게 느리기에는 상대적으로 오래되었다고 생각하지 않습니다. 나는 구형 중급 전화기에서 부팅 시간이 3-4초 사이에 있으면 행복할 것입니다.

@graphefruit , 릴리스 절차에 언급되지 않은 2단계를 수행했습니다.
1) package.json 파일을 수동으로 수정하여 스크립트 버전을 0.0.47 로 변경한 후 npm install을 실행했습니다.
2) 릴리스 노트에 따라 새 빌드 프로세스에 유효하지 않은 .tmp 디렉토리도 제거했습니다.

이 외에는 릴리스 절차를 따랐습니다.

최신 ionic cli를 실행하고 있습니까? 확인할 수 있습니까? npm install -g ionic@latest .

npm run ionic:build --aot ngc 를 실행하고 터미널에서 ionic run android --prod --release 를 실행하면 터미널에 ngc 가 표시됩니까?

감사 해요,
단

안녕하세요 @danbucholtz 입니다 .

예 --prod --release를 실행할 때 ngc가 표시됩니다.
또한 오류 없이 cmd를 통해 ionic @latest 를 4번 이상 설치했습니다. 아마도 package.json의 일부 설정을 변경해야 할 수도 있습니다. 자체적으로 업그레이드되지 않았습니다.
또한 나는 약간의 차이를 보기 위해 nightly를 설치했습니다.

내일 아침에 실행할 수 있는 다른 명령입니다.

인사말
자몽

@danbucholtz

예, 최신 ionic-cli를 사용하고 있습니다(마지막에 내 작업 공간 환경 정보 참조).
나는 또한 당신이 언급한 두 경우 모두에서 터미널에 ngc 를 봅니다. 각각에 대한 스크린샷을 참조하십시오.
1) npm run ionic:build --aot
2) ionic run android --prod --release

1) AOT 빌드

2) 장치에서 실행되는 동안 프로덕션 빌드

7-8초인 초기 로드 시간에는 여전히 차이가 없습니다 😞 😞

cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.1
Xcode version: Not installed

@savanvadalia 긴 로딩 시간은 앱에 따라

또한 ionic-angular RC4로 업그레이드하는 것이 좋습니다.

@danbucholtz Care님, 이 게시물은 조금 더 길어질 것입니다.

내/맞춤 프로젝트

npm run ionic:build --aot

ionic run android --prod --release

ionic build android --prod --release

아직 로딩 시간이 10초.

스타터 앱

@astec 문의 후 스타터 앱을 설치했습니다.
그리고 여기에서도 똑같이 만들었습니다.

1. npm install -g ionic@latest
2. ionic start o5 --v2
3. ionic info

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v6.9.1
Xcode version: Not installed

1. ionic platform add android
2. npm run ionic:build --aot
   

3. ionic run android --prod --release
   

4. 타임스:
   7.1 참고 1 - Android 4.1 - 스타터 프로젝트는 5~5.5초 정도 소요되었습니다.
   7.2. 참고 2 - Android 7.0(CM14) - 스타터 프로젝트는 5.5~6.5초 정도 소요되었습니다.

회의 - 앱

그래서 다음 시도는 스타터 앱을 다운로드했습니다: https://github.com/driftyco/ionic-conference-app

1. npm install
2. ionic info
   

-> 이것은 rc.4에 없는 것 같습니다. 원인

1. changelog에서 언급한 대로 package.json을 변경했습니다.

"dependencies": {
  "@angular/common": "2.2.1",
  "@angular/compiler": "2.2.1",
  "@angular/compiler-cli": "2.2.1",
  "@angular/core": "2.2.1",
  "@angular/forms": "2.2.1",
  "@angular/http": "2.2.1",
  "@angular/platform-browser": "2.2.1",
  "@angular/platform-browser-dynamic": "2.2.1",
  "@angular/platform-server": "2.2.1",
  "@ionic/storage": "1.1.6",
  "ionic-angular": "2.0.0-rc.4",
  "ionic-native": "2.2.11",
  "ionicons": "3.0.0",
  "rxjs": "5.0.0-beta.12",
  "zone.js": "0.6.26"
},
"devDependencies": {
  "@ionic/app-scripts": "0.0.47",
  "typescript": "2.0.9"
}

1. node_modules 삭제됨
2. npm install
3. ionic info
   
4. ionic platform add android
5. npm run ionic:build --aot
   
6. ionic run android --prod --release
   
7. ionic build android --prod --release
   
8. 시작 시간
   11.1 참고 1 - Android 4.1 - 7-8s
   11.2 참고 2 - Android 7(CM 14) - 7 - 8.5초

화면에 콘텐츠가 표시될 때까지 "앱 아이콘 클릭"으로 시간을 측정했습니다.
따라서 최신 릴리스의 회의 앱도 7-8초가 필요하므로 사용자 지정 릴리스 프로젝트가 아닙니다.
그럼에도 불구하고 Conference-app은 큰 인터넷 활동이나 html-5 파일 시스템 없이 여전히 매우 작습니다.

도움이 되었기를 바랍니다.
인사말
자몽

@jgw96 , 위의 내용에 무게를

감사 해요,
단

FWIW 나는 Sony Compact Z3를 가지고 있습니다. 실제로 그렇게 오래되지 않았으며 시간은 Android 6.x에서 거의 동일합니다.

@jgw96 @danbucholtz 지금 Google Pixel에도 설치했는데 회의 앱 시작 시간이 3.5~4초 걸렸습니다.
재미있는 사실: 시작 시간이 8-10초로 10번 있었습니다. 그런 다음 앱을 제거했다가 다시 설치했는데 시간이 다시 3.5-4초로 줄었습니다.

@graphefruit 네, 하지만 재설치는 올바른 방법이 될 수 없습니다. ;-)
흥미로운(프로파일링)은 너무 많은 시간이 소요되고 다른(각형) 프레임워크(Ionic 1, OnsenUI 등)가 동일한 장치에서 간단한 "hello world" 앱을 시작하는 속도입니다.
내 (너무 오래되지 않은) Moto G2에서 RC4 conf 앱의 시작 시간은 약 6초입니다:-/

@mpaland 맞습니다 . 올바른 방법은 아니지만 때로는 찾은 모든 정보를 제공하는 것이 가장 좋은 방법이며 ionic이 이를 사용할 수 있기를 바랍니다.
이전에 일부 게시물에서 언급했듯이 Ionic1 앱을 Ionic2로 이식하고 있습니다. 시작 시간은 3초에서 최대 4초였습니다.
포팅된 프로젝트는 동일한 장치에서 7-8초가 걸립니다.

HTC One M8(안드로이드 6.0 - 바닐라)

그래서 귀하의 제안 후에 Ionic1 프로젝트를 설치했습니다.

1. ionic start myproject
2. ionic platform add android
3. ionic build android
4. Ionic1 - HTC One M8(Android 6.0)의 시작 시간은 약 2.5초였습니다.
5. Ionic 2 - 회의 앱 - 시작 시간: 5초
6. Ionic 2- 스타터 앱 - 시작 시간: 4초
7. Ionic 1 - 내 사용자 지정 프로젝트: 4초
8. Ionic2 - 내 사용자 지정 프로젝트: 7초.

충격! - 이 문장은 무시하세요.

따라서 ionic 2의 스타터 앱을 사용하더라도 차이는 여전히 약 1.5초입니다.
HTC One M8은 2014년 3월에 출시되었습니다.

모토 G(안드로이드 5.1)

이제 다음 기기인 Moto G - Android 5.1로 이동합니다.

1. Ionic1 - 4.5~5.5초
2. Ionic 2 - 회의 앱: 8.5~10.5초
3. Ionic 2 - 스타터 앱: 6~6.5초
4. Ionic 1 - 내 사용자 지정 프로젝트 - 5.5 - 6초
5. Ionic 2 - 내 맞춤 프로젝트 - 7-8초

보시다시피 아직 1.5초의 차이가 있고 회의 앱은 훨씬 더 많은 시간이 필요했습니다
Moto G는 2013년 11월에 출시되었습니다.

그래서 나는 그것이 지금 모든 질문에 답해야 한다고 생각합니다.

_그리고 예: ionic2의 모든 프로젝트는 RC4와 앱스크립트 0.0.47로 컴파일되었습니다.

최신 Ionic CLI를 사용하고 있습니까? 당신의 묶음은 얼마나 큽니까? npm run ionic:build --aot 컴파일하고 platformBrowserDynamic 가 없는지 확인할 수 있습니까? --aot 는 축소를 건너뛰지만 여전히 AoT 빌드를 제공해야 합니다.

감사 해요,
단

@danbucholtz 확인하고 15분 저질렀을 수도 있습니다. 지난 2시간 동안 이 게시물을 너무 많이 컴파일해서 =/ 죄송합니다.

platformBrowserDynamic 는 기본적으로 앱이 시작될 때 브라우저에서 ngc 를 실행해야 합니다. 궁극적으로 AoT를 하든 하지 않든 브라우저에서 여전히 .ngfactory.js` 파일을 사용하고 있습니다. 이전 게시물에서는 약 20초 정도 소요됩니다. 따라서 브라우저에서 컴파일하는 데 20초 + 시작 5초 = 긴 시간입니다.

5초는 여전히 길다. 뭔가 제대로 맞지 않습니다.

감사 해요,
단

@danbucholtz 안녕 또 dan! 죄송합니다. 최신 스크립트를 설치했지만 사용자 지정 프로젝트에서 npm run ionic:build --aot를 사용할 수 없었습니다. - 이미 상단에 내 게시물을 업데이트했습니다.

그래서 지금 새 프로젝트를 만들고 컴파일하고 서명했으며 이제 시작 시간이 7초로 돌아갑니다.

_다른 모든 검사를 언급하고 싶습니다_ - 회의/스타터 앱은 모두 ionic:build --aot를 사용했으며 platformBrowserDynamic이 NOT 있습니다.
모든 ZIPS를 추출하고 main.js 살펴보았습니다.

다시 한 번 죄송합니다.

@graphefruit 다양한 기기에서 이러한 통계를 생성하기 위해 많은 노력을 기울이고 있습니다 👍
@danbucholtz @jgw96 , abt Ionic Team이 Play 스토어에서 ionic-conference-app의 프로덕션 버전을 출시하는 방법과 초기 로드 시 몇 가지 통계를 다운로드할 수 있습니다.

우리의 로드 시간이 일치하지 않는다면 아마도 우리 빌드에 뭔가 잘못된 일을 하고 있는 것입니다.

@danbucholtz RC.0 부터 이러고 있는데 안드로이드에서 5초도 안되어 시동을 걸 수 있는 사람이 있을지 의문입니다. Ionic 1 시작 시간은 Ionic 2보다 낫습니다.

살펴보고 프로파일링을 좀 해주시겠어요?
앱을 빌드하기 위해 올바른 절차를 사용하고 있는지 먼저 확인하려고 하시지만 이 문제는 지난 몇 달 동안 크게 움직이지 않았으며 여러 사용자가 이 문제를 보고할 때 아마도 다음으로 인해 발생하지 않을 것입니다. 빌드 스크립트의 잘못된 사용.
시작하는 데 5초(여기서 가장 좋은 시나리오)는 거의 모든 Android 앱에 대한 쇼 스토퍼입니다.

내 통계:
Sony Z3 Compact Android 6.0.1 - AOT/제품/최소화 빌드(2 MiB JS 번들)는 Crosswalk가 있거나 없는 상태에서 시작하는 데 6초가 걸립니다. 느린 장치에서는 훨씬 더 많은 시간이 걸립니다(내 앱을 테스트한 사용자는 10초 이상을 보고했습니다).

@danbucholtz 팀의 장치 테스트 설정을 공유해 주시겠습니까? 다른 사람들과 같은 시작 지연이 발생하지 않는 이유는 확실하지 않습니다.

안녕하세요 여러분, 자세한 진단 및 테스트 정보에 대해 _정말_ 감사합니다. 이것이 현재 우리의 최우선 순위이며 여기에서 우리 중 일부는 긴 로드 시간을 보지 못하는 반면 다른 일부는 장치/OS/등에 따라 다릅니다. 범위를 좁히고 있습니다. 추가 정보가 있으면 언제든지 환영합니다.

@mlynch 누락된 5초는 아니지만 절약할 가치가 있는 시간이 될 수 있습니다.

https://github.com/driftyco/ionic-storage/issues/54

이온 라이브러리(저장소) 중 하나가 두 번(한 번이 아니라) 초기화되고 있다는 직감이 있습니다. 내가 매우 틀릴 수 있지만 여전히 시작 성능 향상을 추구하는 동안 고려를 위해 이것을 던졌습니다. 특히 여기에 더 넓은 문제가 있는 경우

안녕하십니까,
다른 장치를 테스트했습니다.

넥서스 7(2012) - 안드로이드 4.1

Ionic 1 - 스타터 앱: 4초
Ionic 2 - 회의 앱: 7초
Ionic 2 - 스타터 앱: 5.5초
Ionic 1 - 내 사용자 지정 프로젝트 - 5.5초
Ionic 2 - 내 사용자 지정 프로젝트 - 8.5초

오늘 저녁에 Android 6.0이 포함된 Ulefone-Metal의 또 다른 테스트를 제공할 수 있습니다.

인사말
자몽

Ionic을 2.1.17로 업그레이드하고 ionic run android --prod 실행한 후 성능이 크게 향상되었으며 내 앱이 2~3초 이내에 시작됩니다. 뭐가 달라졌는지는 모르겠지만 아주 만족스럽습니다. :스마일리:

@PrithiviRajG 더 많은 정보를 공유해 주시겠습니까?

1. 앱의 크기는 얼마입니까?
2. ionic info - 정보
3. package.json - 정보
4. 설치된 플러그인 / 타사 라이브러리
5. 어떤 장치를 사용하고 있습니까?
6. starter-app 및 ionic conference app 로도 테스트할 수 있습니까?
   미리 감사드립니다
   자몽

@grapefruit

1. 내 Apk 크기는 7MB, WWW 폴더의 크기는 7.88MB, 플러그인 폴더는 67.1MB, 리소스 폴더는 1.01MB입니다.
2. ionic info

 ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.39
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.7.0
Xcode version: Not installed

1. package.json

{
  "name": "ionic-app-base",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },
  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/cloud-angular": "0.5.2",
    "@ionic/storage": "1.1.6",
    "angular2-swing": "^0.10.0",
    "ionic-angular": "2.0.0-rc.2",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.21"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.39",
    "typescript": "2.0.3"
  }
}

1. 설치된 플러그인

cordova-plugin-device
cordova-plugin-facebook4
cordova-plugin-googleplus
cordova-plugin-nativeaudio
cordova-plugin-splashscreen
cordova-plugin-statusbar
cordova-plugin-whitelist
ionic-plugin-keyboard
angular2-swing

1. 기기 정보: MOTO G 1세대 - Android 5.1

   1. 곧 시작 앱과 이온 회의를 테스트하고 알려드립니다.

@PrithiviRajG 정보 감사합니다. 최신 버전이 아닌 것 같습니다.

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.39
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.7.0
Xcode version: Not installed

-> RC4가 아닌 RC2를 사용하고 있습니다. 또한 ionic 스크립트도 이제 0.0.47에 있습니다.

하지만 이것은 @jgw96에 대한 표시

안녕하십니까,
다른 장치를 테스트했습니다.

울레폰 메탈(안드로이드 6.0)

Ionic 1 - 스타터 앱: 3.5초
Ionic 2 - 회의 앱: 5초
Ionic 2 - 스타터 앱: 4.5 - 4.7초
Ionic 1 - 내 사용자 지정 프로젝트 - 5초
Ionic 2 - 내 사용자 지정 프로젝트 - 7초

인사말
자몽

@mlynch 단순히 초기 로드 시간이 개선되고 있다는 사실을 알고 싶습니다.
@danbucholtz 현재 tree-shaking 작업의 일부가 수정될까요 아니면 별도의 Android 전용 수정이 될까요?

회의록에서 Dan의 작업에 대해 알게 되었고, 여러분과 함께 일하는 것을 좋아합니다. 팀이 프레임워크 작업에 대해 얼마나 투명했는지 믿을 수 없습니다. :마음:

@savanvadalia ,

우리는 Ionic을 더 빠르게 만들기 위해 결코 노력하지 않을 것입니다.

지금 우리는 적절한 트리 쉐이킹이 작동하도록 하고 클로저 컴파일러 지원을 받는 데 집중하고 있습니다. 클로저는 다른 대안보다 훨씬 더 작은 JS 번들을 생성하여 로드 시간을 단축할 수 있습니다. 또한 자바스크립트를 로드하고 구문 분석하는 데 필요한 시간을 줄이기 위해 현재 코드 분할을 조사하고 있습니다.

감사 해요,
단

@danbucholtz 반가워요 . 점점 더 빨라지는 기능에 어떻게 기여할 수 있습니까?

저는 현재 소비자 금융 분야의 새로운 장기 제품 라인에 대한 프론트 엔드 및 모바일 기술을 평가하고 있습니다. 초기 로딩 성능은 필수적인 결정 요소입니다.

소규모 앱의 최근 테스트에서 iOS/Android 성능은 허용됩니다. 브라우저 로딩 성능도 어느 정도 괜찮습니다. 나중에 Server Side Rendering을 소개하겠습니다. 더 많은 페이지와 타사 모듈을 도입하기 시작할 때 가장 우려되는 것은 초기 로딩 성능입니다.

Ionic2/Webview 앱의 초기 로드에서 시작 화면이나 진행 상황을 표시하는 방법이 있습니까?

그들은 평균. 앱을 로드하는 데 걸리는 시간은 약 10초입니다. 이것은 사람들이 앱을 로드하기 위해 약 10초를 기다려야 할 때 나쁜 사용자 경험을 만듭니다. 내 앱은 크지 않습니다.

저는 npm run ionic:build --aot 와 ionic run android --prod 를 사용해서 디바이스에서 실행하는데 스타터 앱의 초기 시간은 2초 정도인데 제 프로젝트를 사용하다보면

잡히지 않은 오류: "./app.module.ngfactory" 모듈을 찾을 수 없습니다.

node_modules 및 www를 제거했지만 작동하지 않습니다.
ionic run android 실행하면 프로젝트가 작동하지만 초기 시간은 약 7-8초입니다.

여기 내 이온 정보가 있습니다

코르도바 CLI: 6.4.0
Ionic 프레임워크 버전: 2.0.0-rc.4
Ionic CLI 버전: 2.1.18
Ionic 앱 라이브러리 버전: 2.1.9
Ionic 앱 스크립트 버전: 0.0.48
ios-deploy 버전: 설치되지 않음
ios-sim 버전: 설치되지 않음
운영 체제: 윈도우 10
노드 버전: v6.6.0
Xcode 버전: 설치되지 않음

업데이트
typescript를 "2.0.9"로 다운그레이드하여 문제를 해결했습니다.

내가 무엇을 하든지 deviceready는 5초 후에 실행됩니다.

모두,

업데이트를 제공하기 위해 프레임워크 자체를 크게 개선하여 트리 쉐이킹 및 데드 코드 제거를 개선했습니다. 우리는 코드 분할 및 클로저 컴파일러를 실험해 왔으며 이러한 경우 번들 크기를 크게 줄였습니다. 실험하는 것이 핵심 단어이며 황금 시간에 대비할 준비가 되기까지는 약간의 시간이 걸릴 것입니다. 우리는 이 주제에 대해 Angular 팀과 매우 긴밀하게 협력하고 있습니다.

Closure Compiler는 놀라운 도구이지만 규칙을 따르지 않으면 많은 타사 라이브러리 또는 자체 앱을 손상시킬 수 있으므로 이에 대해 간단하면서도 강력하고 유연한 개발자 환경을 만들기 위해 노력하고 있습니다.

번들 크기 축소, 코드 분할 및 실행 속도 개선은 우리의 최우선 과제입니다.

감사 해요,
단

@danbucholtz 멋지네요 ! 과거에 Angular CLI 팀에 클로저 컴파일러를 제안했습니다. 클로저 컴파일러를 사용하여 컴파일을 선택적으로 만드는 스위치가 도입될 수 있습니다. 클로저 컴파일러 친화적인 코드를 사용하여 활성화할 수 있는 사용자는 표준 방식으로 컴파일할 수 있습니다. Ionic 팀은 핵심 Ionic 라이브러리와 Ionic 네이티브가 클로저 컴파일러와 완벽하게 호환되는지 확인할 수 있습니다. BTW 클로저 컴파일러를 사용하거나 사용하지 않고 달성할 수 있는 최고의 실행 속도를 공유하시겠습니까?

http://hybridtonative.com , NativeScript는 아직 미성숙하지만 Ionic 문제가 계속 발생하고 오픈 티켓이 지속되거나 증가하고 webview 기술이 자체적으로 회전하면서 개발자가 작업하는 대신 기술에 대해 작업하도록 함에 따라 점점 더 매력적입니다. 그것으로. 기본 작업조차도 엄청난 양의 해결 방법, 문제 파기, 많은 코드 업데이트가 필요하고, 변경 및 업데이트에 따라 생산이 끝나지 않는 연마의 진흙탕 기반에서 생산을 떠나는 것은 실제로 다른 나쁜 디자인 선택을 수정하는 잘못된 디자인 선택의 버그 수정을 요구합니다. 하루가 끝나면 우리는 가격을 지불하고 있으며 iOS와 Android 모두에서 기본적으로 앱을 개발하는 것과 비슷합니다.

@barocsi 과장? Angular 2와 ionic이 함께 작업하는 기술의 최첨단에 있으며 우리 개발자를 위한 최상의 조치를 찾기 위해 노력하고 있다는 것을 알고 계십니까? 또한 v2 안정 버전은 아직 출시되지 않았습니다.

@barocsi Ionic2 가 마음에
자신의 앵귤러 애플리케이션을 사용하더라도 이미 프레임워크에서 이온 문제를 해결하고 있는 많은 문제를 우연히 발견하게 될 것입니다.
또한 이 프레임워크는 오픈 소스이며 기여할 수 있습니다. 그들이 작업하는 속도에 문제가 있는 경우 또는 포크하여 자신만의 ionic2-fork를 만들 수 있습니다.
Ionic2에 릴리스 후보가 있더라도 베타 릴리스 주기에서 방금 나온 것이라도 논쟁하거나 울타리에서 무언가를 깨고 싶지 않습니다.
그러니 시간을 좀 주세요. 기다릴 수 없다면 ionic1을 타고 이 시장에서 이미 몇 년을 설정한 횡단 보도를 사용하십시오.

제안에 감사드립니다. 현재 및 미래의 결정에 대한 대안이 궁금합니다. 우리는 이미 강력하고 무거운 Ionic V1 및 V2 앱을 보유하고 있으며 거의 ​​1.5년 동안 이 github 리포지토리 전체에서 문제를 해결하고 기여했습니다. 이것이 친이온성 스레드일지라도 우리는 이 기술이 어디로 향 할지 예상해야 합니다.

나는 당신의 우려를 이해할 수 있습니다. 그래서 내 자신의 무거운 응용 프로그램에서 일반 angularjs를 사용했습니다.
문제는 내가 여전히 많은 문제를 우연히 발견했다는 것입니다. 왜냐하면 모든 것을 직접 작성하지 않거나 처음부터 작성하지 않으면 조만간 거기에 도달하게 될 것이기 때문입니다.
Angular-Material V1(예: 성능)에 큰 문제가 있었고 프레임워크를 직접 파헤쳐야 했습니다. 나머지는 angularjs로 직접 작성했습니다.
그러나 거기에서도 성능 문제가 발생하는 지경에 이르렀습니다.
그래서 나는 그것들을 찾고 고치기 위해 내 "자신의" 프레임워크에 시간을 할애해야 했습니다.
그래서 나는 Ionic의 문제를 이해할 수 있습니다. 왜냐하면 나 자신도 이러한 문제에 빠졌기 때문입니다.
그들이 크거나 큰 회사라 할지라도 그들은 또한 제한된 자원을 가지고 있습니다.

다음으로 Ionic2는 단순한 APP가 아니라 웹사이트도 제공하고 UWP도 지원하고(많이 고통스럽습니다) PWA도 지원합니다.
하나의 프레임워크에 너무 많은 새로운 기능이 포함되어 있습니다. 이 기능은 주로 앱에 사용되지만 다른 많은 기능도 지원합니다.
이 기능을 사용하면 많은 종속성과 관련 문제가 발생합니다.
하지만 당신의 우려는 적격이지만, 나는 오히려 시장에 던져진 완전한 새로운 기술의 문제를 보고 Ionic이 그것을 잡으려고 시도하고 그것에 많은 의존성을 얻습니다.

@danbucholtz

Dan, 코드 분할, 클로저 컴파일러, 트리 쉐이킹에 대한 '실험'을 다시 하는 귀하의 의견에 매우 고무되어 있으며 실행 속도는 ionic2(1월 4일)의 현재 최우선 순위입니다. Github에서 제공하는 예제 ionic2 회의 앱은 모두가 진행 상황을 비교하는 데 사용할 수 있는 좋은 간단한 벤치마크 앱입니다. 귀하의 작업이 (그리고 빠르게) 잘 진행되기를 바랍니다. 요즘에는 시작 시간이 <=3초가 필요합니다. 그렇지 않으면 사용자가 6초 이상 '떠날' 가능성이 있으며 확실히 영원히 '사라집니다'.

--prod를 사용하여 빌드하고 내 Nexus 7(2013) Android 6.0.1에서 실행한 회의 앱은 현재 실행하는 데 최대 8초가 소요됩니다(여러 실행에 대한 스톱워치의 평균 시간).

자, 아직 갈 길이 멀지만, 여러분의 성공을 기원합니다!!! - 특히 숙련된 개발자의 관점에서 ionic2가 제공하는 구조와 기능이 정말 마음에 듭니다.

필

@barocsi 님 의 상황은 이해가
요약하자면: 내 앱 프로젝트는 Android, iOS 및 Win10(데스크톱)에서 실행되어야 하고 빠르게 시작해야 합니다. 2초가 최대입니다. 오래된(2년을 의미하는) 기기에서도 마찬가지입니다.
많은 라이브러리와 경험으로 인해 JS와 HTML로 작성하고 싶습니다. 이것은 네이티브(Java, Obj C) 앱 대신 WebView 앱으로 필드를 좁힙니다.
특정 하드웨어 액세스가 필요하므로 Cordova가 좋은 선택입니다. NativeScript, Appcelerator, OnsenUI w/o ng2 ... 그럴 수도 있지만 아이디어가 전혀 마음에 들지 않습니다.

이 엄청난 코드 크기에 대해 ng2를 비난하는 순간에 적절한 트리 쉐이킹 및 클로저 컴파일러가 더 큰 프로젝트에서 시작 시간을 크게 줄일 수 있을지 확신할 수 없습니다(4-5 요소 필요). 우리는 보고 기다려야 합니다...

@mpaland 이미 Ionic1을 사용해 보셨습니까?
구형 장치에서도 2초의 시작 시간을 얻는 방법을 알고 싶습니다.
ionic1이 없는 내 사용자 지정 프로젝트에는 약 3초의 시작 시간이 필요하며 여기에는 다음이 포함됩니다.

1. index.html
2. 분.css
3. min.js

그리고 그게 다야.

이미 코르도바(각도 등)로 그렇게 빠른 로딩 시간을 달성했습니까?

@graphefruit , 아니요, Ionic 1을 시도하지 않았고 아직 다른 것을 시도하지 않았습니다. 왜냐하면 Ionic 2가 내 프로젝트에 가장 적합하다는 것을 알았기 때문입니다. 내가 말했듯이, 나는 단지 다른 옵션을 평가하고 있습니다. JS가 있는 WebView는 여전히 _my_ 최선의 선택입니다. 그래서 저는 ng와 ionic 팀이 발전하기를 고대하고 있습니다.

@grapefruit
나는 ionic2가 마침내 구형 장치에서도 <=3초 시작을 달성하기를 바랍니다. 나는 이미 '즉시 사용 가능한' 다른 하이브리드 프레임워크 + 코르도바를 사용하여 이를 달성할 수 있습니다. 그러나 나는 angular2를 기반으로 구축된 훌륭한 혈통을 가지고 있기 때문에 ionic2를 사용하는 것을 훨씬 선호합니다. 그러면 나 같은 경험이 풍부한 개발자가 높이 평가하는 모든 것이 훌륭한 지원, 문서, 시설 등을 제공합니다.

@philrob 다른 Hybrid Framework + Cordova(프로젝트에 필요한 모든 것 포함)가 3초 미만으로 제공

로드그레그
다른 프레임워크를 도입하기에 적절한 장소가 아닙니다. 나는 단지 ionic2 팀이 <=3초라는 나의 열망에 더 가까워지도록 하는 출시 시간의 상당한 감소를 달성할 수 있기를 바라고 있습니다.

안녕하세요
내 ionic2 응용 프로그램을 실행하는 데 여전히 10초가 걸립니다.그러나 ionic1 응용 프로그램은 4초만 걸립니다.초기 로딩 시간을 개선하는 방법입니다.제안하십시오.이것은 매우 중요합니다.

@philrob 진지하게, 다른 의견을 확인하면 항상 비교가 있음을 빨리 알 수 있습니다. 젠장, 이 스레드에도 그것들이 있습니다. 당신이 말하는 것은 거짓말이 아니지만, Cordova 컨테이너 내에서 jQuery(예제) 이상을 실행하지 않는 하이브리드 앱이 3초 이내에 열리는 것을 설명하는 것은 완전히 터무니없는 것입니다. 스타일을 처리하지 않거나 Ionic만큼 복잡하지 않거나 다른 거대한 라이브러리(angular2)에 의존하지 않는 프레임워크를 사용하는 것은 밤과 낮을 비교하는 것과 같습니다. 말도 안돼

@mobinius-shreesha는 프로젝트를 ionic build android --prod 또는 ionic run android --prod 로 실행하여 시작 시간을 5초로 얻습니다. 디버그 모드 ionic run android 에서 실행하면 시간이 10초 이상 늘어납니다.

로드그레그

우리가 동의하지 않는다고 생각하지 마십시오. 이것이 내가 의도적으로 내 Nexus 7(2013) Android 6.0.1용으로 출시 타이밍(~8초)을 제공하기 위해 Github의 ionic2 회의 앱(--prod로 빌드)을 사용하기로 선택한 이유입니다. 분명히 다른 프레임워크가 동일한 장비에서 더 빠른 실행 시간을 달성하고 여전히 내가 필요한 기능(스타일이 지정된 UI 모바일 위젯 포함)을 제공할 수 있다면 FOR ME와 관련이 있습니다.

반복합니다 - 저는 이전에 언급한 다른 모든 중요한 이유로 ionic2를 정말 좋아합니다. 단지 발사 속도가 크게 향상되는 것을 보고 싶을 뿐입니다. ionic2 팀에게 필요한 시간을 제공해야 한다고 생각하세요...

또한 부팅 시간이 증가하기를 기대합니다.

Ionic 팀은 지난 주에 v1의 ionic-app-scripts 릴리스로 멋진 일을 해냈다고 생각합니다. 이것은 제 환경에서 크게 개선된 빌드 시간입니다.

나는 그들이 앱 부팅 시간에도 똑같이 할 것이라고 확신합니다.

문제는 다른 곳에 있다고 생각합니다. ionic v2는 rc 상태입니다. 그러나 이것이 대부분의 개발자가 존중해야 하는 것입니다. Ionic 팀 측에서 ionic 문서는 v2가 프로덕션 준비가 된 것으로 모든 신규 사용자에게 제안합니다. 이의를 제기하지 마십시오. 문서조차도 이제 v2로 기본 설정됩니다.

자발적이든 아니든 팀의 이러한 기만적인 행동은 일종의 업계 압력의 결과입니다. Ionics의 유일한 생존은 커뮤니티가 다른 새로운 크로스 플랫폼 기술로 전환하기 전에 대규모 개발 기반(js+angular2)을 갖춘 고급 무언가를 배치하는 데 달려 있습니다.

따라서 Ionic 팀은 v2가 Ionic의 사실상 버전임을 제안해야 합니다. 그러나 이 경우 가격표가 더 높을 수 있습니다. 최대한 빨리 수정하지 않고 오류가 있는 중요한 부품이 있는 제품을 출시하면 커뮤니티로부터 불신을 얻게 됩니다. 이는 제품을 최첨단으로 포지셔닝하기 전에 몇 달을 더 기다리는 것보다 때로는 더 위험합니다. 성숙한 주요 업그레이드.

개발자는 생산해야 하며 각 단계에서 물러나거나 수정 사항이 없으면 자신의 미래와 고객에 대한 안정성을 헤지하기 위해 다른 솔루션으로 눈을 돌립니다.

이에 대한 업데이트가 있습니까? :)

@PrithiviRajG 답변해 주셔서 감사합니다. 10초 이내에 앱을 시작할 수 있습니다. 하지만 부팅 시간을 개선하기 위해 ionic2에 대한 업데이트가 있습니까? ionic2의 정식 버전을 출시할 계획이 있을 때.

설치된 현재 플러그인 및 현재 이온 버전으로 14.99초 콜드 부팅:

com-badrit-base64 0.2.0 "Base64"
com.synconset.imagepicker 2.1.7 "이미지 선택기"
cordova-plugin-camera 2.3.1 "카메라"
cordova-plugin-compat 1.1.0 "호환"
cordova-plugin-console 1.0.5 "콘솔"
cordova-plugin-device 1.1.4 "장치"
cordova-plugin-dialogs 1.3.1 "알림"
cordova-plugin-nativestorage 2.2.0 "네이티브 스토리지"
cordova-plugin-secure-storage 2.6.3 "SecureStorage"
cordova-plugin-spiner-dialog 1.3.1 "SpinnerDialog"
cordova-plugin-splashscreen 4.0.1 "스플래시 화면"
cordova-plugin-statusbar 2.2.1 "상태 표시줄"
cordova-plugin-whitelist 1.3.1 "화이트리스트"
ionic-plugin-keyboard 2.2.1 "키보드"

시스템 정보:

코르도바 CLI: 6.4.0
Ionic 프레임워크 버전: 2.0.0-rc.1
Ionic CLI 버전: 2.1.18
Ionic 앱 라이브러리 버전: 2.1.9
Ionic 앱 스크립트 버전: 0.0.48
iOS 배포 버전: 1.9.0
ios-sim 버전: 설치되지 않음
OS: macOS 시에라
노드 버전: v6.9.2
Xcode 버전: Xcode 8.2.1 빌드 버전 8C1002

@tryadelion 현재 이온 버전은 rc1이 아니라 rc4입니다.

여러분, RC5나 출시를 기다리자. 이것과 관련해 많은 변화가 있을 것입니다.

rc4에 대한 이온 업데이트를 어떻게 강제합니까? 내 지연의 원인이 될 수 있는 다른 오래된 것이 있습니까?

저에게 ionic v1의 복잡한 프로젝트는 1.8MB build.js였으며 v2의 경우 기본 프로젝트인 main.js가 6.7MB 이상 증가했습니다.
부팅 시간에 불필요하게 영향을 미치지 않는 Cordova 플러그인을 추가하거나 제거합니다.

안녕하세요 여러분! 지금은 이 문제를 종료하고 스레드를 잠글 것입니다. 이 시점에서 우리는 로드 시간, 프레임워크 속도를 개선하고 모든 곳에서 작동하도록 하기 위해 많은 작업을 수행했습니다.

이것은 항상 움직이는 표적이 될 것이며 우리가 끊임없이 생각하는 것입니다. 이 문제는 처음에는 도움이 되었지만 이후 탈선하여 더 이상 따라야 할 명확한 문제가 아닙니다. 다른 문제가 있는 경우 요청한 모든 정보와 함께 새 문제를 여십시오.