如何优化Nuxt 2与Vuetify构建的页面性能？

一、Roboto字体与Material Design Icons优化 #

1. Roboto字体优化 #

• 本地托管字体：
  下载Roboto字体的woff2格式文件（优先选woff2，体积更小），放入项目static/fonts目录。在nuxt.config.js的Vuetify配置中替换默认CDN字体：

  export default {
    vuetify: {
      options: {
        theme: {
          font: {
            family: 'Roboto'
          }
        }
      },
      customVariables: ['~/assets/variables.scss'],
      treeShake: true
    },
    css: [
      '@/assets/fonts.css' // 自定义字体样式文件
    ]
  }
  

  在assets/fonts.css中添加本地字体声明：

  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Roboto-Regular.woff2') format('woff2');
    font-display: swap;
  }
  @font-face {
    font-family: 'Roboto';
    font-style: bold;
    font-weight: 700;
    src: url('/fonts/Roboto-Bold.woff2') format('woff2');
    font-display: swap;
  }
  

• 字体子集化：仅保留网站实际使用的字符（比如英文、波斯文），通过字体子集化工具生成精简版字体文件，大幅减少体积。
• 预加载关键字体：在nuxt.config.js的head配置中添加预加载规则，优先加载核心字重：

  head: {
    link: [
      {
        rel: 'preload',
        href: '/fonts/Roboto-Regular.woff2',
        as: 'font',
        type: 'font/woff2',
        crossorigin: ''
      }
    ]
  }
  

2. Material Design Icons优化 #

• 本地托管图标CSS：下载materialdesignicons.min.css到static/css目录，替换Vuetify默认的CDN引入，在nuxt.config.js的css数组中引入本地文件：

  css: [
    '@/static/css/materialdesignicons.min.css'
  ]
  

• 按需引入图标：放弃全量CSS，改用@mdi/js包按需导入图标，减少无用代码：
  1. 安装依赖：npm install @mdi/js
  2. 在组件中按需使用：

  <template>
    <v-icon :svg="mdiBook"></v-icon>
  </template>
  
  <script>
  import { mdiBook } from '@mdi/js'
  
  export default {
    data() {
      return {
        mdiBook
      }
    }
  }
  </script>
  

• PurgeCSS移除无用图标样式：在Nuxt中配置PurgeCSS，扫描项目文件移除未使用的图标类：

  export default {
    build: {
      postcss: {
        plugins: {
          '@fullhuman/postcss-purgecss': {
            content: [
              './components/**/*.vue',
              './layouts/**/*.vue',
              './pages/**/*.vue'
            ],
            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
          }
        }
      }
    }
  }
  

二、Nuxt自动生成JS文件优化 #

1. 代码分割与分包优化 #

• 调整splitChunks配置，将第三方依赖单独打包，避免重复加载：

  export default {
    build: {
      splitChunks: {
        layouts: true,
        pages: true,
        commons: true
      }
    }
  }
  

2. 压缩与摇树优化 #

• 生产环境启用代码压缩，配置Terser移除冗余代码：

  export default {
    build: {
      minify: 'terser',
      terser: {
        compress: {
          drop_console: true, // 移除控制台输出
          drop_debugger: true
        }
      },
      optimizeCSS: true, // 优化CSS
      optimizeJS: true // 优化JS
    }
  }
  

3. 静态资源缓存 #

• 给构建文件添加哈希后缀，利用浏览器缓存：

  export default {
    build: {
      filename: {
        js: '[name].[contenthash].js',
        css: '[name].[contenthash].css'
      }
    }
  }
  

4. 禁用SourceMap #

• 生产环境关闭SourceMap，减少文件体积：

  export default {
    build: {
      sourceMap: false
    }
  }
  

5. 路由懒加载 #

• Nuxt默认已开启页面懒加载，确保页面组件未被全局引入，保持按需加载的状态。

6. 减少第三方依赖 #

• 清理package.json中未使用的依赖，替换为轻量级替代库（比如用dayjs替代momentjs）。

内容的提问来源于stack exchange，提问作者hamid-davodi