Angular 4应用运行fabric.js出现关键依赖警告的原因咨询

这个警告我之前帮不少开发者排查过，本质是Webpack的静态依赖分析机制和fabric.js内部的动态加载逻辑冲突导致的，具体拆解下：

• Webpack的静态分析特性：Webpack在编译时会静态扫描代码里的require()或import语句，以此确定所有需要打包的依赖项。但如果代码里用了表达式作为依赖路径（比如require(someDynamicVariable)），Webpack没法提前预判要加载的具体模块，就会抛出Critical dependency: the request of a dependency is an expression这个警告。

• fabric.js的动态加载逻辑：你看到的fabric.js第25971行附近，存在动态加载资源的代码（大概率是动态加载字体文件或者插件模块）。这种写法在浏览器原生环境下没问题，但Webpack的静态分析器无法识别这类动态路径，因此触发了警告。

• Angular环境的一致性：不管是开发还是生产环境，Angular都是基于Webpack进行打包构建的，所以只要fabric.js里存在这种动态依赖写法，两种环境都会触发相同的警告——毕竟Webpack的依赖分析逻辑不会因为环境切换而改变。

补充一句：这个警告通常不会影响应用的正常运行，只是Webpack在告诉你它没法完全解析这部分依赖。如果想消除警告，可以尝试在Webpack配置里给fabric.js添加依赖解析的忽略规则，或者使用fabric.js的ES模块版本（如果你的Angular 4版本兼容的话）。

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