如何让多模块导入logger时共享同一动态生成的ssid常量？

核心原理：ES模块的单例特性 #

ES模块本身是单例模式，当多个模块导入同一个logger.js时，模块内的顶级代码只会执行一次。也就是说你当前的logger.js代码里，const ssid = v4();只会在第一次导入时执行，后续所有导入的模块都会共享这个已经生成好的ssid值。

如果实际项目中出现了多个ssid的情况，大概率是Webpack的打包配置导致logger.js被重复打包到了不同的chunk里，而非模块本身的特性问题。

调整Webpack配置抽离公共模块 #

修改Webpack的optimization.splitChunks配置，让logger.js这类公共模块被抽离到单独的chunk中，避免重复打包：

// webpack.config.js
module.exports = {
  // ...其他配置项
  optimization: {
    splitChunks: {
      chunks: 'all', // 对同步、异步chunk都生效
      cacheGroups: {
        loggerChunk: {
          test: /logger\.js$/, // 匹配你的日志模块文件
          name: 'shared-logger', // 抽离后的chunk名称
          priority: 10, // 优先级高于默认缓存组
          enforce: true // 强制抽离该模块
        }
      }
    }
  }
};

验证共享效果 #

在logger.js中添加打印语句，确认ssid只生成一次：

// logger.js
'use strict';

import { v4 } from "uuid";

const ssid = v4();
console.log('当前ssid:', ssid); // 控制台只会输出一次该日志

export default function sendToLog(metric) {
    metric.ssid = ssid; 
}

额外注意事项 #

• 若项目中有异步加载的模块导入logger.js，只要配置了splitChunks.chunks: 'all'，同样会共享同一个ssid。
• 保持ssid的常量性，不要使用export let ssid这类可修改的变量声明，避免意外修改导致共享值异常。

内容的提问来源于stack exchange，提问作者philolegein