通过webpack externals解决canvas包在部署的时候安装问题

背景

在项目开发中由于使用了fabricjs进行了canvas相关的开发，但是fabricjs中依赖的canvas@2.9.0库在安装的时候特别慢，而且有时候会直接卡主，导致在部署的时候流水线卡死不动，网上大部分资料都是解决canvas库安装的问题，我们换种思路来解决这个问题。

解决方案

我们可以先把fabricjs打包之后的fabricjs放到cdn上，然后通过webpack的externals来将库外联，在项目中使用的方式依旧为

import fabric from 'fabric'

获取资源

fabircjs官网提供了一个自定义打包的功能，我们通过这个功能来获取到fabric的包,上传到cdn上

配置webpack

由于项目采用的vue-cli3的脚手架，所以配置如下

module.exports = {
    configureWebpack: config => {
        config.externals = {
            fabric: 'fabric'
        }
    }
}

我们通过webpack的能力，将库外联到cdn上,由于fabirc项目采用的umd方式的打包，所以会暴露出来一个变量挂载到window对象上，这个就是externals对象对应的value值，externals的key则是项目中的 import xxx from 'aaa'中aaa的值，通过查看打完包的源码，可以看到fabirc暴露出来的对象就是fabric。

externals

官网解释

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle 依赖于那些存在于用户环境(consumer's environment)中的依赖。此功能通常对 library 开发人员来说是最有用的，然而也会有各种各样的应用程序用到它。

开发库的时候用处

当我们开发一个业务组件库的时候，可能会依赖element-ui,and-design等ui框架，在实际项目使用时，大概率项目中已经存在了这些ui框架，这时候就可以通过externals来将这些包作为外部依赖，配合peerDependencies将其作为预装依赖

业务项目中使用

项目中可以通过externals来做一下大型库的外联来提高打包速度，减少包的大小，但是同时会引起http请求次数增多,要看具体情况来决定该如何使用