Помогите, пожалуйста, разобраться с оптимизацией приложения. Есть приложения на Angular2. Минимизацию делал по этой статье. Без webpack.
Командами
browserify -s main dist/main.js > dist/bundle.js
и
uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js
получилось минимизировать бандл, но он занимает 1.7 метра.
Структура app.module.ts проекта очень большая на мой взгляд.
@NgModule({
imports: [
BrowserModule,
CommonModule,
FormsModule,
Ng2PaginationModule,
HttpModule,
FormsModule,
DatePickerModule,
Ng2GoogleChartsModule,
routing,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyAqIBAiCeLH9A5I5lqEK3iK1j3gAmL3yIg',
libraries:['geometry', 'places']
})
],
declarations: [
MainComponent,
AuthComponent,
RecoveryComponent,
BaseComponent,
IndexComponent,
UsersComponent,
ActiveDriversComponent,
AdminsComponent,
ClientComponent,
DriversApplicationsComponent,
ActiveDriverComponent,
ActivationComponent,
OrdersCanceledComponent,
AllOrderForDriverComponent,
NewUserComponent,
DriverRateComponent,
DeterminationErrors,
HttpPopupErrors,
TranslatePipe,
CKEditorComponent,
OrdersComponent,
SelectLanguageComponent,
SelectRoleComponent,
SelectNoticeComponent,
CurrentOrdersComponent,
NotConfirmedComponent,
DeferredOrdersComponent,
CompletedOrdersComponent,
AbolishedOrdersComponent,
DriversOffersComponent,
EvaluationEditorComponent,
NewOrderComponent,
OrderInfoComponent,
PermissionDeniedComponent,
SelectBoxComponent,
NewsComponent,
CreateNewsComponent,
EditNewsComponent,
PublishedNewsComponent,
SelectFilterComponent,
ChangeStatusComponent,
PaymentsTemplatesComponent,
PaymentsComponent,
NewTemplateComponent,
NewTemplateComponent,
ChangePasswordComponent,
EditTemplateComponent,
SupportComponent,
TemplatesComponent,
DraftsComponent,
AppealsMessagesComponent,
NotificationsComponent,
NotificationComponent,
CountriesComponent,
AddCountryComponent,
AddCityComponent,
EditCountryComponent,
EditCityComponent,
CurrentBalanceComponent,
MarkerClusterDirective,
DriverMapDirective,
PersonalDirective,
AllInfoDirective,
StatisticDirective,
SearchDirective,
DateRangePickerDirective,
PersonalAutoDirective,
DocumentsDirective,
PaginationDirective,
HelpersDirective,
SimpleRateDirective,
FilterPipe,
PluralPipe
],
providers: [
Urls,
User,
SearchModel,
HttpService,
CurrencyService,
Md5,
DeterminationErrorService,
TRANSLATION_PROVIDERS,
TranslateService,
LocationService
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
bootstrap: [ MainComponent ]
})
В связи с этим есть вопросы. Поможет ли в данной ситуации ленивая загрузка модулей, и если поможет то как разбить на отдельные модули данную структуру (не понятен сам принцип)?
Возможно ли как то ещё оптимизировать приложение?
Ответ
Проблему решил так. Сначала решил костылём, а потом создал новый проект с angular-cli и добавил в него свои модули
Обходное решение (костыль)
Так как скомпилировать проект без angular-cli не получилось - пришлось сделать html костяк с лоудером и вставить в index.html.
index.html
.....
$(document).ready(function() {$('#auth_').show();)} // Показывает html блок с лоудер
В файле скрывал блок auth.component.ts
ngOnInit() { $('#auth_').hide(); }
Это решение быстрое и не требует большого количества времени.
Второй путь более сложный и трудоёмкий.
Создание приложения с помощью angular-cli
Устанавливаем локально angular-cli. Для этого выполнить в консоли.
npm install -g @angular/cli
Второй шаг перенос кода. Это самый сложный и рутинный этап, так как на проекте была версия 2.0.0, а версия с которой создаётся проект - 2.3. Поэтому пришлось переписывать импорты некоторых компонентов. Но в результате что бы релизнуть
Создаём билд AOT
ng build --prod --aot ng serve --prod --aot
Комментариев нет:
Отправить комментарий