Загрузка в производственный режим Nuxt с задержкой - PullRequest
Новая
       20

Загрузка в производственный режим Nuxt с задержкой

1 голос
/ 04 июня 2019

В настоящее время я запускаю приложение nuxt, которое отлично работает в режиме разработки.Однако, когда я переключаюсь в производственный режим, вы можете видеть, что некоторые css откладываются для загрузки позже.Я почти уверен, что это часть vuetify css.Я говорю некоторые, потому что некоторые классы уже существуют.

Вы можете понять, что я имею в виду, обновив эту страницу (обязательно отключите кэш).

Кажетсякак будто есть какая-то конфигурация nuxt / webpack, которую мне не хватает, чтобы отключить это, но я не уверен, что это такое.

Редактировать: промежуточный сайт иногда не работает, так что вот что происходит в gif-форме,Вы можете увидеть, что некоторые критические CSS загружаются позже.enter image description here

Редактировать # 2: здесь добавлено минимальное репро https://github.com/amritk/vuetify-nuxt-repro

Редактировать # 3: Так @Sabee решил мое минимальное репро, но это не такне решить мою первоначальную проблему.Как вы можете видеть здесь, есть несколько блоков стилей, которые добавляются на клиенте, но отсутствуют на сервере.Как убедиться, что эти стили загружены на сервер?

Сервер:

enter image description here

Клиент:

