灯塔下一场演出

Question

尽管我的代码很简单，但我不知道为什么我的next性能在灯塔中太低了。我的next 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. 我的照片是延迟加载的。为什么灯塔要求"预加载LCP元素使用的图像，以提高LCP时间">
2. 我如何摆脱"脚本评估"?

航速不是很差，但灯塔的性能是一个灾难。如有任何帮助，不胜感激。

Answer 1

在我的评论旁边，你可能会仔细检查你正在全局导入的插件的一面，这些插件在初始加载时影响了你的页面。

https://bundlephobia.com/package/vue-html2pdf@1.8.0

vue-html2pdfisquite如你所见，很重。因为你是全局加载的，这对JS解析/执行时间没有帮助。

也可以考虑一些部分水化元框架，如:

• AstroJS
• MarkoJS
• Qwik

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

当然，next也有一些解决方案，通过使用vue-lazy-hydration。