Nuxt 2 项目性能优化实践

本文探讨了在 Nuxt 2 项目中进行性能优化的实践方法。通过细致的分析和调整，提高了项目的加载速度和用户体验。涉及的优化手段包括图片懒加载、CDN 加速、资源压缩以及 CSS 文件的优化。这些方法综合应用，为项目带来了明显的性能提升。文章旨在分享实际经验，帮助开发者更好地优化他们的 Nuxt 2 项目。

1. 图片懒加载

图片懒加载是一项优秀的性能优化技术，它可以显著减少页面的初始加载时间。通过延迟加载页面中的图片，只有当图片即将进入用户的视口时才加载，可以有效减小页面的网络请求量，提高用户体验。
在 Nuxt 2 项目中，我采用了图片懒加载的方案，确保仅在需要时才加载图片资源，从而加速页面加载速度。

<img v-lazy-src="/path/to/image.jpg" alt="Lazy Loaded Image">

2.CDN 加速静态资源

利用 CDN（内容分发网络）加速静态资源是一种常见的优化手段。通过将项目中的静态资源（例如 JavaScript 文件、样式表、字体等）托管到 CDN 上，可以将这些资源分发到全球各地的节点，提高用户访问速度。
在 Nuxt 2 项目中，把axios/jQuery/swiper/vue-lazyload图片懒加载进行cdn加载
以下是一个示例，假设你想将 vue-lazyload 模块从 CDN 引入：

// nuxt.config.js

export default {
  build: {
    extend(config, ctx) {
      // 使用 externals 配置将 vue-lazyload 模块从 CDN 引入
      config.externals = {
        'vue-lazyload': 'VueLazyload',
      };
    },
  },
  // 其他配置...
};

这里我们将 vue-lazyload 模块设置为外部模块，并指定其在全局中的变量名为 ‘VueLazyload’。这样在页面中使用 import 导入该模块时，Webpack 将不会将其打包进最终的 bundle 中，而是期望在运行时通过全局变量来获取。

请注意，使用 CDN 引入模块需要确保在页面中引入了相应的 CDN 资源，例如在 HTML 文件的 部分添加：

<script src="https://cdn.jsdelivr.net/npm/vue-lazyload@x.x.x/dist/vue-lazyload.js"></script>

将 x.x.x 替换为实际的版本号。这样在运行时，全局变量 ‘VueLazyload’ 就会指向 CDN 上加载的模块。
根据具体的模块和 CDN 链接，你可以根据上述步骤适应其他懒加载引入的依赖。

3. 资源压缩为 Gzip 和 Brotli 格式

资源压缩是另一个关键的性能优化步骤，通过使用 Gzip 和 Brotli 格式对静态资源进行压缩，我们可以显著减小文件体积，提高传输速度。
nuxt-precompress 插件在构建时会对生成的静态资源进行预压缩，而 compression 中间件在运行时（服务器启动时）对实际的 HTTP 响应进行压缩。这两者的结合使用可以在两个不同阶段对资源进行压缩，以确保最佳的性能优势。

// nuxt.config.js

export default {
  modules: [
    'nuxt-precompress'
  ],
  serverMiddleware: [require('compression')()],
  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. 使用 optimize-css-assets-webpack-plugin 压缩 CSS 文件

optimize-css-assets-webpack-plugin 是一个 Webpack 插件，用于在构建过程中优化和压缩 CSS 文件。通过在 Nuxt 2 项目中引入这个插件，我们能够有效减小 CSS 文件的大小，加速页面加载。

// nuxt.config.js

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  // 构建配置
  build: {
    extend(config, ctx) {
      if (ctx.isClient) {
        // 在客户端构建时使用 optimize-css-assets-webpack-plugin
        config.optimization.minimizer.push(new OptimizeCSSPlugin());
      }
    },
  },
  // 其他配置...
}