nuxt3构建优化

1.性能分析

network分析

Lighthouse分析

利用浏览器的Lighthouse工具不仅能够了解到首屏渲染速度等信息，并还能提供相应优化建议

Bundle分析        

在nuxt3不需要自行下载第三方依赖也能够进行Bundle分析

配置：

在nuxt.config.ts下写入

export default defineNuxtConfig({
    build: {
        analyze: {
            analyzerMode: 'static'
        }
    }
})

完成以上配置在进行build构建时会生成stats.html文件本地打开即可

2.传输优化

gzip压缩

在部署nginx开启

http {
   gzip on;
   gzip_vary on;
   gzip_proxied any;
   gzip_comp_level 6;
   gzip_types text/plain text/css application/json application/javascript application/x-javascript text/javascript text/xml application/xml application/xml+rss;
}

开启http2

server {
     listen 443 ssl http2;
     server_name www.xiaolinboke.com;  
     ssl_certificate      xxxxx.com_bundle.pem;
     ssl_certificate_key  xxxx.com.key;
     ssl_session_cache    shared:SSL:1m;
     ssl session_timeout 5m;
     ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
     ssl_prefer_server_ciphers on;
     ss1_ciphers "EECDH+AESGCM:EDH+AESGCM:EECDH:EDH:!MD5:!RC4:LOW:!MEDIUM:CAMELLIA:ECDSA:!DES:!DSS:!3DES:!NULL";
}

分包策略

默认情况下，浏览器重复请求相同名称的静态资源时，会直接使用缓存的资源。根据这个机制我们可以把第三方依赖打包到一个JS文件里，当第二次加载这文件时则会直接走缓存，达到减少HTTP请求的目的

在nuxt.config.ts下配置

export default defineNuxtConfig({
    vite: {
       build:{
        rollupOptions:{
            output:{
                manualChunks:(id)=>{
                    if(id.includes('node_modules')) {
                        return 'vendor';
                    }
                }
            }
        }
       }
    }
})

但如果将文件全打包到一个JS里又会导致打包出来的这个vendor文件过大，并且不能充分利用http请求的并发性，更严重的则会导致首屏加载过慢，所以我们可以对部分依赖进行分包

export default defineNuxtConfig({
    vite: {
       build:{
        rollupOptions:{
            output:{
                manualChunks:(id)=>{
                    if(id.includes('element-plugin')) {
                        return 'componentUi';
                    } else if(id.includes('axios')) {
                        return 'axios';
                    } else if(id.includes('lodash')) {
                        return 'lodash';
                    }
                }
            }
        }
       }
    }
})

3.SEO优化

robots.txt

Robots.txt是一个协议，而不是命令robots.txt是搜索引擎中访问网站的时候第一个要查看的文件，robots.txt文件用于告诉蜘蛛程序在服务器上什么文件(页面)可以被抓取

关于robots.txt 我们不需要手动编写我们可以借助@nuxtjs/robots这个插件去帮我们生成静态的robots.txt文件

安装:

npm i  @nuxtjs/robots

使用以及配置：

export default defineNuxtConfig({
    modules: ["@nuxtjs/robots"],
    // 配置
    robots: {
        rules: {
            // 允许被哪个搜索引擎抓取
            UserAgent: '*',
            // 不允许抓取的页面
            Disallow: ['/person*'],
            // 允许抓取的页面
            Allow: [ '/detail*', '/label', '/label-tag/*', '/archive'],
            // 生成sitemap.xml
            Sitemap: (req: any) => `https://${req.headers.host}/sitemap.xml`
        }
    }
})

关于robots.txt的编写规则 see: https://developers.google.cn/search/docs/crawling-indexing/robots/create-robots-txt?hl=zh-cn

meta标签

配置全局meta标签

export default defineNuxtConfig({
    app: {
        head: {
            meta: [
                {
                    "name": "keywords", // 网站关键字
                    "content": ""
                },
                {
                    "name": "description", // 网站描述
                    "content": ""
                },
            ]
        }
    }
})

配置单个页面的meta标签可借助useHead这个api实现

useHead({
  title: "标题",
  meta: [
    {
      name: "description",
      content: "描述",
    },
    { name: "keywords", content: "" },
  ],
});

useHead支持使用响应式变量

注：useHead只能在路由组件中使用

关于更多编写meta标签的技巧可自行查阅相关文档

4.感知优化

渐进式加载图片

关于渐进式加载图片nuxt3提供了一个插件：@nuxt/image-edge

安装：

npm i @nuxt/image-edge -D

nuxt.config.ts下写入

export default defineNuxtConfig({
  modules:['@nuxt/image-edge']
})

完成以上操作后即可使用:<nuxt-img/> 组件

关于更详细的使用说明:nuxt-image文档  

关于以上nuxt-image插件的一些碎碎念：

之前有尝试使用过，结果就是本来10mb的项目大小直升55mb真可谓是加量不加价，直到最后我并未采用这个插件。

首屏骨架屏加载

首屏优化，APP内常见的加载时各部分呈现灰色色块，针对骨架屏生成，业内已有不少解决方案，比如：常用的UI组件库中就有相应的骨架屏组件

5.排除冗余css样式

排除冗余css样式可借助 nuxt-purgecss 插件实现

安装:

npm install --save-dev nuxt-purgecss

配置:

export default defineNuxtConfig({
  modules:['nuxt-purgecss'],
  purgecss: {
    // 开发环境时应关闭  
    enabled: process.env.NODE_ENV === 'production' ? true : false,
    // 加入白名单 
    // 值:字符串(id,class,标签)选择器,正则，伪类
    safelist: [
      /w-e.+/,
      'editor—wrapper',
      'page-nav-box',
      // New Vue3 selectors
     /:slotted/,
     /:deep/,
     /:global/
    ],
  },
})

关于以上插件nuxt-purgecss即使你在开发中关闭了它但你开发运行还是会报错，只要下载了nuxt-purgecss开发环境会导致项目运行错,需要把nuxt-purgecss删除才可正常运行,@nuxtjs/robots和上述情况一致。