Как уменьшить размер файла шаблона Angular 5 (component.html)?

Question

Это один из моих файлов component.html. создание новой конструкции-user.component.html

<p class="dialog-title">Create New User</p>

<form autocomplete="off" class="dialog-card-form" [formGroup]="CreateNewUserForm" (ngSubmit)="NewUserSubmit()">

    <mat-form-field class="example-full-width">
        <input matInput placeholder="Name" name="name" formControlName="name">
    </mat-form-field>
    <mat-form-field class="example-full-width">
        <input matInput placeholder="Username" name="username" formControlName="username" (ngModelChange)="usernameChanged($event)">

        <!-- <div *ngIf="!username.valid">{{username.errors| json}}</div> -->
    </mat-form-field>
    <mat-form-field style="width:90%">
        <input matInput placeholder="Enter user password" [type]="hide ? 'password' : 'text'" name="password" formControlName="password">
        <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
    </mat-form-field>
    <mat-form-field>
        <mat-select placeholder="Store" formControlName="storeId" name="storeId">
            <mat-option *ngFor="let store of data.stores" [value]="store.id">
                {{ store.name }}
            </mat-option>
        </mat-select>
    </mat-form-field>
    <mat-form-field>
        <mat-select placeholder="Role" formControlName="role" name="role" (ngModelChange)="roleChanged($event)">
            <mat-option value="user">
                User
            </mat-option>
            <mat-option value="admin">
                Admin
            </mat-option>
        </mat-select>
    </mat-form-field>
    <div id="user-checkboxes">
        <mat-checkbox (change)="cusDisChange($event);" name="cusDis" formControlName="cusDis">Dispatch & Customer</mat-checkbox>
        <!-- <mat-checkbox name="oDispatch" formControlName="oDispatch"></mat-checkbox> -->
    </div>
    <div id="user-checkboxes">
        <mat-checkbox (change)="stoSupChange($event);" name="stoSup" formControlName="stoSup">GRN & Supplier</mat-checkbox>
        <!-- <mat-checkbox name="oSupplier" formControlName="oSupplier">Supplier</mat-checkbox> -->
    </div>
    <mat-checkbox name="oReport" formControlName="oReport">Report</mat-checkbox>
    <br>
    <br>

    <div id="allowed-times" *ngIf="showTimes">


        <div *ngFor="let week of weekTempList">

            <mat-checkbox formControlName="{{week.shortWeekName}}" (change)="weekCheckBoxToggled(week.shortWeekName, $event);">{{week.weekName}}</mat-checkbox>

            <div style="text-align:right; display:inline">

                <div id="time-group">
                    <mat-form-field id="small-width">
                        <mat-select  formControlName="{{week.SH}}">
                            <mat-option *ngFor="let hour of hours" [value]="hour">
                                {{ hour }}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                    <mat-form-field id="small-width">
                        <mat-select  formControlName="{{week.SM}}">
                            <mat-option *ngFor="let minute of minutes" [value]="minute">
                                {{ minute }}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                    <mat-form-field id="small-width">
                        <mat-select  formControlName="{{week.SA}}">
                            <mat-option *ngFor="let amp of AMPM" [value]="amp">
                                {{ amp }}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>

                <span>-</span>

                <div id="time-group">
                    <mat-form-field id="small-width">
                        <mat-select  formControlName="{{week.EH}}">
                            <mat-option *ngFor="let hour of hours" [value]="hour">
                                {{ hour }}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                    <mat-form-field id="small-width">
                        <mat-select  formControlName="{{week.EM}}">
                            <mat-option *ngFor="let minute of minutes" [value]="minute">
                                {{ minute }}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                    <mat-form-field id="small-width">
                        <mat-select  formControlName="{{week.EA}}">
                            <mat-option *ngFor="let amp of AMPM" [value]="amp">
                                {{ amp }}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>
            </div>


            <br>
        </div>

    </div>

    <diV class="dialog-card-buttons">
        <mat-checkbox checked="true" formControlName="status" name="status">Enable</mat-checkbox>

        <button mat-raised-button color="primary" type="submit">Create New User</button>

        <button mat-raised-button type="button" (click)="onNoClick()">Cancel</button>
        <br>
        <br>

    </diV>
</form>
<p id="errorMsg" *ngIf="usernameErr">Username Already Exists</p>

Это исходный файл карты.

Почему все мои файлы шаблонов имеют такой большой размер? Есть ли какие-либо изменения, которые я должен сделать, чтобы уменьшить размер? Мой JS-файл Main Bundle занимает около 2 МБ.

Я использовал только один основной модуль для включения всех компонентов. Я использовал один общий модуль для включения всех угловых компонентов материала.

Должен ли я разделить основной модуль на несколько дополнительных модулей? А также я заметил огромное падение производительности приложения после нескольких минут использования.

Как уменьшить размер шаблонов? и улучшить производительность?