همانطور که در مطلب
قبل دیدیم، با اضافه کردن style ها و فایل‌های Javascript ای حجم صفحات خروجی رو به افزایش بودند. اولین راه بهینه سازی، استفاده از feature module است. می‌خواهیم هر زمان که به ماژولی نیاز داریم، آن را import و استفاده کنیم.
در ادامه دو فایل زیر را برای استفاده از ماژول‌های Angular Material و Kendo Angular UI در مسیر app\modules تعریف میکنیم.
// angular-material-feature.module.ts
import { NgModule } from '@angular/core';
// Import angular kendo angular
import {
MatFormFieldModule, MatInputModule,
MatButtonModule, MatButtonToggleModule,
MatDialogModule, MatIconModule,
MatSelectModule, MatToolbarModule,
MatDatepickerModule,
DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatTableModule, MatCheckboxModule, MatRadioModule, MatCardModule, fadeInContent,
MatListModule, MatProgressBarModule, MatTabsModule
} from '@angular/material';
import {
MatSidenavModule,
MatSlideToggleModule,
} from '@angular/material';
import { MatMenuModule } from '@angular/material/menu';
@NgModule({
declarations: [
// KendoGridPaginationComponent
],
imports: [
MatSidenavModule,
MatSlideToggleModule,
MatInputModule,
MatFormFieldModule,
MatButtonModule, MatButtonToggleModule,
MatDialogModule, MatIconModule,
MatSelectModule, MatToolbarModule,
MatDatepickerModule,
MatCheckboxModule,
MatRadioModule,
MatCardModule,
MatMenuModule,
MatListModule,
MatProgressBarModule,
MatTabsModule
],
exports: [
MatSidenavModule,
MatSlideToggleModule,
MatInputModule,
MatFormFieldModule,
MatButtonModule, MatButtonToggleModule,
MatDialogModule, MatIconModule,
MatSelectModule, MatToolbarModule,
MatDatepickerModule,
MatCheckboxModule,
MatRadioModule,
MatCardModule,
MatMenuModule,
MatListModule,
MatProgressBarModule,
MatTabsModule
],
providers: [
]
})
export class AngularMaterialFeatureModule {
}
و
// kendo-feature.module.ts
import { NgModule } from '@angular/core';
// Import kendo angular ui
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { DialogsModule } from '@progress/kendo-angular-dialog';
import { RTL } from '@progress/kendo-angular-l10n';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { WindowService, WindowRef, WindowCloseResult, DialogService, DialogRef, DialogCloseResult } from '@progress/kendo-angular-dialog';
import { SnotifyModule, SnotifyService, SnotifyPosition, SnotifyToastConfig, ToastDefaults } from 'ng-snotify';
@NgModule({
declarations: [
],
imports: [
ButtonsModule,
GridModule,
ExcelModule,
DropDownsModule,
InputsModule,
DateInputsModule,
DialogsModule,
LayoutModule,
SnotifyModule,
],
exports: [
ButtonsModule,
GridModule,
ExcelModule,
DropDownsModule,
InputsModule,
DateInputsModule,
DialogsModule,
LayoutModule,
],
providers: [
{ provide: 'SnotifyToastConfig', useValue: ToastDefaults },
SnotifyService,
// Enable Right-to-Left mode for Kendo UI components
{ provide: RTL, useValue: true },
]
})
export class KendoFeatureModule {
} از این پس، هر زمانیکه به ماژولی نیاز داریم، feature module آن را import میکنیم.
در ادامه‌ی بهینه سازی، از قابلیت Lazy-Loading استفاده میکنیم و فایل های زیر را جهت پیاده سازی lazy-loading تغییر می‌دهیم.
محتویات فایل styles.scss را پاک میکنیم.
فایل app.module.ts :
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserAnimationsModule,
RouterModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
و فایل app.component.ts :
// app.component.ts
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
title = 'HowToKeepAngularDeploymentSizeSmall';
constructor() {
}
}
و محتویات فایل app.component.scss را پاک میکنیم.
و فایل app.component.html :
// app.component.html
<router-outlet></router-outlet>
و فایل app-routing.module.ts
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', loadChildren: './projects/home/home.module#HomeModule' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { } نکته 1: سعی کنید کامپوننت‌های کمتری را به app.module.ts اضافه کنید.
نکته 2: stylesheetها را در ماژول‌هایی که به آنها نیاز دارند import کنید.
تا به اینجای کار، ماژول اصلی پروژه را سبک کردیم. حال می‌خواهیم صفحه‌ی اول پروژه را به module ای به نام home، در مسیر app\projects\home مسیردهی کنیم.
home.module.ts :
// home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {AngularMaterialFeatureModule , KendoFeatureModule} from '../../modules/index';
import {HomeRoutingModule } from './home.routing';
import { HomeComponent } from './home.component';
import { IndexComponent } from './pages/index/index.component';
import {LoginComponent } from './pages/login/login.component';
@NgModule({
declarations: [
HomeComponent,
IndexComponent,
LoginComponent
],
imports: [
CommonModule,
HomeRoutingModule,
AngularMaterialFeatureModule
],
providers:[
],
entryComponents:[
LoginComponent
]
})
export class HomeModule { } home.routing.ts :
// home.routing.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { IndexComponent } from './pages/index/index.component';
const routes: Routes = [
{
path: "",
component: HomeComponent,
children: [
{
path: "",
component: IndexComponent,
data: {
breadcrumb: " Index "
}
},
{
path: "about",
loadChildren: "./pages/aboutus/aboutus.module#AboutusModule"
},
{
path: "blog",
loadChildren: "./pages/blog/blog.module#BlogModule"
},
{
path: "blog-detail",
loadChildren: "./pages/blogdetail/blogdetail.module#BlogdetailModule"
},
{
path: "pricing",
loadChildren: "./pages/pricing/pricing.module#PricingModule"
},
{
path: "contact",
loadChildren: "./pages/contact/contact.module#ContactModule"
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class HomeRoutingModule {
} و فایل home.component.ts :
// home.component.ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { LoginComponent } from './pages/login/login.component';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class HomeComponent implements OnInit {
constructor(
private dialog: MatDialog) { }
ngOnInit() {
}
public toggleModal(){
let dialogRef = this.dialog.open(LoginComponent, {
});
}
} و فایل home.component.scss :
// home.component.scss
@import '../../../assets/home/css/themify-icons.css';
@import '../../../assets/home/css/font-awesome.min.css';
@import '../../../assets/home/css/set1.css';
@import '../../../assets/home/css/bootstrap.min.css';
@import '../../../assets/home/css/style.css';
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
و فایل home.component.html :
// home.component.html
<!--============================= HEADER =============================-->
<div>
<div>
<div>
<div>
<div>
<nav>
<a href="index.html"><img src="../../../assets/home/images/logo.png" alt="logo"></a>
<button type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div id="navbarNavDropdown">
<ul>
<li>
<a target="_blank" [routerLink]="['/dashboard']">Dashboard</a>
</li>
<li>
<a [routerLink]="['/about']">About</a>
</li>
<li>
<a [routerLink]="['/contact']">Contact</a>
</li>
<li>
<a [routerLink]="['/pricing']">Pricing</a>
</li>
<li>
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Blog
<span></span>
</a>
<div>
<a [routerLink]="['/blog']">Blog Listing</a>
<a [routerLink]="['/blog-detail']">Blog Detail</a>
</div>
</li>
<li>
<a (click)='toggleModal()' style="cursor: pointer;">Login</a>
</li>
<li><a href="add-listing.html"><span></span> Add
Listing</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<!--//END HEADER -->
<router-outlet></router-outlet>
<!--============================= FOOTER =============================-->
<footer>
<div>
<div>
<div>
<div>
<i aria-hidden="true"></i>
<p>503 Sylvan Ave, Mountain View<br> CA 94041, United States</p>
</div>
</div>
<div>
<div>
<img src="../../../assets/home/images/footer-logo.png" alt="#">
</div>
</div>
<div>
<ul>
<li><a href="#"><i aria-hidden="true"></i></a></li>
<li><a href="#"><i aria-hidden="true"></i></a></li>
<li><a href="#"><i aria-hidden="true"></i></a></li>
<li><a href="#"><i aria-hidden="true"></i></a></li>
<li><a href="#"><i aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<div>
<div>
<div>
<p>Copyright © 2017 Listed Inc. All rights reserved</p>
<a href="#">Privacy</a>
<a href="#">Terms</a>
</div>
</div>
</div>
</div>
</footer>
<!--//END FOOTER --> پروژه را با دستور ng serve --open --prod اجرا کرده و خروجی را بررسی میکنیم. حجم
خروجی صفحه اول را همراه با قالبی از پیش طراحی شده در تصویر زیر می‌بینیم:
