Содержание статьи
Если вы думаете создать статический сайт с помощью React и хотите, чтобы он работал так же быстро, как гепард, вам следует рассмотреть возможность использования GatsbyJS.
Я решил попробовать его и был поражен тем, как легко было его настроить, развернуть и как быстро сейчас загружается сайт. Gatsby использует лучшие части других инструментов интерфейса, чтобы создать ощущение, что вы находитесь в отпуске.
Проблемы с производительностью оригинального веб-сайта
Я хотел оптимизировать изображение на сайте своего портфолио, который был одним из моих первых проектов FreeCodeCamp Frontend Development.
Ой! Оценку оптимизации Google 33/100 было больно видеть. Да, мне нужна была помощь от богов оптимизации. Мой веб-сайт содержал не менее 17 скриншотов проекта. Я не хотел сжимать каждое изображение, генерировать несколько размеров и разрешения каждого изображения и лениво загружать их.
Когда я впервые создал этот веб-сайт, Bootstrap 3 img-responsive class позаботился о масштабировании изображений, чтобы они соответствовали разным размерам экрана, но я не думал о том, что он все еще загружал некоторые мои снимки экрана размером около 1400 x 860 пикселей на мобильных устройствах!
Мой результат также был низким, поскольку я не минимизировал свой CSS или не настроил кэширование браузера для него, а также не асинхронно загружал внешние ресурсы CSS.
Гетсби во спасение
Я действительно хотел перестроить этот проект с помощью React. Я мог бы использовать приложение create-react-app, которое предоставляет готовый сценарий сборки и сервер разработки, но это все равно не позаботилось о долгой задаче обрезать изображения разных размеров для всех моих изображений.
К счастью, я слушал эпизод Syntax «Почему генераторы статических сайтов отличные», и они говорили о нескольких генераторах статических сайтов из списка StaticGen.com. Если вы не слышали, что производят генераторы статических сайтов, они превращают ваш сайт в каталог с одним HTML-файлом и статическими активами. Не требуется код базы данных или сервера.
Гетсби покорил меня благодаря сходству с программой create-react-app, которая включает горячую перезагрузку, легкую настройку среды разработчика и сценарий сборки. Gatsby идет дальше, предлагая рендеринг на стороне сервера, разумную загрузку изображений и преданность производительности.
Поскольку Gatsby построен на стеке React, GraphQL и Webpack, мы можем записать наше содержимое как компоненты React! Победа! Gatsby заботится о воспроизведении при составлении в DOM как статический HTML, CSS и JavaScript.
Компонент изображения Гетсби – BAE
А теперь прежде чем я действительно хотел с вами поделиться. Гетсби-образ! Gatsby-image — это компонент React, разработанный для работы с запросами Gatsby GraphQL, чтобы полностью оптимизировать загрузку изображений для сайтов.
Подход заключается в использовании запросов GraphQL, чтобы получить изображение оптимального размера, а затем отобразить их с помощью компонента gatsby-image.
Как я использовал этот компонент для автоматического создания 3 миниатюр для каждого из 17 изображений проекта? Магия! Не очень, но такое чувство!
В своем файле src/pages/index.js я спросил все изображения проекта и дал ему псевдоним ProjectImgs. Поскольку запрашиваемые данные теперь доступны через объект данных в качестве сопротивления, я смог передать projectImgData data (который является списком узлов с изображениями моего проекта) к my <Projects /> компонент:
//imports
const HomePage = ({ data }) => {
const siteTitle = data.site.siteMetadata.title;
console.log(data.ProjectImgs);
const { edges: projectImgData } = data.ProjectImgs;
const { edges: iconImgData } = data.iconImgs;
return (
<div>
<Helmet
title={siteTitle}
link={[{ rel: "icon", type: "image/png", href: `${favicon}`}]}
/>
<Cover coverImg={data.coverImg} />
<div className="container-fluid main">
<Navigation />
<AboutMe profileImg={data.profileImg} iconImgs={iconImgData}
/>
<Projects projectImgs={projectImgData} />
<Contacts />
<Footer />
</div>
</div>
);
};
export const query = graphql`
query allImgsQuery {
//additional queries
...
ProjectImgs: allFile(
sort: { order: ASC, fields: [absolutePath] }
filter: { relativePath: { regex: "/projects/.*.png/" } }
) {
edges {
node {
relativePath
name
childImageSharp {
sizes(maxWidth: 320) {
...GatsbyImageSharpSizes
}
}
}
}
}
//additional queries
...
}
`;Примечание. У меня возникли проблемы с тем, чтобы мои запросы graphQL работали, и мне пришлось немного порыться, чтобы понять, как спрашивать несколько изображений в папке. Мне помог просмотр других сайтов портфолио, созданных с помощью Гэтсби.
Используя консоль, мы можем увидеть, что data.ProjectImgs возвращается, чтобы дать вам лучшее представление о том, что я получаю по запросу и что я передаю своему компоненту Projects:
Console.log(data.ProjectImgs) возвращает массив ребер:
{edges: Array(17)}
edges
:
(17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
__proto__
:
Object{edges: Array(17)}Расширение одного из ребер показывает объект узла, содержащий a childImageSharp собственность. Он содержит объект sizes, содержащий источники эскизов изображения. Этот объект размеров – это то, что мы в конечном счете хотим передать нашим изображениям Гэтсби. <Img /> компонент.
Расширение края для отображения информации в узле:
{edges: Array(17)}
edges: Array(17)
0:
node:
childImageSharp: {sizes: {…}}
name: "CamperLeaderboard"
relativePath:"projects/CamperLeaderboard.png"
__proto__:Object
__proto__:Object
1:{node: {…}}
//more nodes
...В моем <Projects /> компонент, я получаю список узлов с изображениями проекта как опорный элемент и для каждого проекта я извлекаю файл childImageSharp.sizes объект (переименован в Размеры изображений), и передайте его в изображение Gatsby <Img /> компонент:
import React, { Component } from "react";
import Img from "gatsby-image";
//more imports
...
class Projects extends Component {
constructor(props) {
super(props);
this.state = {
selectedType: "front-end"
};
this.onSelectChange = this.onSelectChange.bind(this);
}
onSelectChange(e) {
this.setState({ selectedType: e.target.value });
}
render() {
const projectImgs = this.props.projectImgs;
const { selectedType } = this.state;
return (
<section id="projects" className="section projects">
<h2 className="text-center">PROJECTS</h2>
<div className="section-content">
<div className="subheader">
<FormGroup controlId="formControlsSelect">
...
</FormGroup>
</div>
<div className="project-list">
{projectList.map(project => {
const isSelectedType = selectedType === project.type;
const singleCardClass = classNames("single-card", {
hide: !isSelectedType
});
const image = projectImgs.find(n => {
return n.node.relativePath ===
`projects/${project.img}`;
});
const imageSizes = image.node.childImageSharp.sizes;
return (
<a
href={project.url}
key={project.url}
className={singleCardClass}
target="_blank"
>
<div className="card-img">
<Img
title={project.name}
alt="Screenshot of Project"
sizes={imageSizes}
className="card-img_src center-block"
/>
</div>
<div className="blue-divider" />
<div className="card-info">
<h4 className="card-name">{project.name}</h4>
<p>{project.description}</p>
</div>
</a>
);
})}
</div>
</div>
</section>
);
}
}
export default Projects;И вот конечный результат:
Это! The <Img /> компонент заботится об использовании правильного размера изображения, создании эффектов размытия и ленивой загрузке изображений моих проектов, поскольку они расположены ниже на экране. Приведенный выше запрос был несколько сложнее запроса отдельного изображения.
Если вы новичок в GraphQL, ниже представлено несколько ресурсов, которые лучше объясняют, как использовать запросы GraphQL и компонент gatsby-image:
Хостинг для Netlify был легок
Поскольку Gatsby генерирует статические файлы, вы можете использовать любой хостинг-провайдер. Я решил сменить своего хостинг-провайдера с Github Pages на Netlify. Я слышал о том, как легко развернуть веб-сайт на Netlify, и они не лгали. Их бесплатный уровень предоставляет отличные функции, облегчающие процесс развертывания и обеспечения безопасности веб-сайта. Он обеспечивает HTTPS одним щелчком, глобальную CDN, непрерывное развертывание, и список можно продолжать.
Процесс настройки был настолько прост. Я вошел в Netlify, нажал кнопку «Новый сайт Git» на своей информационной панели и выбрал репозиторий Git для этого проекта. Я настроил сайт для развертывания из главного и нажал «Развернуть сайт». Это было! Netlify заботится о процессе сборки и публикует его в Интернете.
Как я уже упоминал, Netlify предлагает непрерывное развертывание, поэтому теперь, когда я вношу изменения в свою главную ветку GitHub, это автоматически запускает новую сборку на Netlify. После завершения сборки мои изменения будут опубликованы в Интернете.
Будущее выглядит ярким
Перестроив свой веб-сайт вместе с Gatsby, я не только узнал различные методы оптимизации изображений для будущих проектов, но и немного узнал GraphQL, попрактиковал свои навыки React и воспользовался возможностью испытать нового хостинг-провайдера.
Я очень взволнован будущим Gatsby и подобными инструментами интерфейса, устраняющими сложности настройки сред и инструментов создания. Вместо этого мы можем сосредоточить свою энергию и время на нашем коде, чтобы создать отличные вещи для наших пользователей.
Если вам понравилась статья, нажмите кнопку? ниже, чтобы другие люди увидели это здесь на Medium.
Давайте дружить в Twitter. Счастливого кодирования 🙂