[client side[3]

Редактировать # 3: В частности, стили v-layout загружаются поздно.Есть ли способ предварительно загрузить этот CSS на сервер?

Ответы [ 2 ]

1 голос
/ 28 июня 2019

Хорошо @ Ответ Саби привел меня к выяснению проблемы.Оказывается, что это были стили из компонента VLayout, которые не загружались.Я считаю, что это была проблема с плагином vuetify-loader, а не с nuxt.Он загружался на сервер, а не на клиент.Все, что мне нужно было сделать, это изменить мой конфиг для загрузки VLayout в начале, и это сработало!

Плагин Vuetify 

import Vue from 'vue'
import Vuetify, { VLayout } from 'vuetify/lib'

Vue.use(Vuetify, {
    options: {
        .
        .
        .
    },
    theme: {
        .
        .
        .
    },
    components: {
        VLayout
    }
})
1 голос
/ 25 июня 2019

Я создал пул-запрос к вашему репо и загрузил код в коды и коробки . Я думаю, что у вас проблема с синтаксисом vuetify, я рекомендую вам использовать vuetify разметка приложения по умолчанию , ваш код должен выглядеть следующим образом:

default.vue layout 

<template lang="pug">
v-app
    v-toolbar(app color="primary")

        v-toolbar-title.white--text SiteLogo
        v-spacer
        v-toolbar-items
            v-btn(flat dark to="/" nuxt) home
            v-btn(flat dark to="/inspire" nuxt) Inspiration
            v-btn(flat dark) about    
    v-content
        nuxt
</template>

и index.vue 

<template lang="pug">
v-container
    v-layout(row wrap)
        v-flex(xs12 sm6 offset-sm3)
            v-card
                v-img(src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75")
                v-card-title(primary-title)
                    div
                        h3(class="headline mb-0") Kangaroo Valley Safari
                        div {{ card_text }}
                v-card-actions
                    v-btn(flat color="primary") Share
                    v-btn(flat color="primary") Explore
        v-flex(pt-4)        
            div PLACEHOLDDDDDDDDDDDEEEEEEEEEEEEERRRRRRRRRRRR
            v-btn(to="/inspire" nuxt) inspuration
</template>
<script>
  export default {
    data () {
      return {
        card_text: 'Lorem ipsum dolor sit amet, brute iriure accusata ne mea. Eos suavitate referrentur ad, te duo agam libris qualisque, utroque quaestio accommodare no qui. Et percipit laboramus usu, no invidunt verterem nominati mel. Dolorem ancillae an mei, ut putant invenire splendide mel, ea nec propriae adipisci. Ignota salutandi accusamus in sed, et per malis fuisset, qui id ludus appareat.'
      }
    }
  }
</script>

Во-вторых, вам не нужно писать загрузчик vuetify, который используется по умолчанию. (если вам нужно настроить его) И добавьте ssr:false к глобальному расположению стиля vuetify в nuxt.config.js, лучший способ - удалить загрузку стиля vuetify в nuxt.config.js и сделать это в плагине vuetify.

Плагин Vuetify 

import Vue from 'vue'
import Vuetify from 'vuetify/lib'


Vue.use(Vuetify, {
    theme: {
        // HC Green
        primary: {
            lighten3: '#009546', // hc-light-green
            base: '#008940'      // hc-green
        },
        // Blue
        accent: {
            lighten1: '#23BFFF', // light-blue
            base: '#0279D7',     // medium-blue
            darken3: '#0D47A1'   // dark-blue, darker-blue
        },
        // Grey
        secondary: {
            lighten5: '#FFFFFF', // white
            lighten4: '#EFEFEF', // lighter-grey, dark-white
            lighten3: '#DFDFDF', // light-medium-grey, light-grey
            base: '#9F9F9F',     // medium-grey
            darken2: '#777777',  // pastel-grey
            darken3: '#3E3E3E',  // darker-grey, charcoal-grey, light-black, dark-medium-grey, dark-grey
            darken5: '#000000'   // black
        },
        // Blue
        info: {
            base: '#0279D7'      // medium-blue
        },
        // Orange/Yellow
        warning: {
            lighten3: '#fad53e', // light-orange aka yellow
            base: '#ff8800',     // from https://www.google.com/search?q=css+warning+color
            darken3: '#e65100'   // dark-orange
        },
        // Red
        error: {
            lighten1: '#ff5252', // light-red
            base: '#B71C1C'      // medium-red
        },
        // Green
        success: {
            lighten3: '#4CAf50', // light-green
            base: '#28a745',     // bootstrap green https://getbootstrap.com/docs/4.3/getting-started/theming/
            darken3: '#00592A'   // dark-green
        }
    }
})

nuxt.config.js 

import Sass from 'sass'
import dotenv from 'dotenv'
import vuetifyLoader from './src/plugins/vuetify-loader'
dotenv.config()

const config = {
    mode: 'universal',
    debug: !(process.env.NODE_ENV === 'production'),

    // Loading bar color
    loading: {
        color: '#fff'
    },

    // Global css
    css: [{ src: '~/assets/style/vuetify.styl', lang: 'styl',ssr:false }],

    // Change src directory
    srcDir: 'src/',
    // Plugins
    plugins: [
        { src: '@/plugins/vuetify' }
    ],

    // Nuxt.js modules
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/dotenv',
        ['cookie-universal-nuxt', { alias: 'nuxtCookies' }]
    ],

    // Babel
    babel: {
        presets: ['@babel/preset-env'],
        plugins: [
            '@babel/plugin-transform-modules-commonjs',
            'dynamic-import-node',
            '@babel/plugin-syntax-dynamic-import',
            [
                'transform-runtime',
                {
                    polyfill: false
                }
            ]
        ]
    },

    // Build Config
    build: {
        filenames: {
            app: ({ isDev }) => isDev ? '[name].js' : '[name]-[hash].js',
            chunk: ({ isDev }) => isDev ? '[name].js' : '[name]-[hash].js'
        },

        // Extend webpack config
        extend: (config, ctx) => {

            config.devtool = ctx.isClient ? 'eval-source-map' : 'inline-source-map'
        },

        loaders: {
            sass: {
                implementation: Sass
            }
        },

        // Vuetify Loader - To auto load your components
        transpile: [/^vuetify/],
        plugins: [ vuetifyLoader]
    }
}

export default config

Если у вас есть какие-либо вопросы, пожалуйста, свяжитесь со мной

...