Nuxt生产模式加载资源延迟

Question

我目前正在运行一个在开发模式下运行良好的 nuxt 应用程序。但是，当我切换到生产模式时，您会看到一些 css 被推迟到稍后加载。我很确定这是一些 vuetify css。我说一些是因为有些类确实已经存在。

您可以通过刷新this page 来了解我的意思（确保禁用缓存）。

似乎我缺少某种 nuxt/webpack 配置来禁用它，但我不确定它是什么。

编辑：临时站点有时会关闭，所以这里是 gif 形式发生的事情，您可以看到某些关键的 css 稍后加载。

编辑 #2：在此处添加了最少的复制 https://github.com/amritk/vuetify-nuxt-repro

编辑#3：所以@Sabee 解决了我的最小复制问题，但这并没有解决我最初的问题。正如您在此处看到的，在客户端添加了一些样式块，但在服务器上不存在。如何确保在服务器上加载这些样式？

服务器：

客户：

[

Edit#3：特别是它的 v-layout 样式加载较晚。有没有办法在服务器上预加载这个 css？

Answer 1

我向您的仓库创建了一个拉取请求并上传了代码to codesandbox。我认为你有一个 vuetify 语法问题，我建议你使用vuetify default app layout markup，你的代码必须是这样的：

default.vue 布局

<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 loader 使用默认值。 （如果你需要配置它） 并将ssr:false添加到nuxt.config.js中的vuetify样式全局加载，更好的方法是删除nuxt.config.js中的vuetify样式加载在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

如果您有任何问题，请联系我

Answer 2

好的@Sabee 的回答让我找出了问题所在。原来是来自 VLayout 组件的样式没有被加载。我相信这是一个 vuetify-loader 插件问题，而不是 nuxt。它被加载到服务器而不是客户端上。我所要做的就是更改我的配置以在开始时加载 VLayout 并且它起作用了！

Vuetify 插件

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

Vue.use(Vuetify, {
    options: {
        .
        .
        .
    },
    theme: {
        .
        .
        .
    },
    components: {
        VLayout
    }
})