from the Core

 

Почему начать с Nuxt быстрее чем vue-ssr?

Nuxt - готовое решение из коробки, включающее в себя vue-ssr

 

vue-ssr - низкоуровневая библиотека для ssr рендеринга

В Nuxt интегрированы  наиболее используемые vue библиотеки

 

  • vue-meta (опционально, для мета тегов и SEO)
  • vue-router
  • vuex ( опционально)

Библиотеки для сборки

  • Babel (вместе с собственном конфигом nuxt)
  • Настроенный и оптимизированный конфиг webpack
  • PostCSS уже включен и настроен

ОПРЕДЕЛЕННАЯ СТРУКТУРА ПРОЕКТА

  • Одна и таже структура для всех проектов
  • Место для практически каждого файла

Улучшенная функциональность компонентов

 

  • asyncData / fetch для страниц
  • анимации для перехода между страницами
  • Layouts

Модули

Для Nuxt имеется множество готовых модулей:

  • @nuxt/http
  • @nuxt/pwa
  • @nuxt/auth
  • и другие
  • @nuxtjs/apollo

Поддержка Typescript

  • @nuxt/typescript-build - поддержка typescript для layouts, components, plugins и middlewares

  • @nuxt/typescript-runtime - поддержка typescript для nuxt.config, локальных модулей и server-middleware

  • @nuxt/types - типы для всех классов nuxt

router.js

 

Роутинг на основе файловой системы

 

Роутинг на основе файловой системы

 

import user from '....'
import cart from '....'
import favorites from '....'
import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    namespaced: true,
    state: () => ({
      query: ''
    }),
    mutations: {
      updateQuery(state, query) {
        state.query = query;
      }
    },
    modules: {
      user,
      cart,
      favorites,
    },
    actions: {
      async newSearch({dispatch, commit}, data) {
        //...
      },

      async populateQuery({dispatch, commit}, query) {
        //...
      }
    },
    getters: {
      getQuery: state => state.query,
      getLoading: state => state.isLoading
    },
  })
};

VUEX

 

классический vuex store

	
export const state = () => ({/**/})
 
export const mutations = {/**/}
 
export const actions = {/**/}
 
export const getters = {/**/}

Теперь NUXT way с использованием файловой системы

 

один модуль на файл

 


export default {
  setName(state, name){
    state.name = name
  },
  // и другие мутации
}

Модуль как директория

Developer Experience

Улучшенные логи с consola

Логи с SSR в консоли браузера

Прогресс бар при hot reload проекта

Экран загрузки при билде проекта

Оптимизация SSR

 

render: {
    compressor: false
}
  • отключение компрессии на уровне nuxt
  • использование кеширующего сервера, например nginx

 

  • extractCss в случае большого css бандла

Экспериментальное отключение функционала

 

 features: {
    router: true,
    store: true,
    layouts: true,
    meta: true,
    middleware: true,
    transitions: true,
    deprecations: true,
    validate: true,
    asyncData: true,
    fetch: true,
    clientOnline: true,
    clientPrefetch: true,
    clientUseUrl: false,
    componentAliases: true,
    componentClientOnly: true
  }

Отключение неиспользуемых функций

 

Все включено

 

Минимально необходимый набор

 

Экспериментальное отключение функционала

 

autocannon -d 60 http://localhost:3000
Running 60s test @ http://localhost:3000
10 connections

Stat    2.5% 50%  97.5% 99%   Avg     Stdev   Max
Latency 4 ms 4 ms 8 ms  10 ms 4.67 ms 1.42 ms 19.37 ms

Stat      1%      2.5%    50%     97.5%   Avg     Stdev  Min
Req/Sec   1655    1764    1951    2038    1931.57 78.95  1655
Bytes/Sec 5.88 MB 6.27 MB 6.93 MB 7.24 MB 6.86 MB 280 kB 5.88 MB

Req/Bytes counts sampled once per second.

116k requests in 60.08s, 412 MB read
autocannon -d 60 http://localhost:3000
Running 60s test @ http://localhost:3000
10 connections

Stat    2.5% 50%  97.5% 99%   Avg      Stdev   Max
Latency 8 ms 9 ms 16 ms 18 ms 10.12 ms 2.25 ms 30.38 ms

Stat      1%      2.5%    50%     97.5%   Avg     Stdev  Min
Req/Sec   784     805     951     1046    942.29  57.03  784
Bytes/Sec 3.68 MB 3.78 MB 4.47 MB 4.91 MB 4.42 MB 268 kB 3.68 MB

Req/Bytes counts sampled once per second.

57k requests in 60.09s, 265 MB read

Все включено

 

Минимально необходимый набор

 

2X разница в производительности

 

Оптимизация кода

  • асинхронные компоненты
<template>
 <div>
   <SyncComponent />
   <AsyncComponent />
 </div>
</template>
<script>
import AsyncComponent from '~/components/AsyncComponent.vue'
import SyncComponent from '~/components/SyncComponent.vue'

export default {
  components: {
    SyncComponent,
    AsyncComponent: () => import('~/components/AsyncComponent.vue')
  }
}
</script>
  • ClientOnly тег для тяжелых комопнентов

Vue-lazy-hydration

<!-- по списку событий-->
<LazyHydrate on-interaction="['fullscreen', 'mousedown']">
...
</LazyHydrate>


<!-- По видимости -->
<LazyHydrate when-visible>
...
</LazyHydrate>

<!-- когда процессор не занят -->
<LazyHydrate when-idle>
....     
</LazyHydrate>

<!-- только на сервере -->
<LazyHydrate ssr-only>
  ...
</LazyHydrate>

