カテゴリー
[Angular] ビルド後のファイルの出力サイズを試行錯誤しつつ減らしてng buildのコマンドオプションを最適化する方法を考える
※ 当ページには【広告/PR】を含む場合があります。
2020/04/18
2022/03/21
--build-optimizer=true --aot=trueangular.json旧angular-cli.jsonconfigurations
TL;DR
Angularプログラマーが意識して積極的にコード最適化する必要はない
$ ng b --configuration=production --build-optimizer=true --aot=true --output-hashing=none
ng build 後の生成物に付くハッシュ値を消す方法
$ ng build --configuration production --build-optimizer true --aot true
Date: 2019-06-24T07:45:43.041Z
Hash: 4470e19ad1e0b3dfa8cb
Time: 112933ms
chunk {0} runtime.26209474bfa8dc87a77c.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} es2015-polyfills.bda95d5896422d031328.js (es2015-polyfills) 56.6 kB [initial] [rendered]
chunk {2} main.a89343786a3a7a06abc2.js (main) 1.24 MB [initial] [rendered]
chunk {3} polyfills.7dc9f29e95cefa5190c3.js (polyfills) 41 kB [initial] [rendered]
chunk {4} styles.602cfcb7b605501de325.css (styles) 84.8 kB [initial] [rendered]
--output-hasing none
$ ng build --configuration production --build-optimizer true --aot true --output-hashing none
Date: 2019-06-24T08:33:07.003Z
Hash: 5125e69c6cc20452a05c
Time: 67533ms
chunk {0} runtime.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} es2015-polyfills.js (es2015-polyfills) 56.6 kB [initial] [rendered]
chunk {2} main.js (main) 1.24 MB [initial] [rendered]
chunk {3} polyfills.js (polyfills) 41 kB [initial] [rendered]
chunk {4} styles.css (styles) 84.8 kB [initial] [rendered]
ソースコードまわりを手動でスリム化
はぐれライブラリ削除対象1: インポートしながらも未使用のライブラリ
app.module.ts
import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
^^^^^^^^^^^^^^^^^
// どこにも使われて無いまま残るやつ
chunk {0} runtime.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} es2015-polyfills.js (es2015-polyfills) 56.6 kB [initial] [rendered]
chunk {2} main.js (main) 1.24 MB [initial] [rendered]
chunk {3} polyfills.js (polyfills) 41 kB [initial] [rendered]
chunk {4} styles.css (styles) 84.1 kB [initial] [rendered]
削除対象2: 無駄なコンポーネント
Callback
// import { CallbackComponent } from './components/callback/callback.component';
@NgModule({
declarations: [
AppComponent,
HeaderToolbarComponent,
// CallbackComponent,
// ...
// ...
// import { CallbackComponent } from './components/callback/callback.component';
const routes: Routes = [
// ...
// {
// path: 'callback',
// component: CallbackComponent,
// },
chunk {0} runtime.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} es2015-polyfills.js (es2015-polyfills) 56.6 kB [initial] [rendered]
chunk {2} main.js (main) 1.24 MB [initial] [rendered]
chunk {3} polyfills.js (polyfills) 41 kB [initial] [rendered]
chunk {4} styles.css (styles) 84.1 kB [initial] [rendered]
削除対象3: 無駄にクラスに実装しているインターフェイス
OnInitOnDestoryAfterViewInitAfterViewInit
import { Component, OnInit, AfterViewInit } from '@angular/core';
...
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit {
title = 'tacosKingdom';
opened: boolean;
constructor(
@Inject(PLATFORM_ID) private platformId: any,
@Inject(DOCUMENT) private document: any
) {
}
public ngOnInit(): void {
if (!isPlatformBrowser(this.platformId)) {
const bases = this.document.getElementsByTagName('base');
if (bases.length > 0) {
bases[0].setAttribute('href', environment.baseHref);
}
}
}
public ngAfterViewInit() {}
public innerToggle() {}
}
chunk {0} runtime.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} es2015-polyfills.js (es2015-polyfills) 56.6 kB [initial] [rendered]
chunk {2} main.js (main) 1.24 MB [initial] [rendered]
chunk {3} polyfills.js (polyfills) 41 kB [initial] [rendered]
chunk {4} styles.css (styles) 84.1 kB [initial] [rendered]
@angular/core@angular/commonrxjs削除対象4: 重い外部ライブラリ(Angular Materialなど)
Angular MaterialAngular Material
import {
// MatSidenavModule, <-- Useless
// MatCheckboxModule, <-- Useless
MatButtonModule,
MatIconModule,
MatCardModule,
MatFormFieldModule,
MatInputModule,
MatToolbarModule,
// MatDialogModule, <-- Useless
// MatGridListModule, <-- Useless
MatListModule
} from '@angular/material';
@NgModule({
...
imports: [
...
MatButtonModule,
// MatCheckboxModule, <-- Useless
// MatDialogModule, <-- Useless
MatCardModule,
// MatSidenavModule, <-- Useless
MatIconModule,
MatFormFieldModule,
MatInputModule,
MatToolbarModule,
// MatGridListModule, <-- Useless
MatListModule,
chunk {0} runtime.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} es2015-polyfills.js (es2015-polyfills) 56.6 kB [initial] [rendered]
chunk {2} main.js (main) 1.18 MB [initial] [rendered]
chunk {3} polyfills.js (polyfills) 41 kB [initial] [rendered]
chunk {4} styles.css (styles) 84.1 kB [initial] [rendered]
削除対象5: 重い標準ライブラリ(ReactiveFormsModuleなど)
ReactiveFormsModule
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
...
@NgModule({
...
imports: [
...
// BrowserAnimationsModule, <-- Useless
// ReactiveFormsModule, <-- Useless
// HttpClientModule, <-- Useless
...
chunk {0} runtime.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} es2015-polyfills.js (es2015-polyfills) 56.6 kB [initial] [rendered]
chunk {2} main.js (main) 1.18 MB [initial] [rendered]
chunk {3} polyfills.js (polyfills) 41 kB [initial] [rendered]
chunk {4} styles.css (styles) 84.1 kB [initial] [rendered]
【おまけ】 --optimizationオプションに関して
build
--buildOptimizer:
--aotオプションが有効化していた場合に、
内部の@angular-devkit/build-optimizerを利用して最適化させます
--optimization:
ビルド生成物に対し最適化させます
buildOptimizeroptimizationbuildOptimizeraotoptimizationwebpackbabel--aot=true --buildOptimizer=true結論
参考
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー