‫چگونه پروژه‌های Angular ی سبکی داشته باشیم – قسمت اول

یکی از عیب‌هایی که برنامه نویسان front-end و گاها بعضی از مدیران از Angular می‌گیرند، حجم زیاد صفحاتی است که با Angular کار می‌شود. در نتیجه‌ی جستجوی مشکل ذکر شده، با تعدادی پاسخ مشابه ^ و ^ روبرو می‌شویم که هیچ کدام روش صحیحی را برای رفع مشکل ذکر شده عنوان نکرده‌اند. در ادامه پروژه‌ی Angular ای را شروع می‌کنیم و حجم صفحات خروجی را مورد بررسی قرار می‌دهیم. سپس نحوه‌ی بهینه سازی و کم کردن حجم صفحات خروجی را بررسی می‌کنیم.

برای شروع، CMD را در مسیر دلخواهی برای ساخت پروژه باز کرده و ابتدا Angular CLI را توسط دستور زیر به آخرین نسخه‌ی موجود به‌روز رسانی می‌کنیم:

npm install -g @angular/cli

و سپس پروژه‌ی انگیولاری را با دستور زیر می‌سازیم:

ng new HowToKeepAngularSizeSmall

پاسخ سوال ? Would you like to add Angular routing? (y/N) را y و scss را به عنوان فرمت stylesheet انتخاب می‌کنیم.

در ادامه پروژه را با استفاده از دستور زیر

ng serve --open --prod

اجرا می‌کنیم . سپس با استفاده از ابزار DevTools console از تب network، حجم فایل‌های لود شده را بررسی می‌کنیم:

حجم خروجی پروژه بعد از ساخت ۲۲۲KB است.

حال برای آنکه پروژه‌ی جاری را به پروژه‌های واقعی نزدیک‌تر کنیم، بسته‌های npm زیر را به فایل package.json اضافه کرده و با دستور npm i بسته‌ها را نصب می‌کنیم.

"@agm/core": "^1.0.0-beta.5", "@angular/flex-layout": "^7.0.0-beta.23", "@angular/material": "^7.3.3", "@angular/platform-browser": "~7.2.0", "@asymmetrik/ngx-leaflet": "^5.0.1", "@ngx-loading-bar/router": "1.3.1", "@ngx-translate/core": "^11.0.1", "@ngx-translate/http-loader": "^4.0.0", "@progress/kendo-angular-buttons": "^4.3.3", "@progress/kendo-angular-dateinputs": "^3.6.0", "@progress/kendo-angular-dialog": "^3.10.1", "@progress/kendo-angular-dropdowns": "^3.5.1", "@progress/kendo-angular-excel-export": "^2.3.0", "@progress/kendo-angular-grid": "^3.13.0", "@progress/kendo-angular-inputs": "^4.2.0", "@progress/kendo-angular-intl": "^1.7.0", "@progress/kendo-angular-l10n": "^1.3.0", "@progress/kendo-angular-layout": "^3.2.0", "@progress/kendo-data-query": "^1.5.0", "@progress/kendo-drawing": "^1.5.8", "@progress/kendo-theme-default": "^3.3.1", "@swimlane/ngx-datatable": "^14.0.0", "angular-calendar": "0.23.7", "angular-tree-component": "7.0.1", "bootstrap": "^3.4.0", "chart.js": "2.7.2", "d3": "4.13.0", "dragula": "3.7.2", "hammerjs": "2.0.8", "intl": "1.2.5", "leaflet": "1.3.1", "moment": "2.21.0", "ng2-charts": "1.6.0", "ng2-dragula": "1.5.0", "ng2-file-upload": "1.3.0", "ng2-validation": "4.2.0", "ngx-perfect-scrollbar": "5.3.5", "ngx-quill": "2.2.0", "screenfull": "3.3.2", "font-awesome": "^4.7.0", "jalali-moment": "^3.3.1", "jquery": "^3.3.1", "ng-snotify": "^4.3.1", "normalize.css": "^8.0.1",

و خطوط زیر را به styles.scss اضافه می‌کنیم:

@import "~bootstrap/dist/css/bootstrap.css"; @import "[email protected]/kendo-theme-default/scss/all"; @import '@angular/material/prebuilt-themes/pink-bluegrey.css'; @import '~perfect-scrollbar/css/perfect-scrollbar.css'; @import "~ng-snotify/styles/material";

و قسمت scripts زیر را به فایل angular.json اضافه می‌کنیم:

"scripts": [ "node_modules/jquery/dist/jquery.js", "node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/hammerjs/hammer.min.js" ],

و فایل app.module.ts را نیز به صورت زیر تغییر می‌دهیم:

import from '@angular/platform-browser'; import from '@angular/core'; // Import Material 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, MatSidenavModule, MatSlideToggleModule, MatMenuModule } from '@angular/material'; // Import kendo angular ui import from '@progress/kendo-angular-buttons'; import from '@progress/kendo-angular-grid'; import from '@progress/kendo-angular-dropdowns'; import from '@progress/kendo-angular-inputs'; import from '@progress/kendo-angular-dateinputs'; import from '@progress/kendo-angular-dialog'; import from '@progress/kendo-angular-l10n'; import from '@progress/kendo-angular-layout'; import from '@progress/kendo-angular-dialog'; import from 'ng-snotify'; import from './app-routing.module'; import from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, // material MatSidenavModule, MatSlideToggleModule, MatInputModule, MatFormFieldModule, MatButtonModule, MatButtonToggleModule, MatDialogModule, MatIconModule, MatSelectModule, MatToolbarModule, MatDatepickerModule, MatCheckboxModule, MatRadioModule, MatCardModule, MatMenuModule, MatListModule, MatProgressBarModule, MatTabsModule, // kendo-angular ButtonsModule, GridModule, ExcelModule, DropDownsModule, InputsModule, DateInputsModule, DialogsModule, LayoutModule, SnotifyModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule

بدون اینکه component جدیدی را به پروژه‌ی جاری اضافه کنیم، پروژه را با دستور ng serve –open –prod اجرا کرده و خروجی را بررسی می‌کنیم:

همانطور که می‌بینید بدون افزودن کامپوننت جدیدی، حجم خروجی از ۲۲۲KB به ۵۸۲KB رسیده‌است. معمولا در هر پروژه نیاز به تعدادی دایرکتیو و سرویس پایه نیز می‌باشد که کم کم به حجم خروجی صفحات می‌افزاید. در نظر بگیرید که هنوز هیچ قالب خاصی برای صفحه مورد نظرمان استفاده نشده و به حجم ۵۸۲KB رسیده‌ایم. برای نمونه می‌توانیم سری به سایت madewithangular.com بزنیم و حجم خروجی تعدادی از سایت‌های نوشته شده‌ی با انگیولار را بررسی کنیم. سایت‌های زیر خروجی بالای ۱٫۵MB دارند:

https://kilid.com

https://jochefina.com

https://eltocadordecarlota.com

همچنین سایتی را که خودم تقریبا یک سال پیش شروع کرده بودم، حجم خروجی آن ۲٫۷MB است:

دلیل بالا رفتن حجم خروجی، اضافه شدن فایل‌های JavaScript و style-sheet به bundle اصلی پروژه است. برای مثال حجم فایل main.js را در نمونه‌های ذکر شده بررسی کنید.

در قسمت‌های بعدی، به نحوه‌ی کار صحیح با انگیولار می‌پردازیم و حجم صفحات را بررسی می‌کنیم.

dotnettips

شاید دیگر مطالب
روژانرا هم دوست داشته باشید