Gridsome — это платформа VueJS с открытым исходным кодом, используемая для создания статических сайтов. Основное внимание в Gridsome уделяется тому, чтобы конечный веб-сайт всегда был действительно быстрым. Используя Gridsome для веб-сайта, вы получите идеальные показатели скорости страницы, что очень важно для целей SEO и удобства пользователей в наши дни.
Grindsome делает сайты быстрыми, масштабируемыми, легко развертываемыми и индексируемыми поисковыми системами.
Есть несколько причин, по которым вам следует использовать Grindsome на своих веб-сайтах:
1. Gridsome является бессерверным и генерируется статически. Он создает веб-сайты, используя философию JAMstack. JAMstack — это не конкретная структура, язык или технология; вместо этого он обеспечивает лучшую производительность, повышенную безопасность и снижает затраты и сложность вашего стека разработки. Это достигается за счет создания статических файлов, для обслуживания которых не требуется сервер или бэкэнд; это просто развернутые HTML-файлы, и это то, что видят ваши пользователи: статические страницы со всем вашим содержимым, уже находящимся на них.
2. Gridsome легко установить. Он поставляется с инструментом командной строки, который помогает создавать проекты без особых усилий. Вам нужно только установить его глобально один раз, и тогда он будет работать для каждого проекта, который вы хотите создать в будущем.
установка npm — глобальная @gridsome/cli
3. Gridsome упрощает создание проектов. Вы можете создать проект Gridsome из любого места, используя следующую команду:
gridsome создать классный блог
4. У Gridsome отличная организованная структура проекта. Сгенерированные Gridsome папки похожи на обычный проект Vue, но имеют пару специальных файлов и удобную структуру папок. Давайте посмотрим на некоторые специальные файлы, которые есть у Gridsome:
- Файл gridsome.config.js содержит базовую конфигурацию веб-сайта.
- Файл gridsome.server.js содержит конфигурацию для использования данных из внешних источников.
- Default.vue: это файл, создаваемый Gridsome, который импортируется на каждую страницу, если вы не укажете собственный макет, такой как верхний и нижний колонтитулы, панель навигации и боковая панель.
5. Автоматическая маршрутизация:
- Страницы и маршруты. Страницы очень просты в использовании. Каждый компонент, который вы создаете в папках /src/pages, будет сопоставлен с новой страницей с помощью vue-router без каких-либо действий.
- Компоненты многократного использования. Если вы хотите создать компонент, который можно будет повторно использовать на разных страницах, вам следует создать файл Vue в /src/components и импортировать его из любого места. .
6. Разделение кода/предварительная выборка: обычно, когда вы создаете внутреннюю ссылку на другую страницу в Vue SPA, вы используете ‹router-link›. С Gridsome вместо этого вы используете ‹g-link›. Он использует те же параметры, с которыми вы знакомы, но, кроме того, предлагает очень мощную функцию: он предварительно выбирает страницы в фоновом режиме по ссылкам, которые находятся в текущем представлении. Это означает, что навигация по веб-сайту Gridsome очень быстрая, потому что любая ссылка, по которой вы щелкнули, уже была предварительно выбрана до того, как вы нажали на нее!
7. Автоматически сгенерированные превью сжатых изображений: Gridsome имеет специальный тег для изображений, который называется ‹g-image›. Он получает в качестве параметра относительный src изображения, которое вы собираетесь отображать. Пока это выглядит как обычный элемент ‹img›. Единственная разница в том, что ‹g-image› создаст сжатую, размытую версию исходного изображения, которое вы пытаетесь вставить, и когда браузер пользователя, наконец, получит изображение с сервера или CDN (это может быть файл большого размера), он заменяет сжатую версию реальным изображением.
Это дает потрясающие результаты для скорости страницы, поскольку сжатое изображение представляет собой строку в кодировке base64, ее можно сразу же поместить в DOM без необходимости извлечения внешних ресурсов, потому что, опять же, все генерируется статически.
8. У Gridsome есть плагины для всего: У Gridsome есть процветающая экосистема плагинов, которые помогут вам выполнять сложную интеграцию для многих вещей. Эти плагины в основном представляют собой библиотеки JS, которые вы устанавливаете с помощью npm, а затем настраиваете в соответствии с потребностями вашего проекта. Некоторые из плагинов:
- plugin-sitemap автоматически создает карту сайта для вашего сайта Gridsome.
- gridsome-plugin-rss генерирует rss-канал ваших страниц.
- plugin-google-analytics легко интегрирует Google Analytics на ваш сайт.
- source-wordpress использует серверную часть WordPress для подачи сообщений и страниц Gridsome.
В заключение, главная цель Gridsome заключается в том, что конечный веб-сайт всегда будет быстрым, очень быстрым. Это достигается за счет добавления эффективных функций, таких как разделение кода, оптимизация ресурсов, прогрессивные изображения и предварительная выборка ссылок по умолчанию. Это делает сайт быстрым, масштабируемым, легко развертываемым и индексируемым поисковыми системами, что является отличным вариантом для выбора.
