Как сделать оптимизацию загрузки js и css

#php #gzip #минификация

gzip включен, слышал что если минифицировать css и js файлы и создать их в бинарные
файлики (.gz) то ускорится работа сервера. Вот у php есть  gzwrite функция ней можно
записывать такие данные, но каким образом сервер будет их считывать или как их правильно
использовать для ускорения работы сайта?
    

Ответы

Ответ 1

Один и тот же объём стилей/скриптов в одном запросе будет переадн быстрее, чем в
нескольких. Ну при разумном объёме (а если он неразумный, то тебе оптимизации не помогут).
Минификация позволит уменьшить объем пересылаемого кода за счёт, как минимум, исключения
ненужных пробелов. Для джаваскрипта также возможно изменение имён локальных переменных
и некоторые другие штуки с целью его дополнительного сжатия.
Сжатие (например, gzip) уменьшает имеющийся объем архивацией. Это ускоряет его передачу
по сети, но браузеру будет нужно время на распаковку. В идеале стоит оценить это время
и принять решение, нужно ли использовать сжатие.
Сжатие на лету использует ресурсы сервера. Лучше выполнить его один раз и пока файл
не меняется просто пересылать готовый сжатый вариант. По идее, используемый тобой сервер
должен уметь это делать сам, если включить сжатие в настройках.
Пункт 4 касается и минификации. Однако, минификация обычно выполняется в процессе
построения, а не указывается в настройках сервера.


Ответ 2

Есть библиотека Minify, её просто подключаете к своей странице и указываете какие
файлы сжимать.
Например:





И для более быстрой загрузки страницы лучше js подключать перед закрывающим тегом
body, так браузер быстрее загрузить страницу для пользователя, а потом начнет загрузку js.

Angular2 минимизация приложения. Оптимизация времени загрузки

#angular2 #минификация

Помогите, пожалуйста, разобраться с оптимизацией приложения. Есть приложения на 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 ]
})


В связи с этим есть вопросы. Поможет ли в данной ситуации ленивая загрузка модулей,
и если поможет то как разбить на отдельные модули данную структуру (не понятен сам
принцип)?
Возможно ли как то ещё оптимизировать приложение?
    

Ответы

Ответ 1

Проблему решил так. Сначала решил костылём, а потом создал новый проект с 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

Как сделать оптимизацию загрузки js и css

gzip включен, слышал что если минифицировать css и js файлы и создать их в бинарные файлики (.gz) то ускорится работа сервера. Вот у php есть gzwrite функция ней можно записывать такие данные, но каким образом сервер будет их считывать или как их правильно использовать для ускорения работы сайта?

Ответ

Один и тот же объём стилей/скриптов в одном запросе будет переадн быстрее, чем в нескольких. Ну при разумном объёме (а если он неразумный, то тебе оптимизации не помогут). Минификация позволит уменьшить объем пересылаемого кода за счёт, как минимум, исключения ненужных пробелов. Для джаваскрипта также возможно изменение имён локальных переменных и некоторые другие штуки с целью его дополнительного сжатия. Сжатие (например, gzip) уменьшает имеющийся объем архивацией. Это ускоряет его передачу по сети, но браузеру будет нужно время на распаковку. В идеале стоит оценить это время и принять решение, нужно ли использовать сжатие. Сжатие на лету использует ресурсы сервера. Лучше выполнить его один раз и пока файл не меняется просто пересылать готовый сжатый вариант. По идее, используемый тобой сервер должен уметь это делать сам, если включить сжатие в настройках. Пункт 4 касается и минификации. Однако, минификация обычно выполняется в процессе построения, а не указывается в настройках сервера.

Angular2 минимизация приложения. Оптимизация времени загрузки

Помогите, пожалуйста, разобраться с оптимизацией приложения. Есть приложения на 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