とんかつ時々あんどーなつ

〜たとえ低空でも飛行していられるように〜

不要な ngOnInit を削除すると assets size を 0.01 kB ずつ削減できる

Angular

はじめに

タイトル以上の情報はないが、使っていない ngOnInit を消すと assets size を 0.01 kB ずつ削減できるよ、という話。

下準備

サンプルアプリの用意

とりあえず下記コマンドでサンプルアプリを用意する。

$ npx @angular/cli new ng-sample --package-manager yarn --strict
  • angular/core のバージョンは v11.2.5
  • routing は設定せず
  • stylesheet format は CSS

デフォルトテンプレートの内容はすべて削除

app.component.html に最初から書かれている内容はすべて削除する。(今回の趣旨には直接関係しないが気持ちの問題。いらないものは消しておく)

サンプルのコンポーネントを用意

サンプルのコンポーネントを 2 つ用意する。今回は hero, hero-list, villain, villain-list を作成した。

$ yarn ng g c hero
$ yarn ng g c hero-list
$ yarn ng g c villain
$ yarn ng g c villain-list

これを app.component.html に表示する。

<app-hero></app-hero>
<app-hero-list></app-hero-list>
<app-villain></app-villain>
<app-villain-list></app-villain-list

これで準備はできた。

実際にご覧いただこう

Angular CLI で component を作成すると ts は以下のようになっている。(注: フォーマット済み)

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css'],
})
export class HeroComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

つまり最初から ngOnInit() が入っている状態である。この状態で production build をして assets size を見てみよう。

$ yarn build --prod
yarn run v1.22.10
$ ng build --prod
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.65579c4fc763cbfd21e3.js      | main          | 102.23 kB
polyfills.87c0e4f79fec903b32a9.js | polyfills     |  35.98 kB
runtime.7425f237727658da0a30.js   | runtime       |   1.45 kB
styles.3ff695c00d717f2d2a11.css   | styles        |   0 bytes

                                  | Initial Total | 139.66 kB

Build at: 2021-03-12T14:18:30.841Z - Hash: 0b4eddcca3653b180e25 - Time: 15496ms
✨  Done in 20.20s.

注目すべきは main の size である。102.23 kB だ。

ここで hero.component.ts から使っていない ngOnInit() を削除して、再度 production build してみよう。

$ yarn build --prod
yarn run v1.22.10
$ ng build --prod
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.f538590d74d97351e398.js      | main          | 102.22 kB
polyfills.87c0e4f79fec903b32a9.js | polyfills     |  35.98 kB
runtime.7425f237727658da0a30.js   | runtime       |   1.45 kB
styles.3ff695c00d717f2d2a11.css   | styles        |   0 bytes

                                  | Initial Total | 139.65 kB

Build at: 2021-03-12T14:20:18.274Z - Hash: 5f2c82f7d185e359bacd - Time: 17807ms
✨  Done in 22.75s.

確かに 0.01 kB 減っている。

villain.component.ts からも同様に ngOnInit() を削除するとさらに 0.01 kB 減ることが確認できる。

またあわせて使っていない constructor() も削除してみる。するとこれもサイズを抑える要因になった。

yarn build --prod
yarn run v1.22.10
$ ng build --prod
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.6311a7f72a40f0ad158b.js      | main          | 102.18 kB
polyfills.87c0e4f79fec903b32a9.js | polyfills     |  35.98 kB
runtime.7425f237727658da0a30.js   | runtime       |   1.45 kB
styles.3ff695c00d717f2d2a11.css   | styles        |   0 bytes

                                  | Initial Total | 139.61 kB

Build at: 2021-03-12T14:28:12.115Z - Hash: 0b5eea6e073dc1e995fa - Time: 12728ms
✨  Done in 17.63s.

4 つ作ったコンポーネントのうち hero と villain から使っていない ngOnInit() と constructor() を削除しただけで、なんと 0.05 kB の削減になった。 (計算があってなさそうだけど constructor() は 0.01 kB よりちょっとだけ多く減ってそう)

まとめ

不要なコードの削除は Readability の向上だけでなく assets budgets の観点でもお得！