如何减少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文件大约2 MB。

我只使用一个主模块来包含所有组件。 我使用了一个共享模块来包含所有Angular Material Components。

我是否需要将主模块划分为更多功能模块？ 此外，我注意到使用几分钟后应用程序的性能下降很大。

如何减少模板的大小？并提高性能？