Nuxt 性能优化

1、ui组件按需引入

（详见nuxt->vant按需引入）

2、请求分开服务端渲染及客户端渲染，并尽可能的减少请求

服务端渲染：需要 SEO 处理的，在 asyncData 内请求接口

客户端：不需要SEO处理的，在 mounted 内请求接口

3、no-ssr排除在服务端渲染的节点

页面内某部分不需要SEO的节点，用 no-ssr 包裹

    <no-ssr>
        <van-button color="#f00">Button</van-button>
    </no-ssr>

4、开启压缩 GZIP、BR

4.1）、安装 nuxt-precompress

npm i nuxt-precompress

4.2）、配置  nuxt-precompress

>>>nuxt.config.js


  modules: [
    ...
    'nuxt-precompress'
  ],


  // nuxtPrecompress
  nuxtPrecompress: {
    gzip: {
      enabled: true,
      filename: '[path].gz[query]',
      threshold: 10240,
      minRatio: 0.8,
      compressionOptions: { level: 9 },
    },
    brotli: {
      enabled: true,
      filename: '[path].br[query]',
      compressionOptions: { level: 11 },
      threshold: 10240,
      minRatio: 0.8,
    },
    enabled: true,
    report: false,
    test: /\.(js|css|html|txt|xml|svg)$/,
    // Serving options
    middleware: {
      enabled: true,
      enabledStatic: true,
      encodingsPriority: ['br', 'gzip'],
    },
  },

4.3)、执行 build -> 打开.nuxt > dist > client，看一下是否有.br或者.gz结尾，说明成功

5、nuxt再次压缩包体积CompressionPlugin及optimization

5.1）、安装 compression-webpack-plugin

npm i compression-webpack-plugin@5.0.1

5.2）、配置

>>>nuxt.config.js

build: {
...

    plugins: [
      new CompressionPlugin({
        test: /\.js$|\.html$|\.css/, // 匹配文件名
        threshold: 10240, // 对超过10kb的数据进行压缩
        deleteOriginalAssets: false // 是否删除原文件
      })
    ],
    optimization: {
      minimize: true,
      splitChunks: {
        chunks: 'all',
        automaticNameDelimiter: '.',
        name: true,
        minSize: 10000,
        maxSize: 244000,
        cacheGroups: {
          vendor: {
            name: 'node_vendors',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'all',
            maxSize: 244000
          },
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true
          },
          commons: {
            test: /node_modules[\\/](vue|vue-loader|vue-router|vuex|vue-meta|core-js|@babel\/runtime|axios|webpack|setimmediate|timers-browserify|process|regenerator-runtime|cookie|js-cookie|is-buffer|dotprop|nuxt\.js)[\\/]/,
            chunks: 'all',
            priority: 10,
            name: true
          }
        }
      }
    },
}

执行 dev 后，能明显看到 common.appxxxx.js、node_vendors.._node_modules_@.js等被分成了很多小包