Плагин Vue для предварительного рендеринга prerender-spa-plugin

Vue.js

задний план

Несколько дней назад я сделал гаджет для измерения скорости веб-страницы в ответ на спрос. После рассмотрения я сделал несколько выборов. Поскольку я использовал реакцию для перемещения кирпичей в компании, на этот раз я решил улучшить всесторонние возможности, свяжитесь и используйте vue для создания небольшого проекта, vue После сжатия с помощью gizp он составляет всего около 33 КБ, плюс axios, prerender-spa-plugin и бизнес-код, он после сжатия составляет менее 50 КБ, и пользовательский опыт относительно хорош.

Поскольку я не использовал Vue много раз, я искал различные материалы, но я чувствую, что процесс очень негладкий.Из моего опыта, средняя информация, предоставляемая Vue в Интернете, намного уступает информации, предоставляемой React, и я наступили на некоторые ямы, особенно prerender-spa Плагин -plugin столкнулся со многими проблемами, которые не упоминались в Интернете, поэтому я поделился своими достижениями и внес свой вклад в Vue.

Источник

Сначала я прочитал официальное руководство по vue, и оно очень ясное. Если изображение избавляет от проблем и это небольшой проект по отображению, лучше использовать предварительный рендеринг. Это может решить две основные болевые точки SEO и пользовательского опыта загрузки. , Это звучит великолепно и хорошо мне подходит. Теперь вам это нужно, так что начинайте!

добавить описание: предварительный рендеринг выполняется один раз заранее при компиляции, рендеринг на стороне сервера ssr заключается в том, что каждый раз, когда пользователь запрашивает сервер, сервер заполняет соответствующий контент (эти два существенно различаются, поясняется здесь!)

Установить

Установка этого плагина - первая ямка.Поскольку этот небольшой проект самостоятельный, то версию npm-пакета учитывать не нужно.Просто запускаем всю среду на последнем vuecli3.0,но если честно,скаффолдинг vuecli3 дает мне очень хороший опыт.Ой, исходная конфигурация веб-пакета была скрыта и заменена на vue.config.js, но в Интернете не так много информации, и настройка заняла больше времени При установке плагина prerender-spa-plugin я использовал nrm для переключения на cnpm, но он всегда застревает в том месте, где установлен puppeteer. Плагин prerender-spa-plugin должен зависеть от puppeteer. загрузите последнюю версию хрома, созданную ядром браузера Google Headless (около 200 миллионов+), поэтому, если вы не можете получить доступ к Интернету с научной точки зрения, вы получите сообщение об ошибке при загрузке. Пользовался lantern и долго ждал, чтобы скачать.Версия 72, поэтому очень важно часто переворачивать стену 😅

принцип

puppeteer — это подключаемый модуль, созданный Google, который может выполнять множество операций и широко используется в приложениях для автоматизации браузера, таких как поисковый робот и автоматизация тестирования. SPA запустился один раз, чтобы сгенерировать статический HTML с заполненными DOM-узлами и данными.Это было так просто и грубо.Чтобы напрямую вернуть пользователю xhtml-документ с содержимым, он заранее запускал его в браузере и генерировал работает через js и css index.html (с маршрутизацией) и другие документы. В этом случае есть два недостатка: первый — он не может отображать собственный контент пользователя, а второй — не подходит для масштабных проектов с множеством динамических маршрутов. Как только вы поймете принцип, вы сможете уверенно его использовать 🙂

настроить

Если вы начнете его использовать, то первый момент, на который следует обратить внимание, это установить введенный vue-router режим в историю (обычно я также рекомендую использовать режим истории, хеш имеет # некрасивый, просто настройте историю, чтобы вернуться к корневой каталог), но если это корневой путь и нет подчиненного маршрута, то он будет скомпилирован без введения vue-router. . .

В vuecli 3.0 все исходные конфигурации веб-пакетов помещаются вvue.config.jsв. Если у вас есть время, рекомендуется прочитать github с самого началаОфициальный доктор медицинысуществуетvue.config.jsсначала импортировать

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

затем модуль.экспорт

configureWebpack: {
        plugins: [
            new PrerenderSPAPlugin({
                staticDir: path.join(__dirname,'dist'),
                routes: ['/'],
                renderer: new Renderer({
                    inject: {
                        foo: 'bar'
                    },
                    headless: false,
                    renderAfterDocumentEvent: 'render-event',
                    //renderAfterTime: 5000,
                    //renderAfterElementExists: 'my-app-element'
                }),
            }),
            ..............
  • Излишне говорить, что dist в staticDir — это имя выходной папки.
  • Маршруты настраивают маршруты, которые вы хотите реализовать предварительный рендеринг.Здесь у меня есть только корневой маршрут, который нужно предварительно рендерить.Есть и другие маршруты, которые можно добавить в массив.
  • Предварительный рендеринг средства визуализации обеспечивает три реализации синхронизации: renderAfterDocumentEvent, renderAfterTime, renderAfterElementExists.

Обычно используются renderAfterDocumentEvent и renderAfterTime, смысл которых очень прост: один запускает предварительную отрисовку после события, а другой — запускает предварительную отрисовку через несколько секунд после загрузки. Если вы используетеrenderAfterDocumentEventДля реализации в жизненном цикле vue

mounted: function(){
            document.dispatchEvent(new Event('render-event'));
        },

После такой настройки каждый раз при упаковке сборки плагин будет автоматически вызывать ядро ​​хрома для заливки html в роут.Если вы хотите наблюдать разницу, то можете просмотреть ее через превью хрома Без предварительного рендеринга (похожие эффекты Baidu проделал большую обработку):

После предварительного рендеринга

Это сделано, уровень ограничен, написание недостаточно глубокое, спасибо за прочтение!

Категории