ReactJs и AngularJs слишком много времени по сравнению с WordPress по умолчанию

Question

Я разработчик WordPress, я планирую использовать angular или reactjs с темой WordPress. Я проследил пару статей и после реализации проверил производительность на веб-сервере и заметил, что WordPress по умолчанию намного быстрее по сравнению с angularjs или reactjs. Я не могу избавиться от ощущения, что что-то не так с моим кодом. Будет очень полезно, если кто-нибудь сможет направить меня в правильном направлении. Я публикую код, который я использовал до сих пор.

ReactJs

 componentDidMount(){
    return fetch('http://www.websitename.com/wp-json/wp/v2/posts/?per_page=100')
.then((response) => response.json())
.then((responsejson) => {
    this.setState({data: responsejson});
})
.catch((error)=>{
    console.error(error);
});
}
 render() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 ClassName="App-title">
        <div class="row" id="overview"></div>
        <div class="row" >
        {this.state.data.map((item, i) => ( 


        <div class="col-md-4" key={i}>
    <div class="thumbnail">
<a href="{item.slug}"><h3 class="ng-binding"> {item.title.rendered}</h3></a>
      <a href={item.slug}>
<img src={item.featured_image} />

      </a>
      <div class="caption">
{item.excerpt.rendered}
        </div>
    </div>
  </div>


        ) )}

</div>
        React Testing
        </h1>
      </header>
    </div>
  );
}

AngularJs

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http({
    method : "GET",
    url : "http://www.websitename.com/wp-json/wp/v2/posts?per_page=100"
  }).then(function mySuccess(response) {
      $scope.myWelcome = response.data;
    }, function myError(response) {
      $scope.myWelcome = response.statusText;
  });
});
</script>

для загрузки 100 сообщений в стр. AngularJs заняло около 40 секунд, reactJs заняло более 1,5 минут, а WordPress по умолчанию wp_query заняло 15 секунд.

Answer 1

Легкое приложение React или Angular, скорее всего, не займет 40 секунд или 1,5 минуты для загрузки или рендеринга. Я подозреваю, что вы видите, что сетевые запросы для этих ресурсов занимают столько времени.

На вкладке Сеть вашего инспектора посмотрите на AJAX запросов, которые вы делаете для этих сообщений (необработанный JSON значение). Это должно дать вам общее время, потраченное на загрузку, и это, вероятно, где вы видите свою задержку.

Вот в чем дело. Вы не можете иметь Angular, React или любую другую интерфейсную библиотеку для доступа к сообщениям WordPress без некоторого внутреннего кода, извлекающего его. В случае API WordPress (который показывает ваш URL-адрес, который вы используете) - этот код бэкэнда ... ждите его ... WordPress!

Другими словами, когда вы получаете доступ к API, WordPress сам грузит. Он спроектирован так, чтобы быть уменьшенным WordPress, но он все еще проходит цикл загрузки и затем выполняет тот же запрос к базе данных, что и во внешнем интерфейсе сайта.

Так что, если, например, у вас есть плагин на вашем сайте, который загружается и занимает 30 секунд до завершения sh, это замедлит вас. Это могут быть буквально сотни вещей, и мы не можем увидеть всю вашу установку WordPress для ее отладки.

Вы указали загрузить 100 сообщений в своем запросе, что немного тяжело. Вы уверены, что сравниваете яблоки с яблоками? В WordPress загружаете ли вы 100 постов и их полное содержимое, как это делает конечная точка /posts в API?

Я хотел бы предложить выполнить установку WordPress sh и посмотреть, сколько сейчас времени. , Если они быстрые, медленно начинайте добавлять код (т. Е. Тему, плагины, посты и т. Д.), Который у вас есть на вашем реальном сайте, и обращайте внимание на то, когда он замедляется.

Ради Для справки, я использую свой внешний сайт WordPress с Vue (похожая структура) и WordPress API, и мои посты загружаются намного быстрее, чем за секунду. Так что это можно сделать, вам просто нужно выяснить свое узкое место.