Angular：如何将动态导入的JS文件及依赖排除在Webpack打包外

一、排除整个myJsFile.js及其所有依赖 #

1. 配置Webpack排除目标模块 #

在Webpack配置文件中添加externals字段，告知Webpack该模块为外部资源，不纳入打包：

module.exports = {
  // ...其他原有配置
  externals: {
    // 键为代码中导入模块的相对路径，值为模块暴露的全局变量名
    '../../somePath/myJsFile': 'myJsFile'
  }
};

如果是Angular CLI项目，需通过@angular-builders/custom-webpack引入自定义配置，在angular.json的build配置中指定customWebpackConfig路径。

2. 部署外部模块到服务器静态目录 #

将myJsFile.js及其所有依赖文件放到项目的静态资源目录（比如assets），确保构建后能通过URL直接访问（如/assets/myJsFile.js）。

3. 修改组件中的加载逻辑 #

替换原动态导入代码，改为手动加载外部脚本并调用模块方法：

ngOnInit() {
  if (this.myCondition) {
    this.loadScript('/assets/myJsFile.js').then(() => {
      // 通过全局变量访问外部模块
      (window as any).myJsFile.doSomething();
    });
  }
}

// 封装脚本加载工具方法
private loadScript(url: string): Promise<void> {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = () => resolve();
    script.onerror = () => reject(new Error(`加载脚本失败：${url}`));
    document.body.appendChild(script);
  });
}

二、仅排除单个依赖（比如myDependency.js） #

1. Webpack配置排除单个依赖 #

仅在externals中指定需要排除的依赖：

module.exports = {
  externals: {
    // 键为依赖的包名或导入路径，值为其全局变量名
    'myDependency': 'myDependency'
  }
};

2. 部署单个依赖到静态目录 #

将myDependency.js放到静态资源目录，确保可通过URL访问。

3. 调整加载顺序与代码 #

确保先加载外部依赖，再导入myJsFile（此时Webpack不会打包myDependency）：

ngOnInit() {
  if (this.myCondition) {
    this.loadScript('/assets/myDependency.js').then(() => {
      // 正常动态导入myJsFile，Webpack会打包它但排除myDependency
      import("../../somePath/myJsFile").then((myModule) => {
        myModule.doSomething();
      });
    });
  }
}

private loadScript(url: string): Promise<void> {
  // 同上脚本加载方法
}

关键注意事项 #

• 外部加载的脚本需为UMD格式或全局暴露变量，否则无法在浏览器中直接调用
• 依赖脚本的加载顺序必须正确：若A依赖B，需先加载B再加载A
• Angular项目需在angular.json的assets数组中配置静态资源路径，确保构建时复制到产物目录
• 可给脚本URL添加版本号（如/assets/myJsFile.js?v=20240520）避免浏览器缓存旧文件

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