предисловие
В текущем интерфейсном поле одна страницаwebПриложение (SPA) уже имеет относительно высокую долю и относительно широко распространеноwebРамкаReact,Angular,VueОн почти доминировал на внешнем рынке.
Одностраничные приложения обеспечивают лучшее разделение внешнего и внутреннего интерфейса, а также хорошее и быстрое взаимодействие с пользователем, изменения содержимого не требуют перезагрузки всей страницы и т. д.SPAПриложения в верхней части страницы загружаются медленно, белый экран иSEOИ так проблема будет постепенно проявляться.
Источником проблемы являетсяSPAПриложение использует рендеринг на стороне клиента.DOMузел ожиданияJSФайл не будет сгенерирован, пока файл не будет загружен, поэтому возникают вышеуказанные проблемы.
Для решения вышеуказанных проблем в настоящее время существует два основных решения:
- Рендеринг на стороне сервера (
SSR) - предварительный рендеринг (
Prerender)
Рендеринг на стороне сервера против Prerender (SSR против Prerender)
Что такое рендеринг на стороне сервера (SSR)?
Когда сервер получает запрос, он отображает необходимые компоненты в строку HTML и возвращает его к клиенту (браузер в этом случае). После этого клиент заберет контроль рендеринга.
Преимущество:
- лучше один
SEO, так как сканеры поисковых систем могут напрямую просматривать полностью обработанные страницы. - Более быстрое время поступления контента (
time-to-content), особенно для медленных сетевых условий или медленных устройств.
проблема:
- Дополнительные требования, связанные с установкой и развертыванием сборки.
- Большая нагрузка на сервер.
В настоящее время существуют относительно зрелые среды приложений для рендеринга на стороне сервера, и ReactNext.js, Vue имеетNuxt.js(Документация очень подробная и сообщество очень богатое👍), все они созданыzeit.coВыпущенный командой, стоящей за ним, конечно, вы также можете сами собрать набор серверного рендеринга.
Что такое пререндеринг (пререндеринг)?
Без использованияwebДинамическая компиляция сервера в реальном времениHTML, вместо этого используйте предварительный рендеринг во время сборки (build time) просто генерирует статическую специфичную для маршрута HTMLдокумент.
Если в проекте используетсяwebpack,ты можешь использоватьprerender-spa-pluginЛегко добавить предварительный рендеринг, который будет реализован позже.
Тебе нужно? Какой правильный?
Используйте рендеринг на стороне сервера для своего приложения (SSR), первый вопрос, который вы должны задать, это действительно ли вам это нужно. В основном это зависит от времени поступления контента (time-to-content) важен для приложения. Если это не слишком важно, используйте в этом случае рендеринг на стороне сервера (SSR) будет большой проблемой.
Если предположим, что вам нужно лучшеSEOи время прибытия контента (time-to-content) Если вы используете рендеринг на стороне сервера (SSR) используется только для улучшения нескольких страниц, тогда вам может понадобиться предварительный рендеринг в это время, преимущество в том, что проще настроить предварительный рендеринг, вы можете получитьSSRПочти все преимущества решения, которые можно легко реализовать без изменения кода или добавления серверной части.
Добавьте Prerender в свой проект
использоватьprerender-spa-pluginМожно добавить предварительный рендеринг в существующий проект, мы можем использоватьVueПредварительная оптимизация экземпляров.
Сначала сVueОфициальный скаффолдинг 3.0 строит простойVueПроект, шаги не написаны, конкретную реализацию можно посмотретьофициальная документация.
1. Установкаprerender-spa-pluginполагаться
yarn add prerender-spa-plugin --dev
1.1 Яма
Поскольку этот компонент должен зависеть отPuppeteer, это официальный безголовый инструмент Chrome команды Google Chrome, этоNodeбиблиотека, предоставляющая высокоуровневый API для управленияБезголовая версия по протоколу DevToolsХром. Также можно настроить для использования полного (не безголового) Chrome.
с учетомPuppeteerнеобходимостьChromium, но даже если ваша позиция в Интернете достаточно научна, вы также столкнетесь с проблемой сбоя установки.Вы пробовали много решений и предоставили решение с более высоким уровнем успеха.
Создайте файл в корневом каталоге вашего проекта.npmrcконечно, вы также можете напрямую изменить свой локальный.npmrcконфигурация.
// .npmrc
puppeteer_download_host = https://npm.taobao.org/mirrors
Затем попробуйте установить снова.
2. Создатьvue.config.js
// vue.config.js
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: './',
configureWebpack: () => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new PrerenderSPAPlugin({
staticDir: resolve('dist'),
routes: ['/', '/about'], // 你需要预渲染的路由
renderer: new Renderer({
inject: {
_m: 'prerender'
},
// 渲染时显示浏览器窗口，调试时有用
headless: true,
// 等待触发目标时间后，开始预渲染
renderAfterDocumentEvent: 'render-event'
})
})
]
}
}
}
}
Более подробную настройку можно посмотретьprerender-spa-pluginофициальная документация, добавьте по мере необходимости.
3. Вызов пользовательских событий в жизненном цикле
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
mounted () {
// 触发renderAfterDocumentEvent
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
4. Запустите скрипт упаковки
yarn run build
Упаковано без предварительного рендерингаdistКаталог папок:
Упаковано после использования предварительного рендерингаdistКаталог папок:
можно увидеть еще одинaboutкаталог, в котором естьhtmlдокумент. Давайте посмотрим на корневой каталогhtmlфайл, домашняя страницаhtmlдокумент.
не использовать предварительный рендеринг для получения корневого каталогаhtml文件:
Используйте prerender для получения корневого каталогаhtml文件:
Различия между предварительным рендерингом и без предварительного рендеринга после развертывания
Я развертываю их обоих наgh-pagesВыше давайте посмотрим на разницу.
Запрошено без предварительного рендерингаDocument:
Запрошено с использованием пререндерингаDocument:
Это видно при использовании предварительного рендерингаHTMLФайл уже существуетDOMструктуру, чтобы поисковые роботы могли сканироватьDOMструктура,SEOЛучше оптимизировать.
записал дваGIFНажмите, чтобы обновить опыт, чтобы увидеть разницу, и заранее подключите его к инструменту отладки.Disable cache, каждое обновление не будет использовать кеш и повторно инициирует запрос к серверу. Без пререндеринга:
Используйте пререндеринг:
Видно, что белого экрана на первом экране после использования пререндеринга почти нет.
Вы можете щелкнуть ссылку ниже, чтобы испытать это на себе, демо-адрес:
недостаточный
- Предварительно обработанные только страницы снимков, не подходящие для часто меняющихся страниц
- Чем больше маршрутов вы настроите, тем дольше будет время сборки
Вот где я чувствую сожаление, когда использую его, и он не обязательно всеобъемлющий.
Суммировать
Лично понимаю, что принцип реализации плагина заключается в использованииPuppeteerФункция обхода страниц, моделирования маршрутов доступа браузера, а затем выставлениеJSСгенерированоDOMструктура сHTMLСохраните его как статический файл.
Это действительно постепенное решениеSPAЕсть некоторые потенциальные проблемы с приложением, и его относительно легко интегрировать в существующие проекты, но есть и сожаления.
Эта статья просто делает простойDemo, и вам необходимо изучить больше навыков использования.
Ссылаться на
напиши в конце
Если в тексте есть какие-либо вопросы или неточности, пожалуйста, укажите на них в комментариях, если эта статья может быть вам полезна, пожалуйста, дайте点赞👍 и关注.
Вы также можете нажать на другие мои статьи:
Это конец этой статьи, 886🚀🚀