在SharePoint Framework中添加externals js减小Production环境中js文件的大小

我们知道在SPFx中通过Yeoman SharePoint Generator创建完webpart之后，通过gulp serve命令就可以成功运行实例webpart以及做一些定制引用公共的js，比如jquery, pnp等，这些公共js将会被webpack打包在同一个js中，虽然完全不会影响页面webpart的正常加载，但是可能会影响页面加载的效率以及sharepoint自己页面的加载，这个时候微软推荐开发者在config.json中添加externals配置，用以减小webpart js的大小，减少加载页面的网络负载，下面是一个简单的实例展示添加以及未添加externals之间的区别。

未添加externals配置时js的大小:

添加externals配置时js的大小：

其中externals在config.json中的配置如下：

"externals": {

"jquery": "https://code.jquery.com/jquery-3.3.1.min.js",

"sp-pnp-js": "https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.min.js"

}

添加之后， jquery和pnp对应的js直接通过官方CDN加载，如果页面有多个webpart的话，只需要加载一次js并缓存即可。

本文参考：https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library