[Ionic]LazyLoading에서 파일 크기 또는 로드 시간

요전날의 「ng-japan」 덕분에 조금 의욕이 나온 엔지니어입니다.
담당하고 있는 프로젝트의 규모가 크고, 앱의 기동 시간이 신경이 쓰이고 있던 오늘 요즘.
감각을 잡기 위해 Ionic에서의 Lazy Loading에 대해 실험해 보았습니다.
환경 준비 등등, 세세한 곳은 자세하게 쓰고 있지 않습니다.

환경

$ ionic info

global packages
버전


@ionic/cli-utils
1.4.0

Ionic CLI
3.4.0



local packages
버전


@ionic/app-scripts
1.3.7

@ionic/cli-plugin-ionic-angular
1.3.1

@ionic/app-scripts
1.3.7

Ionic Framework
ionic-angular 3.4.2



시스템
버전


Node
v7.2.1

OS
Windows 10

npm
4.0.3

했던 일

빈 프로젝트 생성

Ionic 블로그를 참고로 Lazy Loading 대응시킨다

페이지 추가

GitHub Pages에 배포

Lazy Loading 프로젝트와 그렇지 않은 "main.js"의 크기와 로딩 시간을 측정합니다

덤

빈 프로젝트 생성

$ ionic start lazy-test blank

Ionic의 블로그를 참고로 Lazy Loading 대응시킨다

Ionic 공식 블로그

위의 링크를 참고로 프로젝트를 Lazy Loading할 수 있도록 한다.

페이지 추가

Blank 템플릿 그대로는 맛이 없기 때문에 ionic cli에서 페이지 추가

$ ionic generate page lazy-01
$ ionic generate page lazy-02
$ ionic generate page lazy-03
$ ionic generate page lazy-04
$ ionic generate page lazy-05
$ ionic generate page lazy-06
$ ionic generate page lazy-07
$ ionic generate page lazy-08
$ ionic generate page lazy-09
$ ionic generate page lazy-10
$ ionic generate page lazy-home

Ionic CLI의 generate 기능으로 페이지를 추가하면 아래와 같이
처음부터 Module 파일이 생성되었으며 '@IonicPage' 데코레이터도 추가되었습니다.

lazy-01.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Lazy_01Page } from './lazy-01';

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

lazy-01.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the Lazy_01Page page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-lazy-01',
  templateUrl: 'lazy-01.html',
})
export class Lazy_01Page {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Lazy_01Page');
  }

}

빌드를 걸면 아래 그림과 같이 파일이 생성되었습니다.

$ npm run build --prod

GitHub Pages에 배포

cd www
git init
git add .
git commit -m "first commit"
git remote add origin https://~~~~~~~~~~~~~~~~~~~~~~~~~~~~.git
git push -u origin master 

GitHub 리포지토리의 설정에서 게시 설정.
잠시 기다리면 액세스할 수 있게 되었습니다.

측정

main.js 파일 크기

Lazy Loading하지 않음: 1215KB
lazy Loading 하고 있다: 469KB

로딩 시간

Chrome에서 확인

각 20회씩 로드

Lazy Loading하지 않음 : 194.1ms
lazy Loading 하고 있다:　47.6ms

덤

빌드 실행 시간도 측정해 보았습니다.

각 5회씩

$ npm run build --prod

총 시간

Lazy Loading하지 않음 : 98.2ms
lazy Loading 하고 있다:　106.6ms

Webpack 전용

Lazy Loading하지 않음 : 13.1ms
lazy Loading 하고 있다:　12.3ms

감상

처음에 로드되는 파일의 크기와 그 로드 시간은 확실히 볼 수 있는 효과가 나타났습니다.
Webpack의 실행 시간은 Lazy Loading 대응하고 있는 편이 빨라진다고 상정하고 있었습니다만 변함없이・・・
실험용 프로젝트는 html+Typescript+css 포함 약 7000step의 작은 프로젝트이며,
자작 provider 없음의 매우 작은 것이므로, 효과가 얇은 것인가?
아니면 좋은 방법이 나쁜가?
「이러면 좋을 건가요?」나 「여기 잘못되어요」등등의 지적 받을 수 있으면 매우 기쁩니다.
디버그 툴의 사용법에 대해 자세하게 되면 더 다른 각도로부터 결과를 확인할 수 있을 것 같아・・・

의문

생성된 Bundle 파일의 실제 크기는 '1215KB'나 '469KB'인데 Chrome의 DeveloperTool Network에서 확인하면
「Size」가 「170KB」 「132KB」가 되는 것은 왜?