每周技术总结-2025w2

2025-01-12#css #html #nuxt #lottie

本周的技术总结涵盖了项目开发过程中遇到的实际问题及解决方案，主要包括 Nuxt 框架的相关问题和动画库 Lottie 的优化建议。

@nuxt/ui 服务端SSR 渲染500

问题描述：
在 Alipay HK 内置浏览器环境中（低版本 Chrome，大概是6x的版本），使用 @nuxt/ui 组件库时，服务端渲染（SSR）过程中出现了页面渲染异常的问题，服务端渲染直接500。

原因分析：

@nuxt/ui中用到的getColorScheme在该环境中无法正常获取。

Cannot read properties of undefined (reading 'getColorScheme')

解决方案：

通过@nuxt/ui 的配置主动指定 color scheme，避免从系统去获取导致服务端渲染异常。

export default defineNuxtConfig({
  colorMode: {
    preference: 'light',
  },
})

参考解决解决方案：https://github.com/nuxt/ui/issues/901#issuecomment-1792673614

Nuxt 在打包时如何丢弃 console 日志输出

问题描述：
生产环境中保留的 console.log 等调试信息可能导致安全隐患，增加打包体积，同时影响性能。

解决方案：

配置 nuxt.config.ts，通过 vite 或 webpack 插件移除日志输出：

对于 Vite：

export default defineNuxtConfig({
  vite: {
    esbuild: {
      drop: ['console', 'debugger']
    }
  }
})

更小颗粒度的移除

需要更细颗粒度的移除console日志，可以使用pure进行移除：

export default defineNuxtConfig({
  vite: {
    esbuild: {
      drop: ["debugger"],
        pure: ["console.log", "console.warn", "console.debug", "console.trace"],
    }
  }
})

对于 Webpack：
安装插件 terser-webpack-plugin，并在配置中启用：

import TerserPlugin from 'terser-webpack-plugin'

export default defineNuxtConfig({
  build: {
    terser: {
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },
    },
  },
})

效果：
打包后生产环境的代码将不包含 console 和 debugger 调试信息，优化了体积和安全性。

Nuxt 的 RouteRules 规则

功能介绍：
Nuxt 提供了 routeRules 配置，可以为特定路由动态设置渲染规则和缓存策略，以提升页面加载性能和灵活性。

See: route rules documentation

配置示例：
以下是一些常见的 routeRules 应用场景：

export default defineNuxtConfig({
  routeRules: {
    '/static-page': { static: true }, // 针对静态页面启用静态渲染
    '/dynamic-page': { ssr: false }, // 关闭 SSR，仅在客户端渲染
    '/cache-page': { cache: { maxAge: 3600 } }, // 启用页面缓存
  },
})

注意事项：

如果项目配置了baseURL ,则routeRules在匹配时会忽略baseURL，这点在配置规则是需要尤其注意。

Lottie 多个实例加载可能会导致 clipPath 重复

问题描述：
在同一页面中使用多个 Lottie 动画实例时，发现动画 SVG 元素的 clipPath 属性出现重复，导致部分动画显示异常。

原因分析：

项目内封装的lottie组件是通过异步加载lottie-web后再初始化动画，如果两次lottie加载时间过于接近，有几率导致clipPath冲突，互相影响。

看lottie-web的源代码

const createElementID = (function () {
  var _count = 0;
  return function createID() {
    _count += 1;
    return idPrefix + '__lottie_element_' + _count;
  };
}());

js加载完会生成一个闭包，此后每次创建动画都会递增生成id。
所以当第一个lottie-js加载完并渲染了一部分后第二个js的将会重置lottie对象，导致count重置，然后引起重复。

解决方案：

可以在js加载完成后通过 lottie.setIDPrefix("my-unique-prefix") 为每个实例定义唯一id前缀：

参考: https://github.com/airbnb/lottie-web/issues/2615#issuecomment-1970145268

总结

本周的技术问题涵盖了从服务端渲染到前端动画的多个环节，通过对问题的定位和解决，我们在兼容性、性能优化以及代码质量方面有了进一步的提升。希望以上内容对团队开发有所帮助！

HBB's Blog