不用深挖Webpack配置，从代码组织层面就能轻松解决你的问题，给你几个实用的小方案：

1. 统一第三方库的导入入口 #

创建一个专门的vendor.js文件作为第三方库的统一出口，所有模块都从这里引入Vivagraph.js，而不是各自直接引入：

// vendor.js
// 只在这里引入一次Vivagraph.js
import Viva from 'vivagraphjs';
export default Viva;

然后在你的业务模块里这样用：

// customUI.js
import Viva from './vendor';
// 编写你的图形引擎逻辑

// app.js
import Viva from './vendor';
// 编写图对象与渲染逻辑

这样一来，所有模块共享同一个Vivagraph.js实例，既避免了代码里的重复引入，Webpack也会自动识别并只打包一次这个库，完全不用额外配置。

2. 抽离公共上下文避免循环依赖 #

如果customUI.js和app.js出现了互相引用的循环依赖问题，把两者共享的Vivagraph相关实例/配置抽离到一个独立的文件里，比如graph-context.js：

// graph-context.js
import Viva from './vendor';
// 初始化公共的图实例或配置
export const globalGraph = Viva.Graph.graph();
export const renderConfig = {
  container: '#graph-container',
  // 其他公共配置
};

然后让customUI.js和app.js都依赖这个上下文文件，而不是互相依赖：

// customUI.js
import { globalGraph } from './graph-context';
// 基于globalGraph实现你的引擎逻辑

// app.js
import { globalGraph, renderConfig } from './graph-context';
// 用globalGraph和renderConfig做渲染

这种方式能彻底切断两个模块的直接依赖，从根源上解决循环依赖问题，代码结构也更清晰。

额外小提示：Webpack本身会处理重复引入 #

其实即使你在多个模块里直接引入Vivagraph.js，Webpack的ES模块解析机制也会自动去重，不会把这个库打包多次。但上面的方案能让你的代码结构更整洁，维护起来更轻松，完全符合你想要的简洁易维护的需求。

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