灯塔中的NUXT性能

Question

尽管我的代码很简单，但我不知道为什么我的NUXT性能在灯塔中太低。我的NUXT Web应用程序使用名称 hadicodes.com ，您可以在线查看它。

这是我的 nuxt.config ：

const sitemap = require('./modules/sitemap/sitemap.js');
import redirectSSL from 'redirect-ssl'
const isDev = (process.env.NODE_ENV !== 'production');
module.exports = {
  head: {
    title: 'hadicodes',
    meta: [
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1'
      },
      {
        hid: 'description',
        name: 'description',
        content: ''
      },
      {
        name: 'format-detection',
        content: 'telephone=no'
      }
    ],
    link: [{
      rel: 'icon',
      type: 'image/x-icon',
      href: '/favicon.ico'
    }]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '@/assets/css/changeeffect.css',
    '@/assets/css/costum.css',
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: '@/plugins/vue-html2pdf', mode: 'client' }
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [],
  serverMiddleware: [
    { path: "/", handler: "~/server/redirect.js" },
    redirectSSL.create({
      enabled: process.env.NODE_ENV === 'production'
     }),
  ],
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxt/content',
    [
      'bootstrap-vue/nuxt', {
        icons: true
      }
    ],
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    [
      "nuxt-i18n",
      {
        lazy: true,
        langDir: "lang/",
        locales: [{
            code: "en",
            name: "English",
            file: "en.json"
          },
          {
            code: "nl",
            name: "Nederlands",
            file: "nl.json"
          },
          {
            code: "fr",
            name: "Français",
            file: "fr.json"
          }
        ]
      }
    ],
    '@nuxtjs/fontawesome',
    ['@nuxtjs/amp', {
      css: '~/assets/css/amp/default.amp.css',
     }],
     '@nuxtjs/sitemap',
    // TODO: Remove it if you want to eject from codeSandbox
  ],
  sitemap:sitemap,
  fontawesome:{
    component:'fa',
    icons: {
      solid: ['faHouse','faCamera','faAddressCard','faBlog','faPersonDigging','faPhone','faLanguage','faStar','faStarHalfStroke',],
      regular:['faStar']
    }
  },
  
  content:{},
  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {},

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: 'en',
      name: 'hadicodes.com',
      theme_color: "#FFF",
      start_url: '/',
    },
    workbox: {
      dev: isDev,
      workboxURL: !isDev?'./node_modules/workbox-cdn/workbox/workbox-sw.js':null,

      config: {
          modulePathPrefix: !isDev?'./node_modules/workbox-cdn/workbox':null,

      },
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  server: {
    port: 3500 // default: 3000
  },
  generate:{
    dir: '../docs',
    ignore:[
      '.nuxt', // buildDir
    'static', // dir.static
    'dist', // generate.dir
    'node_modules',
    '.**/*',
    '.*',
    'README.md'
    ]
  },
  build: {
    extend (config, ctx) {
      config.resolve.symlinks = false
    },
    babel: {
      compact: true
    },
    extend(config, { isDev , isClient }) {
      if (isClient && !isDev) {
        config.optimization.splitChunks.maxSize = 200000
      }
      if (isClient) {
        config.devtool = 'source-map'
      }
    },
  },
  render: {
    http2: {
      push: true,
      bundleRenderer: {
        shouldPreload: (file, type) => {
          return ['script', 'style', 'font'].includes(type)
        }
      }
    }
  },
  telemetry: false
}

这是我的第一页代码，

<template>
  <div>
    <div>
      <b-row>
        <b-col class="mt-5">
          <h5>This is me. (4cm x 6cm passport photo)</h5>
          <h2>Hadi MAJ</h2>
        </b-col>
        <b-col align="center">
          <b-img-lazy rel="preload" class="w-100" src="/images/hero-img.png" alt="hero-img" />
        </b-col>
      </b-row>
    </div>
    <br>
    <br>
    <div>
      <b-card-group deck align="center">
        <b-card>
          <b-card-title>
            <div>
              <b-icon icon="card-image"></b-icon>
            </div>
            <br>
            <div>
              <h5>Web design</h5>
            </div>
          </b-card-title>
          <b-card-text>
            <client-only>
            <NuxtContent :document="posts[0]" />
            </client-only>
          </b-card-text>
          <!-- <b-card-text class="small text-muted">Last updated 3 mins ago</b-card-text> -->
        </b-card>
        <b-card>
          <b-card-title>
            <div>
              <b-icon icon="tools"></b-icon>
            </div>
            <br>
            <div>
              <h5>Web Development</h5>
            </div>
          </b-card-title>
          <b-card-text>
            <client-only>
            <NuxtContent :document="posts[1]" />
            </client-only>

1. 我的照片已懒惰。为什么Lighthouse要求“预加载LCP元素使用的图像以改善您的LCP时间”。
2. 我如何摆脱“脚本评估”？

速度不是很糟糕，但是灯塔的性能是一场灾难。任何帮助都将受到赞赏。

Answer 1

除了我的评论外，您可能可以仔细检查您在全球导入的插件的侧面，并且在初始负载中影响您的页面。

https://bundlephobia.com/package/package/package/ [email＆nbsp; prectioned]

vue-html2pdf vue-html2pdf in 很重很重。由于您在全球加载它，因此没有帮助JS解析/执行时间。

另外，考虑一些部分水合元框架，例如：

• astrojs
• markojs
• qwik

如果您想完全跳过水合价格。

当然，也可以通过使用 vue-lazy-hydration 。