<!-- контролируемая гидрация -->
<LazyHydrate ssr-only :trigger-hydration="isItReady">
 <ArticleContent :content="article.content"/>
</LazyHydrate>

    
<script>
import LazyHydrate from 'vue-lazy-hydration';

export default {
  components: {
    LazyHydrate,
    // The `ArticleContent` будет импортирован только если isItReady true
    ArticleContent: () => import('./ArticleContent.vue'),
  },
  // ...
};
</script>

yarn add vue-lazy-hydration
<template>
  <div class="ArticlePage">
    <ImageSlider/>
    <ArticleContent :content="article.content"/>
    <AdSlider/>
    <CommentForm :article-id="article.id"/>
  </div>
</template>

<script>
import {
  hydrateOnInteraction,
  hydrateSsrOnly,
  hydrateWhenIdle,
  hydrateWhenVisible,
} from 'vue-lazy-hydration';

export default {
  components: {
    AdSlider: hydrateWhenVisible(
      () => import('./AdSlider.vue'),
      // Optional.
      { observerOptions: { rootMargin: '100px' } },
    ),
    ArticleContent: hydrateSsrOnly(
      () => import('./ArticleContent.vue'),
      { ignoredProps: ['content'] },
    ),
    CommentForm: hydrateOnInteraction(
      () => import('./CommentForm.vue'),
      // `focus` is the default event.
      { event: 'focus', ignoredProps: ['articleId'] },
    ),
    ImageSlider: hydrateWhenIdle(() => import('./ImageSlider.vue')),
  },
  // ...
};
</script>

Врапперы импортов

Vue-lazy-hydration

После

 

До

 

Vue-lazy-hydration

Анализирование бандла

nuxt build --analyze

Что нового готовит NUXT 3

  • Новое cli для создание проекта nuxt create 
  • Новый метод fetch, asyncData deprecated
  • Режимы билда nuxt для разных платформ

server

static

serverless

  • Автоматический импорт плагинов, компонентов, миддлваре
  • Полностью статический режим
  • Webpack 5

nuxt/blueprints

 

  • микро фреймворки на основе модулей nuxt
  • создано на основе NuxtPress
  • микро фреймворки на основе модулей nuxt
  • множественные инстансы одного blueprint
  • поддержка вебпак алиасов в  темплейтах
  • автоматическое определение и добавление шаблонов .tmpl
  • копирование темплейтов из каждого инстанса blueprint

nuxt/blueprints

 

import ExampleBlueprint from './blueprint'

export default {
  modules: [
    function exampleBlueprint () {
      const options1 = {
        id: '1',
        backgroundColor: 'gold'
      }

      const options2 = {
        id: '2',
        backgroundColor: 'silver'
      }

      new ExampleBlueprint(this.nuxt, options1).init()
      new ExampleBlueprint(this.nuxt, options2).init()
    }
  ]
}

Использование blueprint

blueprint/css/style.tmpl.css 

div {
  background-color: <%= options.backgroundColor %>;
  padding: 1rem;
  margin: 1rem auto;
}

blueprint/components/hello.tmpl.vue 

<template>
  <div>
    <h2>Hello from ExampleBlueprint instance <%= options.id %></h2>
    <p>With a fancy background</p>
  </div>
</template>

<style scoped>
@import url('../css/style.css')
</style>

Шаблоны

Немного о том, как Nuxt.js устроен изнутри

 

Пакеты nuxt

@nuxt/builder

@nuxt/cli

@nuxt/core

@nuxt/generator

@nuxt/webpack

@nuxt/webpack

Внешние плагины

@nuxt/friendly-errors-webpack-plugin
time-fix-plugin
extract-css-chunks-webpack-plugin
hard-source-webpack-plugin
terser-webpack-plugin
webpackbar
optimize-css-assets-webpack-plugin
html-webpack-plugin

Middleware

webpack-dev-middleware
webpack-hot-middleware

Внутренние плагины

warning-ignore
CorsPlugin
ModernModePlugin
VueSSRServerPlugin
VueSSRClientPlugin

@nuxt/babel-preset-app

Postcss Config

@nuxt/core

Resolver

Module

Nuxt

@nuxt/config

@nuxt/server

@nuxt/vue-renderer

addPlugin

addTemplate

addLayout

addErrorLayout

addModule

resolveAlias

resolveModule

resolvePath

Обработка nuxt.config

Настройка сервера, используется библиотека connect

Компиляция vue шаблонов

Renderer

SPA

SSR

MODERN

@nuxt/cli

NuxtCommand

Options

build

dev

generate

help

index

start

common

locking

server

list

run

@nuxt/builder

watch

@nuxt/devalue

валидация ( validatePages, validateTemplate )

serialize-javascript

Builder

Сериализация данных

резолвинг ( resolveRoutes, resolveLayouts, resolveStore, resolveMiddleware, resolveCustomTemplates, resolvePlugins)

build & generate

TemplateContext

router, store, plugins, isDev, etc

@nuxt/vue-app

lodash темплейты

'App.js',
  'client.js',
  'index.js',
  'router.js',
  'router.scrollBehavior.js',
  'server.js',
  'utils.js',
  'empty.js',
  'components/nuxt-error.vue',
  'components/nuxt-child.js',
  'components/nuxt-link.server.js',
  'components/nuxt-link.client.js',
  'components/nuxt.js',
  'views/app.template.html',
  'views/error.html'

пакеты nuxt

@nuxt/builder

@nuxt/cli

@nuxt/core

@nuxt/generator

@nuxt/webpack

nuxt

nuxt-start

@nuxt/cli

@nuxt/core

nuxt-edge & nuxt-start-edge

deck

By Dmitry Molotkov

Made with Slides.com

deck

  • 4,744